Многие вебсайты по всему Интернету используют таблицы HTML для верстки веб-страниц, иногда при этом злоупотребляя этой возможностью. В учебнике по языку CSS мы поговорим о том, как можно сверстать веб-страницу без таблиц. Единственный способ корректного использования таблиц – это то, для чего они и предназначены, а именно для отображения табличных данных.
Существует достаточно много тегов, используемых для создания HTML таблиц, и полностью понять, как они работают, вероятно, является самой трудной задачей в этом учебнике для начинающих.
Скопируйте следующий код в тело (элемент <body>) ранее созданной вами веб-страницы, а затем мы рассмотрим, какая роль у каждого тега таблицы:
<table>
<tr>
<td>Строка 1, ячейка 1</td>
<td>Строка 1, ячейка 2</td>
<td>Строка 1, ячейка 3</td>
</tr>
<tr>
<td>Строка 2, ячейка 1</td>
<td>Строка 2, ячейка 2</td>
<td>Строка 2, ячейка 3</td>
</tr>
<tr>
<td>Строка 3, ячейка 1</td>
<td>Строка 3, ячейка 2</td>
<td>Строка 3, ячейка 3</td>
</tr>
<tr>
<td>Строка 4, ячейка 1</td>
<td>Строка 4, ячейка 2</td>
<td>Строка 4, ячейка 3</td>
</tr>
</table>
Элемент <table> создает таблицу.
Элемент <tr> создает строку таблицы.
Элемент <td> создает ячейку данных. Этот тег должен находится внутри элемента <tr>, как показано в примере.
Если вам нужна таблица 3x4, т.е. состоящая из 12 ячеек, то у вас внутри элемента <table> должно быть четыре элемента <tr>, определяющие строки, и три элемента <td> внутри каждого элемента строк, что в сумме и даст 12 элементов <td>.
И вот что мы получаем на данный момент:
