Создание и оформление таблиц. HTML + CSS 


Создание и оформление таблиц. HTML + CSS

Опубликовано

В недавнем прошлом популярность таблиц была невероятно высока, они использовались не только для представления табличных данных, но также были основным средством для формирования структуры документа (не смотря на ряд недостатков). В настоящее время для верстки документа все больше используют блочный элемент DIV.

Таблица же остается основным элементом языка HTML, которая незаменима для создания сложных конструкций, для представления табличных данных, где блочные элементы бессильны, и не обладают такой вариативностью.

 

Основа таблицы

Таблица является сложной конструкцией, и формируется из нескольких HTML тегов. На первом этапе она строится из блочного элемента <TABLE></TABLE>, который представляет фундамент, основу таблицы. Следующий этап в построении - строки таблицы, которые формируются с помощью парных тегов <TR></TR>:

<TABLE>
  <TR>
  </TR>
  <TR>
  </TR>
</TABLE>

Заключительный этап построения таблицы является создание ячеек. Для этой цели есть две категории тегов:

  • <TH></TH> - парный тег создает ячейку, которая служит заголовком столбца, данный тег является не обязательным;
  • <TD></TD> - обязательный парный тег создает ячейки - основу таблицы;

 

<TABLE>
  <TR>
    <TH>Заголовок 1</TH>
    <TH>Заголовок 2</TH>
    <TH>Заголовок 3</TH>
    <TH>Заголовок 4</TH>
    <TH>Заголовок 5</TH>
  </TR>
  <TR>
    <TD>Ячейка 1,1</TD>
    <TD> Ячейка 1,2</TD>
    <TD> Ячейка 1,3</TD>
    <TD> Ячейка 1,4</TD>
    <TD> Ячейка 1,5</TD>
  </TR>
  <TR>
    <TD> Ячейка 2,1</TD>
    <TD> Ячейка 2,2</TD>
    <TD> Ячейка 2,3</TD>
    <TD> Ячейка 2,4</TD>
    <TD> Ячейка 2,5</TD>
  </TR>
  <TR>
    <TD>Итог 1</TD>
    <TD>Итог 2</TD>
    <TD>Итог 3</TD>
    <TD>Итог 4</TD>
    <TD>Итог 5</TD>
  </TR>
</TABLE>

 Таблица

Рис 1. Таблица

Как видно из кода расположенного выше, таблица содержит четыре строки (<TR>) и пять столбцов. Ячейки первой строки - заголовки столбцов (<TH>). Со второй строки по четвертую ячейки содержат основные данные таблицы(<TD>). Теги <TH>, <TD> универсальны, и могут содержать в себе не только обычный текст, но и всевозможные теги, вплоть до других таблиц!

Обратите внимание на структуру таблицы, она имеет строго вложенную иерархическую структуру, если ее нарушить и переставить теги в ином порядке, таблица, либо не отобразится на странице, либо отобразится, но не корректно. Основные правила при конструировании таблицы:

  • Парный тег <TABLE> основа таблицы, все остальные теги вложены в него;
  • Парный тег <TR> второй уровень таблицы или ее строка, должен быть вложен в тег <TABLE>;
  • Парные теги <TH> и <TD> третий уровень таблицы или ее ячейки, должны быть вложены в тег <TR> и содержат табличные данные;
  • Если поместить любой другой тег или текст вне парного тега <TD>, то эти данные будут проигнорированы и никак не отобразится на веб-странице;

 

Заголовок таблицы

В таблице предусмотрена возможность добавления заголовка, с помощью парного тега <CAPTION>, который размещается вслед за тегом <TABLE>. В принципе его можно вставить в любое место таблицы, это не является ошибкой. По умолчанию текст заголовка выводится над таблицей.

<TABLE>
<CAPTION>Заголовок Таблицы</CAPTION>
  <TR>
    <TH>Заголовок 1</TH>
    <TH>Заголовок 2</TH>
    <TH>Заголовок 3</TH>
    <TH>Заголовок 4</TH>
    <TH>Заголовок 5</TH>
  </TR>
  <TR>
    <TD>Ячейка 1,1</TD>
    <TD> Ячейка 1,2</TD>
    <TD> Ячейка 1,3</TD>
    <TD> Ячейка 1,4</TD>
    <TD> Ячейка 1,5</TD>
  </TR>
  <TR>
    <TD> Ячейка 2,1</TD>
    <TD> Ячейка 2,2</TD>
    <TD> Ячейка 2,3</TD>
    <TD> Ячейка 2,4</TD>
    <TD> Ячейка 2,5</TD>
  </TR>
  <TR>
    <TD>Итог 1</TD>
    <TD>Итог 2</TD>
    <TD>Итог 3</TD>
    <TD>Итог 4</TD>
    <TD>Итог 5</TD>
  </TR>
</TABLE>
 Таблица с заголовком.

Рис. 2. Таблица с заголовком.

 

Секции таблицы

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

  • <THEAD> - Секция заголовков столбцов;
  • <TBODY> - Секция основы таблицы;
  • <TFOOT> - Секция итоговых данных, резюмирующая всю таблицу;

