Thead & tbody

Если вы хотите, вы можете оставить свои таблицы, но если вы цените контент с высокой семантической структурой, я рада представить вам <thead> . <thead> структурирует заголовки в вашей таблице, и это говорит браузерам, что, например, каждый столбец содержит. <tbody> структурирует весь контент, так что браузер знает, как выглядит содержимое таблицы. Используя тот же пример, что и раньше, <thead> и <tbody> должны быть использованы следующим образом:

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

Кроме того, я хотела бы представить еще один элемент - <th>. Этот тег, обозначающий заголовок ячейки таблицы, должен использоваться вместо тега <td>, когда содержимое ячейки является заголовком, а не фактическими данными ячейки.

Это означает, что это очевидный выбор внутри <thead> (который должен содержать, например, первую строку вашей таблицы), но вы также можете использовать его для самого первого столбца, чтобы указать заголовки.

Давайте посмотрим на пример - он очень похож на предыдущий, но я использовал содержательный контент, чтобы прояснить вам, как использовать <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>

Как вы, вероятно, заметите, когда сами попробуете примеры, вы не увидите никакой разницы. Это потому, что thead, tbody и заголовки таблиц только добавляют семантическое значение. Но вы всегда можете использовать CSS для стилизации вашей таблицы, и тогда эти элементы действительно упрощают стилизацию!