Início » Tutoriais » Tutorial HTML

Tabelas no HTML

Exemplo de tabela no HTML

Nome Sobrenome Pontos
Jill Ferreiro 50
Eva Jackson 94
Luíz Corça 80
Adão Johnson 67

Tabelas HTML

As tabelas são definidas com a tag <table>.

A tabela está dividida em linhas com o <tr> tag. (tr — table raw—, significa linha da tabela)

A linha é dividida em células de dados com o <td> tag. (td — table data —,  significa dados da tabela)

A linha também pode ser dividido em assinatura com o <th> tag. (th — table head — significa cabeçalho da tabela)

Os elementos <td> são os recipientes de dados na tabela.

Os elementos <td> pode conter todos os tipos de elementos HTML, como texto, imagens, listas, outras tabelas, etc

A largura da tabela pode ser definida usando o CSS.

<table style="width:300px">
<tr>
  <td>Jill</td>
  <td>Smith</td> 
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
  <td>94</td>
</tr>
</table>

Uma tabela HTML com um atributo border

Se você não especificar uma borda para a tabela, ele será exibido sem borda.

A borda pode ser adicionado usando o atributo boder:

<table border="1" style="width:300px">
<tr>
  <td>Jill</td>
  <td>Smith</td> 
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
  <td>94</td>
</tr>
</table>

Nota: Usar o atributo border em uma tabela é obsoleto, hoje se usa o CSS.

<style>
table,th,td{
 border:1px solid black;
}
</style>

Lembre-se de definir as bordas, tanto para a tabela e as células da tabela.


Uma tabela HTML com bordas collapsado

Se você quer que as fronteiras a entrar em colapso em uma beira, adicione border-collapse ao seu CSS:

<style>
table,th,td{
 border:1px solid black;
 border-collapse:collapse
}
</style>

Uma tabela HTML com Preenchimento da célula

Enchimento da célula especifica o espaço entre o conteúdo da célula e de suas fronteiras.

Se você não especificar um preenchimento, as células da tabela será exibida sem estofamento.

Para definir o preenchimento, use a propriedade preenchimento CSS:

th,td{
 padding:15px;
}

Cabeçalhos da tabela HTML

O cabeçalho da tabela são definidas com a tag <th>.

Por padrão, todos os principais navegadores exibir títulos da tabela como negrito e centralizado:

<table style="width:300px">
<tr>
  <th>Firstname</th>
  <th>Lastname</th> 
  <th>Points</th>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td> 
  <td>94</td>
</tr>
</table>

Para alinhar à esquerda os títulos da tabela, use a propriedade text-align CSS:

th{
 text-align:left;
}

Uma tabela HTML com espaçamento entre as células

O espaçamento da célula especifica o espaço entre as células.

Para definir o espaçamento de célula para a tabela, use a propriedade CSS border-spacing :

table{
 border-spacing:5px;
}

Tags da tabela HTML

Tag Descrição
<table> Define uma tabela
<th> Define uma linha de cabeçalho na tabela
<tr> Define uma linha na tabela
<td> Define uma célula na tabela
<caption> Define um subtítulo da tabela
<colgroup> Especifica um grupo de uma ou mais colunas de uma tabela para a formatação
<col> Especifica as propriedades da coluna para cada coluna dentro de um elemento <colgroup>
<thead> Grupos do conteúdo do cabeçalho de uma tabela
<tbody> Grupos do conteúdo do corpo de uma tabela
<tfoot> Grupos do conteúdo do rodapé de uma tabela

 

Em caso de dúvida, você pode tirar nos comentários.

Categoria: Tutorial HTML | Adicionado por : ShZlot (14-07-2014)
Visualizações: 864 | Ranking: 1.0/1
Total de comentários: 0
avatar