Таблицы

Таблицей называется информация, разделенная для хранения на столбцы и строки.

При размещении на web-странице таблица не всегда должна иметь линии границ. При помощи таблиц также можно оформлять колонки текстов или чисел. Таким образом, таблицы можно рассматривать как инструмент для формирования каркаса сайта – это один из способов деления пространства окна браузера на зоны для размещения информации. Очевидно, что в этом случае обрамление ячеек линиями границ может и не применяться

Терминология

Ячейка – минимальный элемент таблицы.

Строка – несколько ячеек, примыкающих друг к другу слева или справа.

Столбец – несколько ячеек, примыкающих друг к другу сверху или снизу.

Внешняя линия границы – линия контура вокруг всех ячеек.

Внутренняя линия границы – разделитель двух ячеек или линия контура вокруг ячейки таблицы

Шапка таблицы – первая строка таблицы, содержащая заголовки столбцов.

Заголовок таблицы – текст с названием таблицы.

Правила оформления таблиц

Как таковых жестких правил нет. Но в тоже время следует придерживаться рекомендаций по оформлению таблиц.

  1. Текст «шапки» принято оформлять жирным шрифтом.

Если нужно, можно применять более узкий шрифт – Arial Narrow (font face).

  1. Текст содержания таблицы следует оформлять обычным начертанием.
  2. Текстовую информацию ячеек обычно выравнивают по ширине или по левому краю, финансовую цифровую информацию – по правому краю, прочую численную (например, количество или даты рождения) – по центру.
  3. Текст заголовка принято оформлять жирным шрифтом.
  4. Линии внешних границ таблицы могут быть большей толщины, чем линии внутренних границ.

Оформление таблиц в HTML

Особенности оформления:

  1. Ячейки одной строки не могут иметь разную высоту
  2. Пустые ячейки отображаются некорректно, поэтому в ячейке должно быть хотя бы  
  3. По умолчанию: у таблицы нет рамки (border= «0») и вертикальное выравнивание текста по центру ячейки (valign= «middle»).
  4. Информация не может не уместиться в таблице – браузер автоматически подбирает размеры ячеек таблицы по ее содержимому.
  5. Таблицу можно поместить внутрь ячейки другой таблицы.
  6. Внутри таблицы не действует форматирование, заданное снаружи.
  7. Заголовок таблицы рассматривается как её составная часть.

Для оформления применяется структурный (блочный или контейнерный) парный тег <TABLE>, содержанием которого являются парные теги <CAPTION> и <TR>, последний также является структурным, содержанием которого являются парные теги <TD>, <TH>

<TABLE> – определяет оформление таблицы

<CAPTION> – определяет размещение и горизонтальное выравнивание заголовка таблицы.

<TR> – (структурный) определяет оформление строки таблицы

<TD> – определяет оформление ячейки таблицы

<TH> – определяет оформление ячейки «шапки» таблицы

Ячейки таблицы могут иметь любое содержание: текст, изображение, список и т.п.

Атрибуты тега <TABLE>

  • ALIGN = «left | center | right» — горизонтальное положение таблицы относительно текста
  • BACKGROUND = «адрес» — изображение, которое будет фоном таблицы.
  • BGCOLOR = «name | #RRGGBB | RGB(R,G,B)» — цвет фона таблицы.
  • BORDER = «N» — толщина рамки вокруг таблицы в пикселях.
  • BORDERCOLOR = «name | #RRGGBB | RGB(R,G,B)» — цвет рамки.
  • CELLPADDING = «N» — «поля» внутри ячейки.
  • CELLSPACING = «N» — расстояние между ячейками.
  • COLS = «N» — количество столбцов в таблице (ускоряет отображение таблицы на странице).
  • SUMMARY = «комментарий»— комментарий о содержании таблицы для поисковых систем.
  • HEIGHT = «N | N%» — высота таблицы в пикселях или относительно размеров окна браузера.
  • WIDTH = «N | N%» — ширина таблицы в пикселях или относительно размеров окна браузера.

Атрибуты тега <TR>

  • ALIGN = «left | center | right | justify» — горизонтальное выравнивание текста в строке
  • VALIGN = «top | middle | bottom» — вертикальное выравнивание текста в строке
  • BGCOLOR = «name | #RRGGBB | RGB(R,G,B)» — цвет фона строки.
  • BORDERCOLOR = «name | #RRGGBB | RGB(R,G,B)» — цвет рамки для ячеек строки.

