Построение таблицы в HTML


С таблицами мы сталкиваемся постоянно (например в 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 применение вложенных таблиц совсем не целесообразно, т.к. для построения макета страницы уже появилось куча других специальных элементов.


Ваш комментарий

Ваш адрес email не будет опубликован.

Для отправки комментария, поставьте отметку, что разрешаете сбор и обработку ваших персональных данных . Политика конфиденциальности