Основы таблиц

Таблицы HTML следует использовать только для визуализации данных, которые естественно принадлежат сетке. Я говорю это, поскольку таблицы ранее использовались для макета страниц HTML, и это никогда не было идеей. Многие веб-дизайнеры использовали таблицы для разметки, но есть две основные причины не делать этого:

• Это семантически неверно
• Таблицы менее гибкие, чем, например, div's (и другие семантические элементы)

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

Когда вы структурируете таблицы, разметка HTML в основном структурируется строками и ячейками (обратите внимание, что для столбцов нет тегов, только строки).

Тег для строк - <tr> (сокращение для table row), а тег для каждой ячейки - <td> (что означает данные таблицы,там также находиться фактический контент.

Прежде чем вы начнете писать свою разметку для таблицы, вы должны точно знать, как она должна выглядеть - это облегчит вам задачу. Давайте попробуем создать действительно простую таблицу - с тремя столбцами и четырьмя строками.

<table border="1" width="100%">
	<tr>
			<td>Row 1, cell 1</td>
			<td>Row 1, cell 2</td>
			<td>Row 2, cell 3</td>
		</tr>
		<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>
</table>

Как вы могли заметить тэги <td> собраны внутри тэга <tr>, это означает, что каждая ячейка в ряду должна быть внутри элемента <tr>.

Обратите внимание!

И обратите внимание, что я добавила границу в таблицу <table>, чтобы вы могли фактически видеть границы таблиц, когда вы пробуете примеры, но вы никогда не должны делать этого, когда пишете свою разметку - граница таблицы - это работа для CSS!