Атрибуты тегов <TH> и <TD>

  • ALIGN = «left | center | right» — горизонтальное выравнивание текста в ячейке
  • VALIGN = «top | middle | bottom» — вертикальное выравнивание текста в ячейке
  • BACKGROUND = «адрес» — изображение, которое будет фоном ячейки.
  • BGCOLOR = «name | #RRGGBB | RGB(R,G,B)» — цвет фона ячейки.
  • BORDERCOLOR = «name | #RRGGBB | RGB(R,G,B)» — цвет рамки для ячейки.
  • Colspan = «N»(N>1) — количество объединяемых ячеек по горизонтали (столбцов).
  • rowspan = «N»(N>1) — количество объединяемых ячеек по вертикали (строк).
  • nowrap — «запрет» переноса строки внутри ячейки.
  • HEIGHT = «N | N%» — высота ячейки в пикселях или относительно размеров окна браузера.
  • WIDTH = «N | N%» — ширина ячейки в пикселях или относительно размеров окна браузера
    (по умолчанию определяется по ширине содержимого).

Атрибуты тега <CAPTION>

  • ALIGN = «left | center | right | top | bottom» — выравнивание заголовка
  • «left | center | right» – заголовок выравнивается по горизонтали над таблицей
  • «top» – заголовок размещается над таблицей и выравнивается по центру ее ширины
  • «bottom» – заголовок размещается под таблицей и выравнивается по центру ее ширины
  • VALIGN = «top | bottom» – вертикальное расположение заголовка по отношению к таблице

Объединение ячеек таблицы

Осуществляется при помощи атрибутов Colspan и rowspan

ПРИМЕР

Пример таблицы с объединениями ячеек по вертикали и горизонтали, а также назначение вариантов выравнивания текста. Числа помогут правильно определить номер строки и ячейки в строке – важно при назначении объединения ячеек. Для оформления жирным шрифтом боковой «шапки» таблицы жирное начертание текста назначается в каждой ячейке – обратите внимание.

<html>

<head>

<title>Пример оформления таблицы</title>

</head>

<body alink=”#FF0000″ link =”#0000FF” vlink =”#9900FF”>

<basefont face=”Arial Narrow”>

<p> На этой странице приведен пример оформления таблицы с вариантами объединения ячеек по вертикали и по горизонтали, а также способами назначения выравнивания текста в ячейках таблицы.</p>

<table width=”88%” height=”50″ border=”3″ cellspacing=”0″ bordercolor=#0000FF>

<caption><h2>Назначение объединения и выравнивания ячеек таблицы(заголовок)</h2></caption>

<tr>

<th colspan=”2″ rowspan=”2″>1.1 Выравнивание</th>

<th colspan=”3″ align=”center”>1.2 текста по горизонтали</th>

</tr>

<tr>

<th align =”left”           width=”16%”>2.1 слева</th>

<th align =”center”     width=”16%”>2.2 по центру</th>

<th align =”right”        width=”16%”>2.3 справа</th>

</tr>

<tr>

<td rowspan=”3″        width=”12%” align =”center”> <b> 3.1 текста по вертикали </b> </td>

<td valign = “top”        width=”16%”  height=”50″> <b> 3.2 сверху </b> </td>

<td align =”left”           valign = “top” width=”16%” >3.3 слева сверху</td>

<td align =”center”     valign = “top” width=”16%” >3.4 по центру сверху</td>

<td align =”right”        valign = “top” width=”16%” >3.5 справа сверху</td>

</tr>

<tr>

<td valign = “middle”  width=”16%”  height=”50″> <b> 4.1 по середине </b> </td>

<td align =”left”           valign = “middle” width=”16%” >4.2 слева по середине</td>

<td align =”center”     valign = “middle” width=”16%” >4.3 по центру по середине</td>

<td align =”right”        valign = “middle” width=”16%” >4.4 справа по середине</td>

</tr>

<tr>

<td valign = “bottom”  width=”16%” height=”50″ > <b> 5.1 снизу </b> </td>

<td align =”left”           valign = “bottom” width=”16%” >5.2 слева снизу</td>

<td align =”center”     valign = “bottom” width=”16%” >5.3 по центру снизу</td>

<td align =”right”        valign = “bottom” width=”16%” >5.4 справа снизу</td>

</tr>

<caption valign=”bottom”>Вывод: эта таблица – учебный пример (подпись таблицы)</caption>

</table>

<p>Числа в ячейках помогут определить номер строки и ячейки в строке – это важно при назначении объединения ячеек</p>

</body>

</html>

Без комментариев.

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