Таблицы

Элемент caption

Как правило, у таблицы имеется заголовок, и этот элемент специально предназначен для описания заголовка таблицы. Обычно его размещают сразу после тэга <table>. Если к элементу caption применить атрибут align="bottom", то он отобразится под таблицей. Как и ячейка, заголовок не имеет ограничений на содержимое.

Элементы thead, tbody и tfoot

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

Аналогичный, но менее важный элемент - tfoot - нижний колонтитул таблицы, т.е. группа строк в её нижней части.

Элемент tbody объединяет строки в группы - они могут быть отделены друг от друга линейками специальной толщины.

Где и в каком количестве могут содержаться эти элементы - показано на рис. 9.2:

table {
      border-collapse: collapse;
    }
    thead {
      font-weight: bold;
      text-align: center;
      background-color: #eee;
    }
    tbody {
      border-bottom: solid 3px;
    }
    tfoot {
      font-style: italic;
      text-align: center;
      background-color: #eee;
    }
    td {
      border: solid 1px;
      padding: 2px;
    }
  ...
  <table>
    <thead>
      <tr>
        <td>Верхний </td><td>колонтитул </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Первый </td><td>tbody </td>
      </tr>
      ...
    </tbody>
    <tbody>
      <tr>
        <td>Второй </td><td>tbody </td>
      </tr>
      ...
    </tbody>
    <tfoot>
      <tr>
        <td>Нижний </td><td>колонтитул </td>
      </tr>
    </tfoot>
  </table>

Группы столбцов. Объединение столбцов и строк

Элементы colgroup и col

Предназначены для того, чтобы назначать свойства столбцам или группам столбцов. Вообще, таблица задаётся набором строк, но работа со столбцами часто бывает необходима - например, для задания ширины или фонового цвета столбца - и поэтому HTML предоставляет эти два специальных элемента. Для того чтобы назначить свойства всем ячейкам одного столбца, используйте элемент col. Этот элемент может появляться только в элементе colgroup, а colgroup - только в table:

<table>
    <colgroup>
      <col class="middle">
      <col class="top">
    </colgroup>
   ...

Если же одинаковые свойства нужно применить к нескольким подряд расположенным столбцам, то их можно присвоить элементу colgroup, тем самым немного сократив запись:

<colgroup span="4" width="20%">
    </colgroup>
    <colgroup span="2" width="10%">
    </colgroup>

Что равносильно следующей записи:

<colgroup width="20%">
      <col />
      <col />
      <col />
      <col />
    </colgroup>
    <colgroup width="10%">
      <col />
      <col />
    </colgroup>

Как видите, число столбцов в группе задаётся либо их явным перечислением (обычно это делается в том случае, если некоторые из них нуждаются в дополнительных атрибутах), либо указанием их количества в значении атрибута span.

.graycol {
      background: #eee;
    }
    .widecol {
      width: 200px;
    }
  ...
  <table>
    <colgroup>
      <col class="graycol" span="2" />
      <col />
      <col class="graycol" span="2" />
      <col class="widecol" />
    </colgroup>
    <thead>
      <tr>
        <td>Класс graycol</td><td>Класс graycol</td><td>без стиля</td><td>Класс
          graycol</td><td>Класс graycol</td><td>Класс widecol</td>
      </tr>
    </thead>
    <tr>
      <td></td><td></td><td></td><td></td><td></td><td>Вообще, таблица задаётся
        набором строк</td>
    </tr>
    <tr>
      <td></td><td></td><td></td><td></td><td></td><td>но работа со столбцами
        часто бывает необходима</td>
    </tr>
    <tr>
      <td></td><td></td><td></td><td></td><td></td><td>например, для задания ширины
        или фонового цвета столбца</td>
    </tr>
    <tr>
      <td></td><td></td><td></td><td></td><td></td><td>- для этого HTML предоставляет
        элементы colgroup и col</td>
    </tr>
  </table>

Атрибуты colspan и rowspan

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

<td colspan="3">

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

<td rowspan="3">

В обоих случаях, если значения атрибутов слишком большие (требуется объединить больше ячеек, чем их реально существует), то браузер объединит столько ячеек, сколько возможно, не создавая новых.

<table>
    <thead>
      <tr>
        <td colspan="2">colspan="2"</td><td colspan="3">colspan="3"
        </td><td> </td>
      </tr>
    </thead>
    <tr>
      <td rowspan="2">rowspan="2"</td><td></td><td></td><td></td><td>
      </td><td></td>
    </tr>
    <tr>
      <td></td><td rowspan="2" colspan="2">rowspan="2" colspan="2"
      </td><td></td><td rowspan="3" style="text-align: center">rowspan="3"
      </td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td><td></td><td></td>
    </tr>
  </table>

Динамическое создание таблиц

