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