Thead & tbody

Se você quiser, você pode deixar suas tabelas assim, mas se você gosta de conteúdos altamente semânticos e estruturados, Tenho o prazer de lhes apresentar ao elemento THEAD. O elemento THEAD estrutura o cabeçalho na sua tabela e diz ao seu navegador quais e.g. cada coluna contém. O elemento TBODY estrutura todo o conteúdo da tabela, para que assim o navegador qual exatamente é o conteúdo da tabela. Usando o mesmo exemplo de antes, os elementos THEAD e TBODY são usados da seguinte maneira:

<table border="1" width="100%">
	<thead>
		<tr>
			<td>Row 1, cell 1</td>
			<td>Row 1, cell 2</td>
			<td>Row 2, cell 3</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Row 2, cell 1</td>
			<td>Row 2, cell 2</td>
			<td>Row 2, cell 3</td>
		</tr>
		<tr>
			<td>Row 3, cell 1</td>
			<td>Row 3, cell 2</td>
			<td>Row 3, cell 3</td>
		</tr>
		<tr>
			<td>Row 4, cell 1</td>
			<td>Row 4, cell 2</td>
			<td>Row 4, cell 3</td>
		</tr>
	</tbody>
</table>

Além disso, existe mais um elemento que eu gostaria de lhes apresentar - o elemento "TH" . Esta Tag, cujas siglas significam Table cell Heading (Célula de cabeçalho da tabela) é para ser usado ao invés de "TD"quando o conteúdo da célula é um cabeçalho, ao invés de dados.

Isso significa que ela é a escolha ideia dentro do <thead> (que deveria conter, por exemplo, a primeira linha da sua tabela) mas você também pode usá-la na primeira coluna para indicar os cabeçalhos - cabeçalhos de linha da tabela.

Vamos dar uma olhada em um exemplo - é muito semelhante ao anterior mas eu usei conteúdo significativo para deixar mais claro como você pode usar a tag <th>

<table border="1" width="100%">
	<thead>
		<tr>
			<th>Fruits</th>
			<th>Vitamin A</th>
			<th>Vitamin C</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Apples</th>
			<td>98 ui</td>
			<td>8.4 mg</td>
		</tr>
		<tr>
			<th>Oranges</th>
			<td>295 ui</td>
			<td>69.7 mg</td>
		</tr>
		<tr>
			<th>Bananas</th>
			<td>76 ui</td>
			<td>10.3 mg</td>
		</tr>
	</tbody>
</table>

Como você deve ter notado, quando você mesmo experimenta os exemplos, não há nenhuma diferença. Isso se dá porque Thead, Tbody e os cabeçalhos da tabela adicionam apenas valor semântico. Entretanto, você sempre pode usar o CSS para estilizar sua tabela, o que tornam a estilização muito mais fácil!