Чаще всего таблицы создаются не вручную, а программно. В наиболее распространённом случае таблица строится на основе результатов запроса к базе данных - это делается на стороне сервера посредством таких технологий как PHP, ASP.NET, JSP и т.п. Иногда бывает удобно также построить таблицу на стороне клиента из каких-нибудь "подручных" данных - в таком случае в роли "строителя" выступает программа на языке Javascript. Этот язык является столь же неотъемлемой частью веб-технологий, как HTML и CSS, и о нём речь подробно пойдёт в отдельной лекции. Однако, забегая немного вперёд, рассмотрим небольшой пример формирования таблицы при помощи Javascript - пусть это будет таблица умножения однозначных чисел.

Идея заключается в следующем: парсер браузера (подпрограмма, отвечающая за анализ кода), прочитав в HTML-коде элемент table (равно как и любой другой), создаёт в оперативной памяти объект, моделирующий таблицу. Этот объект включает в себя всё содержимое таблицы (атрибуты и вложенные элементы), а также предоставляет ряд методов для работы с объектом таблицы:

Методы, применимые к table:

Методы, применимые к table, thead, tbody и tfoot:

Методы, применимые к tr:

Методы, имена которых начинаются на create и insert возвращают ссылку на созданный объект. Методы insertRow(index) и insertCell(index) позволяют в качестве номера передать число -1, и в этом случае элемент будет вставлен в конец. Все эти методы можно вызвать в коде сценария на Javascript.

Также полезно знать о некоторых свойствах, предоставляемый объектной моделью таблицы:

Свойства объекта table:

Свойства объекта tr:

Пример:

table {
      border-style: outset;
      border-width: 6px;
      border-collapse: collapse;
      font-size: 16px;
      font-family: Courier;
    }
    caption {
      margin-bottom: .4em;
    }
    td, th {
      border: solid 1px;
      padding: 3px;
      text-align: center;
      width: 2em;
    }
    thead, th, td:first-child {
      background-color: #ddd;
      font-weight: bold;
    }
    ...
  <table id="MyTable">
    <caption>
      Таблица умножения однозначных чисел</caption>
    <thead>
    </thead>
    <tbody>
    </tbody>
  </table>
 
  <script type="text/javascript">
    var table = document.getElementById('MyTable');
    /*создание тела таблицы*/
    /*создаём строку заголовка*/
    var head_row = table.tHead.insertRow(-1);
    head_row.insertCell(-1);
    var i = 2; /* повторяем для i от 2 до 9 */
    do {
      /* добавляем в строку заголовка ячейку с числом i */
      head_row.insertCell(-1).innerHTML = i;
      /* добавляем строку в тело таблицы */
      var row = table.tBodies[0].insertRow(-1);
      /* добавляем к этой строке ячейку с числом i */
      row.insertCell(-1).innerHTML = i;
      j = 2;
      /* повторяем для j от 2 до 9 */
      do {
        /* добавляем к строке ячейку с числом i*j */
        row.insertCell(-1).innerHTML = i * j;
        /* увеличиваем значение j */
        j++;
      } while (j <= 9);
      /* увеличиваем значение i */
      i++;
    } while (i <= 9);
 
  </script>

Рассмотрим этот пример. С точки зрения структуры HTML-документа, в нём имеется два элемента: таблица MyTable и элемент script. Браузер, загрузив элемент script, выполняет содержащуюся в нём программу (хотя язык скрипта и необходимо указывать в атрибуте type, но единственным общепринятым языком скриптов для всех браузеров является именно Javascript). Программа формирует таблицу, ссылаясь на неё по имени table и, причём ссылка получается следующим образом:

var table = document.getElementById('MyTable');

Функция getElementById делает именно то, что говорит дословный перевод её названия: выдатьЭлементПоИд, т.е. найти в документе элемент со значением атрибута id равным требуемому и выдать ссылку на него.

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

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

Описание переменной: var table = ...;

Не будем здесь повторять общий курс информатики и объяснять, что такое переменная - достаточно сказать, что с переменными Javascript можно работать в основном так же, как и в других языках. Специфика в том, что, хотя переменная Javascript обычно принимает значение определённого типа (число, строка, объект и т.п.), сама переменная не типизирована: в неё всегда можно записать значение другого типа. Поэтому при описании переменных тип не указывается, в отличие, например, от Паскаля и Си.

Тип значения переменной определяется исходя из выражения, при вычислении которого это значение вырабатывается:

var s = "..."; //строка
var i = 2;//число

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

2 + 3 //результат: 5
'2' + '3' //результат: '23'

Инкремент:

i++; //число, хранящееся в переменной i, увеличится на 1

Цикл:

do {
//тело цикла
} while(/*условие продолжения цикла*/);

Нетрудно превратить таблицу умножения, например, в таблицу деления - для этого достаточно заменить выражение i*j на i/j. Правда, красоту полученной таблицы нарушает разница в количестве знаков после запятой у значений, являющихся периодическими и непериодическими дробями. Воспользуемся методом округления: (i/j).toFixed(2) - это означает: число ( i/j ) следует округлить до двух знаков после запятой.

Вопросы