<THEAD>, <TBODY>, <TFOOT>, помещаются внутрь таблицы <TABLE>, и должны содержать теги <TR>:

<TABLE>
<CAPTION>Заголовок Таблицы</CAPTION>
<THEAD>
  <TR>
    <TH>Заголовок 1</TH>
    <TH>Заголовок 2</TH>
    <TH>Заголовок 3</TH>
    <TH>Заголовок 4</TH>
    <TH>Заголовок 5</TH>
  </TR>
</THEAD>
<TBODY>
  <TR>
    <TD>Ячейка 1,1</TD>
    <TD> Ячейка 1,2</TD>
    <TD> Ячейка 1,3</TD>
    <TD> Ячейка 1,4</TD>
    <TD> Ячейка 1,5</TD>
  </TR>
  <TR>
    <TD> Ячейка 2,1</TD>
    <TD> Ячейка 2,2</TD>
    <TD> Ячейка 2,3</TD>
    <TD> Ячейка 2,4</TD>
    <TD> Ячейка 2,5</TD>
  </TR>
</TBODY>
<TFOOT>
  <TR>
    <TD>Итог 1</TD>
    <TD>Итог 2</TD>
    <TD>Итог 3</TD>
    <TD>Итог 4</TD>
    <TD>Итог 5</TD>
  </TR>
</TFOOT>
</TABLE>

 

Объединение ячеек

Выше была рассмотрена таблица с простой структурой, а что если необходимо ее усложнить, к примеру, объединить несколько ячеек в одну. Для этого случая существуют специальные атрибуты COLSPAN и ROWSPAN тегов <TD> и <TH>. Первый служит для объединения по горизонтали, второй по вертикали. Значением для атрибута случит число объединяемых ячеек:

 

1. Для объединения по горизонтали первых четырех ячеек последней строки таблицы, необходимо атрибуту COLSPAN тега <TD> (в котором содержится текст “Итог 1”) присвоить значение 4:

<TD COLSPAN="4">Итог (1+2+3+4)</TD>

2. Для объединения ячеек по вертикали основной части документа (часть <TBODY>), воспользуйтесь атрибутом ROWSPAN со значением 2:

<TD ROWSPAN="2">Ячейка (1,1+2,1)</TD>
<TD ROWSPAN="2">Ячейка (1,2+2,2)</TD>
<TD ROWSPAN="2">Ячейка (1,3+2,3)</TD>
<TD ROWSPAN="2">Ячейка (1,4+2,4)</TD>

 

Обратите внимание, если объединять ячейки атрибутами COLSPAN или ROWSPAN, необходимо убрать из кода объединенные ячейки,  кроме той с которой начинается объединение, их количество будет зависеть от значения атрибута COLSPAN, ROWSPAN.

То есть, в примере 1, объединяются четыре ячейки, начиная с первой, которой назначается атрибут COLSPAN=4 (т.к. с нее начинается объединения), остальные три необходимо удалить (т.к. они считаются объединенными). В коде останется только пятая ячейка (т.к. она не входит в объединение).

По такому же принципу будет объединение по вертикали. Во втором примере, первым четырем ячейкам строки присваивается атрибут ROWSPAN=2, в результате первые четыре нижние ячейки убираются из кода, т.к. они считаются объединенными. Кроме последней, которая не входит в объединение.

<TABLE>
<CAPTION>Заголовок Таблицы</CAPTION>
<THEAD>
  <TR>
    <TH>Заголовок 1</TH>
    <TH>Заголовок 2</TH>
    <TH>Заголовок 3</TH>
    <TH>Заголовок 4</TH>
    <TH>Заголовок 5</TH>
  </TR></THEAD>
<TBODY>
  <TR>
    <TD ROWSPAN="2">Ячейка (1,1+2,1)</TD>
    <TD ROWSPAN="2">Ячейка (1,2+2,2)</TD>
    <TD ROWSPAN="2">Ячейка (1,3+2,3)</TD>
    <TD ROWSPAN="2">Ячейка (1,4+2,4)</TD>
    <TD>Ячейка 1,5</TD>
  </TR>
  <TR>
    <TD>Ячейка 2,5</TD>
  </TR> 
</TBODY>
<TFOOT>
  <TR>
    <TD COLSPAN=”4”>Итог 1+ Итог 2+ Итог 3+ Итог 4</TD>
    <TD>Итог 5</TD>
  </TR>
</TFOOT>
</TABLE>

 Объединение ячеек таблицы с помощью атрибутов COLSPAN, ROWSPAN

Рис. 4. Объединение ячеек таблицы с помощью атрибутов COLSPAN, ROWSPAN.

 

Оформление таблиц CSS свойствами

После создания таблицы средствами HTML, переходим к следующему этапу, оформление таблицы с помощью стилей CSS, которые применим к тегам <TABLE>, <TH>,<TD>, <CAPTION>.

 

Рамки для ячеек

Рамку вокруг ячеек можно рисовать с помощью CSS свойства border, со следующим синтаксисом:

