Тег TABLE. Создание HTML-таблицы

Довольно часто возникает необходимость добавить на сайт одну или несколько таблиц с данными. Конечно, можно нарисовать таблицу в графическом редакторе и вставить на страницу лишь изображение. Однако, гораздо более гибкий вариантиспользование 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. Он может обладать множеством разных атрибутов. Ниже перечислим некоторые из них.

  1. align. Задается тип выравнивания во всех ячейках таблицы (лево, право, центр).
  2. cols. Задается число колонок (может высчитываться, исходя из количества элементов td, но явное указание немного ускоряет построение таблицы).
  3. background. Указывается URLадрес фоновой картинки.
  4. width. Указывается ширина таблицы в пикселях или процентах от ширины родительского HTMLэлемента.
  5.  border. Задается толщина бордера (границы) таблицы.
  6. cellpadding и cellspacing. Это внутренние отступы в каждой ячейке и расстояние между ячейками соответственно.
  7. rules. Здесь указываются параметры отображения границ между ячейками (вокруг всех ячеек, вокруг групп thead / tbody / tfoot, вокруг колонок и т.д.).

Элемент td (отдельная ячейка таблицы) обладает почти теми же атрибутами. Тут тоже есть align, background, width и т.д. Кроме того, появляется несколько новых атрибутов. rowspan позволяет склеить несколько ячеек по горизонтали (в одной строке). Число в значении этого атрибутаэто и есть количество объединяемых ячеек. colspan делает то же самое, только по вертикали (объединяет несколько ячеек в одной колонке). Атрибут valign позволяет применять к ячейке вертикальное выравнивание (верхний край, нижний край, центр).

Добавить комментарий

Ваш e-mail не будет опубликован.