Dicas úteis

Criando uma tabela em HTML

Pin
Send
Share
Send
Send


Em Tabelas HTML eles são usados ​​não apenas da maneira usual (como um conjunto de dados distribuídos pelas células, linhas e colunas), mas também pela conveniência de colocar informações na página. Simplificando, você pode apresentar toda a página html na forma de uma tabela e, por exemplo, colocar o menu na coluna da esquerda, as informações principais na coluna do meio e links adicionais na coluna da direita. O número de colunas, linhas e, consequentemente, células é selecionado apenas por você e pode ser qualquer um.

A partir da página que você está lendo agora, foi originalmente criada com base neste princípio: é dividida em várias linhas e cada linha em colunas (e, em linhas diferentes, um número diferente de colunas). Em algumas das células resultantes, por sua vez, mais tabelas são colocadas (as tabelas são inseridas nas tabelas). Você pode até vê-lo puramente visualmente.

Em geral, o uso de tabelas em HTML facilita a criação de um site. No entanto, você mesmo verá tudo! Então, vamos diretamente à prática.

§ 1. Criando uma tabela

No ama, uma tabela em HTML é criada com e tags, linhas da tabela (colocadas entre e tags) e, e colunas da tabela (colocadas entre e tags) e tags.

Por exemplo, crie uma tabela que consiste em uma linha e duas colunas. O HTML ficará assim:

Mas geralmente existem muitas linhas e colunas na tabela e, com esse registro, você ficará constantemente confuso. Portanto, no começo, eu recomendo usar o primeiro método.

§ 2. Quadro da tabela (bordas)

Por padrão, a tabela nos navegadores é exibida sem moldura. Para tornar visível o quadro da tabela, é usado o atributo "já familiar para você nas seções anteriores":fronteira»:

E então o navegador mostrará:

Primeira célulaSegunda célula

O início do atributo "borda" afeta apenas a borda externa; as bordas entre as células não podem ser alteradas. Eles podem ser mostrados ou não. Por exemplo, se você alterar o valor do atributo "borda" de "1" para "5":

Primeira célulaSegunda célula

Você pode alterar a cor da borda da tabela usando o botão "bordercolor" Por exemplo:

Então, no navegador, veremos:

Primeira célulaSegunda célula

§ 3. Recuo na tabela

Para mudar o recuo entre células adjacentes da tabela, o atributo HTML usa o "cellpacing" Vamos complicar a tabela para maior clareza: crie duas linhas de três colunas e aplique o atributo "espaço de célula":

O roteador B mostrará:

Primeira célulaSegunda célulaTerceira célula
Quarta célulaQuinta célulaSexta célula

Para recuar por dentro celula o atributo "cellpadding" Se mudarmos a primeira linha do nosso código HTML:

Primeira célulaSegunda célulaTerceira célula
Quarta célulaQuinta célulaSexta célula

§ 4. A união das células da tabela

Para combinar células da tabela horizontalmente (colunas) ou verticalmente (linhas), os seguintes atributos são usados ​​no HTML:

colspan - combinar células horizontalmente (colunas),

rowpan - mesclando células verticalmente (linhas).

Por exemplo, altere nosso código HTML da seguinte maneira:

Então, no navegador, veremos:

Primeira e segunda célulasTerceira célula
Quarta célulaQuinta célulaSexta célula

Primeira célulaSegunda célulaTerceira e sexta células
Quarta célulaQuinta célula

§ 5. O título da tabela

Se você usa uma tabela para organizar dados (e não para o layout da página), pode ser necessário usar um cabeçalho. O título da tabela é definido pela tag. Por exemplo:

Em um navegador, fica assim:

Cabeçalho da tabela
Primeira célulaSegunda célulaTerceira célula
Quarta célulaQuinta célulaSexta célula

Você pode aplicar o atributo "aalinhar" Alinhar com a tabela.

O atributo align possui os seguintes valores:

  • esquerda - alinha o título à borda esquerda da tabela,
  • certo - alinha o título à borda direita da tabela,
  • centro - alinha o título ao centro da tabela (valor padrão),
  • topo - o mesmo que "centro", só funciona em todos os navegadores,
  • embaixo - o título é colocado debaixo da mesa no centro.

Cabeçalho da tabela
Primeira célulaSegunda célulaTerceira célula
Quarta célulaQuinta célulaSexta célula

§ 6. Dimensões da tabela

E você pode alterar o tamanho da tabela e das células usando os seguintes atributos:

  • largura - a largura da tabela, coluna, célula,
  • altura - a altura da tabela, linha, célula.

Os valores x são especificados em pixels ou porcentagem. Por exemplo:

Ficará assim:

Primeira célulaSegunda célulaTerceira célula
Quarta célulaQuinta célulaSexta célula

§ 7. Alinhamento da tabela

