Опубликован: 01.09.2010 | Уровень: для всех | Доступ: платный | ВУЗ: Сибирский федеральный университет
Лекция 7:

Таблицы

< Лекция 6 || Лекция 7: 1234 || Лекция 8 >
Элемент caption

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

Упражнение.Добавьте заголовок к таблице в предыдущем примере. Установите для заголовка (создав правило CSS) полужирное начертание и отступ снизу.
Элементы thead, tbody и tfoot

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

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

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

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

Структура таблицы (при наличии в ней элементов thead и tbody)

Рис. 9.3. Структура таблицы (при наличии в ней элементов thead и tbody)
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>
Листинг 9.2. Таблица с колонтитулами и разделами
Таблица с колонтитулами и разделами

Рис. 9.4. Таблица с колонтитулами и разделами
Упражнение. Откройте пример в новом окне браузера и из меню Файл выберите команду Предварительный просмотр. Перейдите ко второй странице и убедитесь, что на ней повторяются оба колонтитула (это должно работать, по крайней мере, в браузерах Windows Explorer и Mozilla Firefox).
< Лекция 6 || Лекция 7: 1234 || Лекция 8 >
Юрий Шах
Юрий Шах

Профессиональный веб-дизайн: Введение в современные веб-технологии
Самостоятельная работа 4

"3. Создание внешней таблицы.

Теперь создайте таблицу с двумя строками. Во второй строке создайте две ячейки - в первую переместите таблицу цифр, а во вторую - таблицу знаков."

Как в ячейку <td> поместить таблицу? Таблица же сама состоит из ячеек. Исходя из задания следует, что <td> может быть родителем для <td>, но это противоречит правилам HTML?
Если не прав - поправьте.
Также прошу разъяснить, как именно выполнить занное условие - поместить в табличную ячейку таблицу цифр, а в другую ячейку - таблицу знаков? 

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?