Thead & tbody

Ha akarod akár, így hagyhatód a tábládat, de szeretnéd a tartalmat nagyra értékelni ami nagyon szemantikusan van felépítve szívesen bemutatom neked a <thead> elemet. A <thead> elem építi fel a táblád fejlécét és ez mondja meg a böngészőnek mit tartalmaz pl. egyes oszlopok. A <tbody> elem építi fel az összes tartalmát, így a böngésző tudja mi a valós tartalma a tábláknak. Használni ugyan ezt a példát mint az előtt, a <thead> és a <tbody;> elemek amelyeket így használnak:

<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>

Additionally, there is one more element I would like to introduce to you – the <th> element. This tag, which stands for table cell heading, is to be used instead of the <td> element when the content of the cell is a heading instead of actual cell data.

This means that it is the obvious choice inside the <thead> element (which should contain e.g. the first row of your table) but you can also use it for the very first column to indicate the headings - table row headers.

Let’s look at an example – it is very similar to the previous but I have used meaningful content to make clear to you how to use the <th> element.

<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>

As you probably notice when you try out the examples yourself, you cannot see any difference. This is because the thead, tbody, and the tableheadings only add semmantic value. But you can always use CSS to style your table and then these elements actually make the styling easier!