border: “толщина линии” “тип начертания” “цвет”;

  • толщина линии – может задаваться в пикселях (px), а также с помощью специальных зарезервированных слов: thin (2 px), medium (4 px) и thick (6 px);
  • тип начертания – значения атрибута специальные слова: dotted (точечный пунктир), dashed(пунктирная линия), solid (линия), double (двойная линия) и т.д.

<STYLE>
  TABLE,TH,TD {border:1px solid black}
</STYLE>

 Применение к ячейкам таблицы свойства border, для обрамления каждой ячейки рамкой

Рис 5. Применение к ячейкам таблицы свойства border, для обрамления каждой ячейки рамкой.

 

Если необходимо, чтобы рамка была только между ячейками, а не обрамляла каждую в отдельности, необходимо воспользоваться стилевым свойством border-collapse, принимающее значение:

  • collapse - рамка между ячейками только одна;
  • separate – каждая ячейка обрамляется собственной рамкой;

<STYLE>
  TABLE,TH,TD{border:1px solid black;border-collapse:collapse;}
</STYLE>

 Применение к таблице свойства border-collapse. Соседние ячейки отделяются одной рамкой

Рис 6. Применение к таблице свойства border-collapse. Соседние ячейки отделяются одной рамкой.

 

Размеры ячеек

По умолчание размеры ячеек, браузер формирует в зависимости от их содержания, если необходимо задать статичную форму, воспользуйтесь стилевым свойством width, height. При этом, если содержимое ячейки не помещается в одну строку, то происходит его перенос на следующую.

<STYLE>
  TH,TD{width:100px}
  TH{height:30px}
</STYLE>

 Применение свойства width и height, для задания ширины и высоты ячеек

Рис 7. Применение свойства width и height, для задания ширины и высоты ячеек.

 

Отступы в ячейках

Существует два вида отступов внешние и внутренние, первый вид отступа задается между границами соседних ячеек, второй от границ ячеек до их содержимого. CSS свойства создающие отступы указаны ниже:

  • padding – внутренний отступ, значение устанавливается в пикселях (px);
  • border-spacing – внешний отступ, значение устанавливается также в пикселях (px). Данный параметр не следует употреблять, если {border-collapse:collapse}, т.к. отступ устанавливается между границами соседних ячеек, а при наличие указанного свойства соседние ячейки отделены лишь одной рамкой;

<STYLE>
  CAPTION,TH,TD{padding:5px}
</STYLE>

 Применение к таблице свойства padding, для задания отступов

Рис. 8. Применение к таблице свойства padding, для задания отступов.

 

Расположение заголовка

По умолчанию заголовок таблицы располагается над ней, однако место положение можно менять с помощью стилевого свойства caption-side, которые принимает значения:

  • top – заголовок располагается над таблицей;
  • bottom – заголовок располагается под таблицей;

<STYLE>
  CAPTION{caption-side:top}
</STYLE>

 

Цвет ячеек

Для закрашивания ячейки определенным цветом необходимо воспользоваться свойством background-color:

<STYLE>
  TH{background-color:#E0E6FA;}
  TD{background-color:#F6F8FE;}
<STYLE>

 Применение к ячейке свойства background-color

Рис. 9. Применение к ячейке свойства background-color.

 

Выравнивание содержимого ячейки

Для выравнивания содержимого ячейки по горизонтали и вертикали используйте следующие стилевые свойства:

  • text-align – горизонтальное выравнивание содержимого ячейки, принимает значения left, center, right;
  • vertical-align – вертикальное выравнивание содержимого. Значения: top, middle, bottom;

<STYLE>
  CAPTION{text-align:left;vertical-align:middle}
  TH,TD{text-align:center;vertical-align:middle}
</STYLE>

 Выравнивание содержимого ячеек свойствами text-align и vertical-align

Рис. 10. Выравнивание содержимого ячеек свойствами text-align и vertical-align.

 

Оформление содержимого ячейки

Под оформление содержимого понимается форматирование текста находящегося в ячейках. Основное CSS свойство, применяемое для этой цели является font:

<STYLE>
  CAPTION{font:bold 20px "sans-serif"}
  TH{font:bold 17px "sans-serif"}
  TD{font:normal 15px "sans-serif"}
</STYLE>

 Оформление содержимого ячейки свойством font

Рис. 11. Оформление содержимого ячейки свойством font.

Подробнее о свойстве font, а также других стилевых свойств для оформления текста читайте в статье Оформление текста с помощью CSS

 

Все CSS стили применяемые к таблице

<STYLE>
  TABLE,TH,TD{border:1px solid black;border-collapse:collapse;}
  TH,TD{width:100px}
  TH{height:30px}

  CAPTION,TH,TD{padding:5px}

  CAPTION{caption-side:top}

  TH{background-color:#E0E6FA;}
  TD{background-color:#F6F8FE;}

  CAPTION{text-align:left;vertical-align:middle}
  TH,TD{text-align:center;vertical-align:middle}

  CAPTION{font:bold 20px "sans-serif"}
  TH{font:bold 17px "sans-serif"}
  TD{font:normal 15px "sans-serif"}</STYLE>
</STYLE>