Таблицы HTML иногда ещё используются для оформления структуры страниц сайта. Мы рассмотрим, как сверстать страницу без таблиц, в промежуточном руководстве по CSS. Правильное назначение таблиц — структурирование табличных данных.
В таблицах используется ряд тегов, и полностью разобраться в том, как они работают, не так-то просто.
Скопируйте следующий код в текст вашего HTML-документа, а затем мы рассмотрим, что делает каждый тег:
<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 определяет ячейку данных. Элементы td должны быть заключены в tr теги, как показано выше.
Если вы представите таблицу размером 3×4, состоящую из 12 ячеек, в ней должно быть четыре tr элемента для определения строк и по три td элемента внутри каждой из строк, итого получается 12 td элементов.
Страницы в тему:
- Следующая страница: Формы
- Предыдущая страница: Изображения
- Таблицы (Продвинутый урок по HTML): немного подробнее, в том числе о том, как объединять ячейки.
- HTML-тег: table
- HTML-тег: tr
- HTML-тег: td
Примеры CSS