Em HTML, o alinhamento horizontal da tabela em relação à página é feito usando o atributo que você já conhece:alinhar" Seus significados também lhe são familiares:

  • centro - alinhamento da mesa ao centro,
  • esquerda - alinhamento da mesa para a esquerda,
  • certo - alinhamento da mesa à direita.

Por padrão, o alinhamento ocorre à esquerda. Um exemplo:

Primeira célulaSegunda célulaTerceira célula
Quarta célulaQuinta célulaSexta célula

Para alinhar o texto na tabela (e seu conteúdo), você precisa usar o atributo "align" para cada célula específica! Porque é nas células que está localizado todo o conteúdo da tabela. Um exemplo:

Primeira célula (alinhada à direita)Segunda célula (centralizada)Terceira célula
Quarta célulaQuinta célulaSexta célula (alinhada à direita)

Para alinhar o conteúdo verticalmente células o atributo "valign", Que tem os seguintes significados:

  • linha de base - alinhamento na linha de base,
  • embaixo - alinhamento com a borda inferior,
  • meio - alinhamento no meio (valor padrão),
  • topo - alinhamento na borda superior.

Bordas e molduras

Por padrão, a tabela não possui borda. Você pode adicioná-lo usando o atributo border da tag

. No entanto, às vezes os navegadores exibem essa borda de maneira diferente, por isso é melhor atribuir esse processo ao trabalho com estilos:

Cor do plano de fundo e do texto

Para indicar o plano de fundo de uma célula da tabela HTML, linha ou célula individual, para as tags

, As seguintes opções podem ser aplicadas:

  • plano de fundo - a imagem é usada como plano de fundo. Você pode especificar o nome do arquivo ou o caminho para ele,
  • bgcolor - o fundo é uma cor específica. Você pode especificar o nome da sombra de interesse e o código hexadecimal.

Para alterar a cor do texto em uma tabela HTML, você deve usar uma tag.

§ 8. Antecedentes da tabela

No HTML, a cor de plano de fundo da tabela ou de suas células individuais é definida usando o "bgcolor" Falamos sobre como selecionar a cor desejada de um elemento em HTML na lição sobre os atributos da tag body. Um exemplo:

No navegador, veremos:

e
Primeira célulaSegunda célulaTerceira célula
Quarta célulaQuinta célulaSexta célula

Você pode usar imagens como plano de fundo da tabela ou em uma única célula. Em HTML, isso é feito usando o "plano de fundo" O valor do atributo "background" é o endereço da imagem (como estudamos os gráficos nesta lição). Exemplo de imagem de plano de fundo para a tabela inteira:

Primeira célulaSegunda célula
Terceira célulaQuarta célula

Para uma única célula, a imagem de fundo é definida da seguinte maneira:

Primeira célulaSegunda célula
Terceira célulaQuarta célula

Recuo HTML

Em HTML, o recuo em uma tabela é definido usando uma tag

:

  • cellpacing - a distância entre as bordas das células vizinhas,
  • cellpading - a distância entre o conteúdo e a borda da célula.

A exibição visual desse código no navegador é a seguinte:

Alinhamento da tabela HTML

Você pode especificar dois parâmetros para cada célula ou linha individual que executa o alinhamento de texto horizontal (alinhamento) e vertical (valor) na tabela HTML.

O parâmetro align pode ter os seguintes valores:

  • esquerda - alinhamento na borda esquerda,
  • direita - alinhamento na borda direita,
  • alinhamento centro - centro.

O parâmetro valign pode ter os seguintes valores:

  • inferior - alinhamento com a borda inferior,
  • topo - alinhamento com o limite superior,
  • meio - alinhamento no meio.

Inserir imagem na tabela HTML

Os webmasters geralmente têm uma pergunta sobre como inserir uma imagem em uma tabela HTML? Para isso, é necessário registrar o endereço ou o nome da imagem na célula apropriada após a marcação

Marcação HTML XHTML - adicionou a segunda linha da tabela com células comuns, mas não de cabeçalho. Linhas e células subsequentes foram inseridas da mesma maneira. - fechou a mesa.

Links úteis:

  • Noções básicas sobre HTML - um tutorial em vídeo gratuito de duas horas sobre conceitos básicos de HTML,
  • Um curso gratuito no layout do site - um exemplo de layout de bloco do zero,
  • O layout do site a partir do zero 2.0 é um curso pago completo.

§ 9. Conclusão

Em HTML, as tabelas, como eu disse no início, são usadas principalmente para o layout da página. Este é o seu principal objetivo. Em cada célula da tabela, você pode inserir outros dados: texto, figuras ou outra tabela. É por isso que eles são tão convenientes para marcar páginas html e dividi-las em blocos separados. Por exemplo, você pode criar uma "composição":

.

  • width - width
  • altura - altura
  • alt - texto alternativo que é exibido no navegador quando a função de exibição de imagem está desativada,
  • title - legenda da imagem,
  • alinhar - alinhamento horizontal,
  • valign - alinhamento vertical.

