Довольно часто возникает необходимость добавить на сайт одну или несколько таблиц с данными. Конечно, можно нарисовать таблицу в графическом редакторе и вставить на страницу лишь изображение. Однако, гораздо более гибкий вариант – использование HTML—тега table. Это позволяет вам динамически менять внешний вид таблицы (через CSS)и ее содержимое (посредством PHP или JS).
Сам по себе тег table создает пустую таблицу без колонок и строк. Дабы в ней появились эти самые колонки и строки, необходимо добавить внутрь table другие теги, а именно – tr и td. Тег tr позволяет сформировать отдельную пустую строку таблицы (без ячеек), а td – отдельную ячейку внутри текущей строки. Количество элементов td определит количество колонок в строке. Если в разных строках количество td отличается друг от друга, то таблица может перекоситься. Вот пример кода простой таблицы, состоящей из одной строки и двух ячеек в ней:
При создании таблиц могут использоваться такие необязательные элементы, как thead, tbody, а также tfoot. Первый элемент thead заключает в себе одну или несколько строк (tr), которые будут располагаться вверху таблицы (первые строки). tbody может заключать в себя строки, располагающиеся в средней части таблицы. tfoot может заключать в себя строки, располагающиеся в нижней части таблицы (в коде данный блок всегда должен идти сразу после thead). tbody может присутствовать внутри таблицы сразу в нескольких экземплярах. Что касается thead и tfoot, то их максимальное количество равно 1.
Вернемся к основному тегу table. Он может обладать множеством разных атрибутов. Ниже перечислим некоторые из них.
- align. Задается тип выравнивания во всех ячейках таблицы (лево, право, центр).
- cols. Задается число колонок (может высчитываться, исходя из количества элементов td, но явное указание немного ускоряет построение таблицы).
- background. Указывается URL—адрес фоновой картинки.
- width. Указывается ширина таблицы в пикселях или процентах от ширины родительского HTML—элемента.
- border. Задается толщина бордера (границы) таблицы.
- cellpadding и cellspacing. Это внутренние отступы в каждой ячейке и расстояние между ячейками соответственно.
- rules. Здесь указываются параметры отображения границ между ячейками (вокруг всех ячеек, вокруг групп thead / tbody / tfoot, вокруг колонок и т.д.).
Элемент td (отдельная ячейка таблицы) обладает почти теми же атрибутами. Тут тоже есть align, background, width и т.д. Кроме того, появляется несколько новых атрибутов.
rowspan позволяет склеить несколько ячеек по горизонтали (в одной строке). Число в значении этого атрибута – это и есть количество объединяемых ячеек.
colspan делает то же самое, только по вертикали (объединяет несколько ячеек в одной колонке).
valign позволяет применять к ячейке вертикальное выравнивание (верхний край, нижний край, центр).
