С таблицами мы сталкиваемся постоянно (например в excel). В чем особенность таблицы? Откроем программу excel и посмотрим. Каждый элемент таблицы связан с другими. Если я хочу изменить ширину этого элемента, я вынужден менять ширину связанных с ним в этом столбце других элементов. Так же и высота: если я поменяю высоту в одном элементе, она изменится в других элементах этой строки. Т.е. нельзя изменить размеры отдельно одного элемента. Данная структура в силу такой зависимости несколько сложна.
Сама таблица формируется с помощью элемента ‘table’. Это блочный элемент. Таблица формируется построчно при помощи элементов ‘tr’ (сколько будет строк в таблице, столько будет этих элементов). Внутри строк обычно лежит одинаковое количество ячеек. Ячейки талицы формиируются элементами ‘td’ и ‘th’. Количество столбцов определяет количество ячеек ‘td’. А содержание таблицы находится между тегами ячейки (внутри ячейки).
Пример простой таблицы:
<table> <tr> <!-- Первая строка --> <td>(1,1)</td> <!-- Первая ячейка --> <td>(1,2)</td> <!-- Вторая ячейка --> </tr> <tr> <!-- Вторая строка --> <td>(2,1)</td> <!-- Первая ячейка --> <td>(2,2)</td> <!-- Вторая ячейка --> </tr> <tr> <!-- Третья строка --> <td>(3,1)</td> <!-- Первая ячейка --> <td>(3,2)</td> <!-- Вторая ячейка --> </tr> </table>
У таблицы может быть единственный элемент (может не быть вообще) ‘caption’. Это заголовок таблицы. Его нужно прописывать в коде таблицы самым первым. Заголовок можно вывести над и под таблицей (атрибут align=top | bottom).
Содержание статьи
Атрибуты элемента TABLE
- border — рамка вокруг таблицы и вокруг ячеек.
- cellspacing — пространство внутри ячеек (двигает границы ячейки).
- cellpadding — отодвигает содержимое ячейки от границ (внутренний отступ).
- width — ширина таблицы (в пикселях или процентах).
- bgcolor — фоновый цвет (bgcolor=”#ffffcc”).
- align — выравнивание таблицы: слева — центр — вправо (align=”left”| center | right”). Если выравнивать по левому или правому краю, то текст начинает обтекать эту таблицу, поэтому такое выравнивание не рекомендуется.
- background — фоновое изображение в таблице (указывается нужный файл).
- bordercolor — цвет рамки вокруг таблицы.
Атрибуты элемента TR
- bgcolor — фоновый цвет ячеек в этой строке.
- align — выравнивание текста в ячейках этой строки по горизонтали (align=”left | center | right”).
- valign — выравнивание контента ячеек данной строки по высоте: сверху, снизу, выравнивание по базовой линии, посередине(valign=”top | bottom | baseline | middle”).
- bordercolor — цвет границ данной строки.
Атрибуты элемента TD (TH)
- bgcolor — фоновый цвет ячейки.
- align — выравнивание текста в ячейке по горизонтали (align=”left | center | right”).
- valign — выравнивание контента ячейки по высоте: сверху, снизу, выравнивание по базовой линии, посередине(valign=”top | bottom | baseline | middle”).
- width — ширина ячейки в пикселях или процентах.
- background — фоновое изображение в ячейке (выбираем нужный файл).
- bordercolor — цвет границ ячейки.
- nowrap — пробельные символы внутри ячейки сокращаются, но по ним не производится автоматического переноса (при уменьшении размеров окна браузера).
- colspan — сколько столбцов охватывает ячейка.
- rowspan — сколько строк охватывает ячейка.
Вложенные таблицы
Раньше ситуация, когда одна таблица вложена в другую таблицу была общераспространенной. Сейчас для этого используют CSS (таблицы стилей). Пример вложенной таблицы:
<table border=1 cellspacing=0> <tr> <td> <table border=0 cellspacing="3" width="100%"> <tr> <td bgcolor="black"><font color="white">Ссылка1</font></td> <td bgcolor="black"><font color="white">Ссылка2</font></td> <td bgcolor="black"><font color="white">Ссылка3</font></td> </tr> </table> </td> </tr> <tr> <td>Содержимое ячейки</td> </tr> </table>
С появлением HTML 5 и развитием CSS применение вложенных таблиц совсем не целесообразно, т.к. для построения макета страницы уже появилось куча других специальных элементов.