Além disso, envolvendo a imagem em uma tag especial, ela pode ser usada como um link.

Mesclando células em uma tabela HTML

As células vizinhas em uma única coluna ou linha podem ser combinadas usando os parâmetros row e colspan da tag

.

A união das colunas de uma linha é assim:

Geradores de tabela HTML

Obviamente, você mesmo pode criar tabelas HTML escrevendo manualmente todas as tags HTML. A tabela nesse caso corre o risco de não ser compilada corretamente, pois o fator humano se faz sentir ao trabalhar com grandes volumes de informações.

Geradores de tabelas HTML especiais existem há muito tempo para economizar seu tempo. Com a ajuda deles, você pode criar facilmente uma tabela com várias configurações.

Um dos geradores de tabela mais comuns é o serviço em russo http://rusws.ru/genertabtag. No seu arsenal, existem muitas configurações para a construção de tabelas: você pode definir a cor do fundo, o alinhamento, a largura da tabela, a espessura do quadro etc.

Essa é uma ótima opção para gerar tabelas simples, mas para fins mais sérios, recomendamos o uso de outros serviços:

O mesmo serviço possui um editor de HTML bastante conveniente, no qual você pode criar, preencher uma tabela e obter seu código:

Se você decidir usar os serviços de um gerador de tabelas, deve abordar cuidadosamente a escolha do serviço que mais lhe convém, depois de testar o mais popular deles e escolher o melhor.

Tags e atributos de tabela

Aqui estão os elementos básicos necessários para criar tabelas:

  • - o contêiner no qual a tabela está localizada (o mesmo que para rotulado ou para listas numeradas).
  • fronteira - um atributo que determina a espessura dos quadros. Em vez disso, é melhor usar a propriedade de borda CSS.
  • define a assinatura da tabela. O contêiner não pode ser usado, mas se você ainda decidir chefiar a mesa, coloque-o imediatamente após a tag , células e linhas externas.
  • - uma tag de par contendo uma linha da tabela (células localizadas no mesmo nível horizontalmente).
  • - A tag que cria a célula do cabeçalho da tabela. Externamente, seu conteúdo é diferente do conteúdo de outras células - geralmente o texto dentro O navegador está em negrito e centralizado.
  • - o contêiner com o qual uma célula simples é criada. Quantas tags conterá a string (tag , haverá muitas células nele: uma tag - uma célula.
  • permite agrupar colunas, rapidamente e sem obstruir o código para definir características gerais para elas. Usando o contêiner, você pode separar as partes lógicas da tabela. Ele está localizado após a tag, se não estiver, depois de .
  • usado para a mesma finalidade que. pode conter, mas não vice-versa.
  • extensão - Um atributo que especifica o número de colunas às quais as propriedades do contêiner se aplicam.
  • , e - contêineres que permitem dividir a tabela em partes superior (cabeçalhos), principal (corpo) e inferior (final), respectivamente. Na tabela HTML, a sequência dessas tags é igual à sequência de contêineres e no documento HTML.
  • colspan necessário para combinar células em uma linha. O valor do atributo contém um dígito, que determina o número de células a serem mescladas.
  • rowpan junta células em colunas.

Exemplo de criação de tabela

Crie um documento HTML e copie o seguinte código nele:

No navegador, o documento terá a seguinte aparência:

Vamos descobrir quais linhas de código são responsáveis ​​por quê.

  • - abriu a mesa, perguntando-lhe a espessura das molduras.
  • Ferramentas para criar sites - intitulados.
  • - abriu a linha.
  • Nomeação - criou uma célula com o cabeçalho.
  • Instrumento - criou uma segunda célula de cabeçalho na linha. O parâmetro colspan indicou que essa célula deve ocupar duas na horizontal. - fechou a linha. Da mesma forma, criamos as linhas restantes.
Oh, onde está minha juventude!

E isso é a coisa mais simples que pode ser feita usando tabelas! Criar um site com base no layout tabular é absolutamente possível para qualquer iniciante! Esta lição é prova disso.

Em geral, agora é a hora de experimentos independentes. Como a lição é sobre criando tabelas em HTML terminado. E com isso, minha história sobre o básico do HTML está concluída.

E meya esse conhecimento, comecei a harpa todo este site. Portanto, recomendo que você aplique esse conhecimento na prática. Embora ainda exista uma seção sobre metatags HTML, elas não estão diretamente relacionadas à criação do site. Portanto, consolide o conhecimento desta parte e clique no botão "Avançar".

Compartilhe o link para Seoded.ru com amigos, conhecidos e pessoas com quem você conversa nas redes sociais e fóruns! Marque o site em si! Então vença.

Compartilhe o link para esta página em:

Assista ao vídeo: Curso de HTML e CSS - Criando Tabelas table, th, tr, td - Parte 1 (Outubro 2021).

Pin
Send
Share
Send
Send