Название таблицы html: Заголовок таблицы | htmlbook.ru

Содержание

HTML таблицы продвинутые возможности и доступность — Изучение веб-разработки

  • Назад
  • Обзор: Tables
  • Далее

Во второй статье этого модуля мы рассматриваем ещё несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.

Необходимые знания: Базовый HTML (Введение в HTML).
Цель: Изучить более продвинутые возможности HTML таблиц и их доступность.

Вы можете добавить заголовок для таблицы установив его в элементе <caption> и этот элемент необходимо поместить внутрь элемента <table> (en-US). Причём вам нужно поместить его сразу после открытия тега <table>.

<table>
  <caption>Dinosaurs in the Jurassic period</caption>
  .
.. </table>

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

Заголовок помещают сразу после тега <table>.

Примечание: Атрибут summary (en-US) также может быть использован в <table> элементе предоставляя описание — это также читается скринридерами. Однако мы рекомендуем вместо этого использовать <caption> элемент, так как summary deprecated в HTML5 спецификации и не может быть прочитан зрячими пользователями (он не отображается на странице).

Упражнение: Добавление заголовка

Давайте попробуем это, вернёмся к примеру который мы ранее встретили в прошлой статье.

  1. Откройте расписание занятий школьного учителя по языку в конце статьи HTML таблицы основы, или сделайте копию нашего timetable-fixed.html файла.
  2. Добавьте подходящий заголовок к таблице.
  3. Сохраните свой код и откройте его в браузере, чтобы посмотреть как это выглядит.

Примечание: Этот пример можно найти на GitHub по ссылке timetable-caption.html (живой пример).

Когда таблицы становятся более сложными по структуре полезно дать им более структурированное определение. Отличный способ сделать это используя <thead> (en-US), <tfoot> и <tbody> (en-US), которые позволяют вам разметить header, footer и body секции таблицы.

Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании. Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице. Вот несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отображаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.

Использование:

  • Элементом <thead> нужно обернуть часть таблицы которая относится к заголовку — обычно это первая строка содержащая заголовки колонок, но это не обязательно всегда такой случай. Если вы используете <col>/<colgroup> (en-US)
    элемент, тогда заголовок должен находиться ниже его.
  • Элементом <tfoot> нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отражаются суммы по столбцам таблицы. Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер всё равно отобразит его внизу таблицы).
  • Элементом <tbody> необходимо обернуть остальную часть содержимого таблицы которая не находится в header или footer таблицы. Этот блок располагают ниже заголовка таблицы или иногда footer таблицы, зависит от того какую структуру вы решите использовать (читать выше по тексту).

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

<tbody> и посмотрите HTML код в browser developer tools — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это даёт больше контроля над структурой таблицы и стилем.

Упражнение: Добавление структуры таблицы

Давайте используем эти новые элементы.

  1. В первую очередь, сделайте копию spending-record.html и minimal-table.css в новой папке.
  2. Попробуйте открыть это в браузере — вы увидите, что все выглядит классно, но могло бы быть лучше. Строка «SUM» которая содержит потраченные суммы кажется находится не в том месте и некоторые детали отсутствуют в коде.
  3. Поместите очевидную строку заголовка внутрь <thead> элемента, строку «SUM» внутрь <tfoot> элемента и оставшийся контент внутрь <tbody> элемента.
  4. Сохраните, перезагрузите и вы увидите, что добавление элемента <tfoot> привело к тому, что строка «SUM» опустилась к нижней части таблицы.
  5. Далее, добавьте атрибут colspan, чтобы ячейка «SUM» занимала первые четыре столбца, таким образом числовое значение «Cost» появится в последнем столбце.
  6. Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в <head> вашего HTML документа вы увидите пустой элемент <style>. Внутри этого элемента добавьте следующие строки CSS кода:
    tbody {
      font-size: 90%;
      font-style: italic;
    }
    tfoot {
      font-weight: bold;
    }
    
  7. Сохраните, обновите и вы увидите результат. Если <tbody> и <tfoot>
    элементы не были установлены, то вам придётся писать много сложных селекторов/правил для применения одного и того же стиля.

Примечание: Мы не ожидаем что сейчас вы полностью поймёте CSS. Вы узнаете больше когда пройдёте наши CSS курсы (например, Вступление в CSS это хорошее место для начала; у нас также есть статья конкретно о стилизации таблиц).

Ваша готовая таблица должна выглядеть примерно так:

Примечание: Этот пример можно также найти на GitHub по ссылке spending-record-finished.html (живой пример).

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

Однако, иногда это необходимо, например, если вы хотите легко импортировать контент из других источников.

Разметка простой вложенной таблицы:

<table>
  <tr>
    <th>title1</th>
    <th>title2</th>
    <th>title3</th>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td>cell1</td>
          <td>cell2</td>
          <td>cell3</td>
        </tr>
      </table>
    </td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
</table>

Результат которого выглядит примерно так:

Давайте кратко опишем как мы используем данные таблицы. Таблицы могут быть удобным инструментом, который даёт нам быстрый доступ к данным и позволяет искать разные значения. Например, быстрого взгляда на таблицу ниже достаточно, чтобы найти сколько колец было продано в Амстердаме в августе 2016.

Чтобы понять эту информацию, мы проводим визуальные ассоциации между данными в этой таблице и её заголовками колонок и/или строк.

Items Sold August 2016
Clothes Accessories
Trousers Skirts Dresses Bracelets Rings
Belgium Antwerp 56 22 43 72 23
Gent 46
18
50 61 15
Brussels 51 27 38 69 28
The Netherlands Amsterdam 89 34 69 85 38
Utrecht 80 12 43 36 19

Но что если вы не можете провести эти визуальные ассоциации? Как тогда вы сможете прочитать таблицу выше? Люди с ослабленным зрением часто используют скринридер, который читает им информацию с веб-страницы. Это не проблема когда вы читаете простой текст, но интерпретация таблицы может быть сложной проблемой для слепых людей. Тем не менее, вместе с правильной разметкой мы можем заменить визуальные ассоциации программными.

В этой части статьи приводятся дополнительные способы которые делают таблицы более доступными.

Использование заголовков столбцов и строк

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

Мы уже разобрали заголовки в предыдущей статье, смотри по ссылке Добавление заголовков с помощью элемента <th>.

Атрибут scope

Новая тема в этой статье это атрибут scope (en-US), который может быть добавлен к элементу <th> он сообщает скринридеру какие ячейки точно являются заголовками — например, заголовок строки в которой он находится или столбца. Возвращаясь назад к нашему примеру с записями расходов, вы могли однозначно определить заголовки столбцов как здесь:

<thead>
  <tr>
    <th scope="col">Purchase</th>
    <th scope="col">Location</th>
    <th scope="col">Date</th>
    <th scope="col">Evaluation</th>
    <th scope="col">Cost (€)</th>
  </tr>
</thead>

И у каждой строки может быть определён заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):

<tr>
  <th scope="row">Haircut</th>
  <td>Hairdresser</td>
  <td>12/09</td>
  <td>Great idea</td>
  <td>30</td>
</tr>

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

Атрибут scope имеет ещё два возможных значения — colgroup и rowgroup. Они используются для заголовков, которые располагаются вверху ваших столбцов или строк. Если вы посмотрите на таблицу «Items sold…» в начале этого раздела статьи, вы увидите что ячейка с «Clothes» находится над ячейками «Trousers», «Skirts» и «Dresses». Все эти ячейки должны быть помечены как заголовки (<th>), но «Clothes» заголовок который находится сверху и определяет остальные три подзаголовка. Поэтому «Clothes» должна получить атрибут scope="colgroup", тогда как другие получат атрибут scope="col".

Альтернатива атрибута scope это использование атрибутов id и headers задавая ассоциации между заголовками и ячейками. Этот способ выглядит следующим образом:

  1. Вы устанавливаете уникальный id для каждого<th> элемента.
  2. Вы устанавливаете атрибут headers для каждого <td> элемента. Каждый headers атрибут должен содержать список всех id , разделённый пробелами, ко всем <th> элементам которые действуют как заголовок для этой ячейки.

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

Вернёмся к нашему примеру с расчётом затрат, его можно переписать следующим образом:

<thead>
  <tr>
    <th>Purchase</th>
    <th>Location</th>
    <th>Date</th>
    <th>Evaluation</th>
    <th>Cost (€)</th>
  </tr>
</thead>
<tbody>
<tr>
  <th>Haircut</th>
  <td headers="location haircut">Hairdresser</td>
  <td headers="date haircut">12/09</td>
  <td headers="evaluation haircut">Great idea</td>
  <td headers="cost haircut">30</td>
</tr>
  ...
</tbody>

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

  1. Для заключительного упражнения мы, вначале создадим копию items-sold.html и minimal-table.css в новой папке.
  2. Теперь попробуем добавить соответствующий атрибут scope, который наиболее соответствует этой таблице.
  3. И наконец попробуем сделать другую копию изначальных файлов, на этот раз делая таблицу более доступной используя атрибуты id и headers.

Примечание: вы можете проверить как работает последние примеры здесь items-sold-scope.html (also see this live) и items-sold-headers.html (see this live too).

Есть ещё некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали всё что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите статью «Стилизация таблиц».

  • Назад
  • Обзор: Tables
  • Далее

В этом блоке

  • HTML таблицы основы
  • HTML таблицы продвинутые возможности и доступность
  • Структурирование данных о планетах

Last modified:

Информация о материале

 

 

HTML ширина ячейки таблицы и ее высота (размер ячеек)

HTML высота ячеек и их ширина, размер определяется следующими атрибутами:

<html>
<head>
<title>Пример таблицы: HTML высота ячейки и ее ширина, размеры ячеек</title>
</head>
<body>
<table border=»1″ cellspacing=»0″ cellpadding=»12″>
<tr>
<td>ячейка 1, первый ряд</td>
<td>ячейка 2, первый ряд</td>
</tr>
<tr>
<td>ячейка 1, второй ряд</td>
<td>ячейка 2, второй ряд</td>
</tr>
</table> 
</body>
</html>

Результат:

ячейка 1, первый ряд

ячейка 2, первый ряд

ячейка 1, второй ряд

ячейка 2, второй ряд

Были установлены размеры первой ячейки из первого ряда. В итоге вторая ячейка, этого же ряда унаследовала высоту первой, а первая ячейка, второгo ряда — ее ширину (ширину первой ячейки, первого ряда). Такова особенность взаимодействия элементов HTML таблицы.

 

Горизонтальное HTML выравнивание в таблице и в ячейке, текст

HTML выравнивание внутри таблицы. Текст слева, справа, по центру ячеек таблицы:

<html>
<head>
<title>Пример: текст в таблице, HTML выравнивание в ячейке</title>
</head>
<body>
<table border=»1″ cellspacing=»0″ cellpadding=»17″>
<tr>
<td align=»left»>ячейка 1</td>
<td align=»right»>ячейка 2</td>
<td align=»center»>ячейка 3</td>
</tr>
</table> 
</body>
</html>

Результат:

ячейка 1

ячейка 2

ячейка 3

 

Вертикальное выравнивание текста внутри HTML таблицы

HTML выравнивание в таблице. Текст вверху, внизу, по центру ячеек таблицы:

<html>
<head>
<title>Пример: текст в таблице, HTML выравнивание в ячейке</title>
</head>
<body>
<table border=»1″ cellspacing=»0″ cellpadding=»17″>
<tr>
<td valign=»top»>ячейка 1</td>
<td valign=»bottom»>ячейка 2</td>
<td valign=»middle»>ячейка 3</td>
</tr>
</table> 
</body>
</html>

Результат:

ячейка 1

ячейка 2

ячейка 3

Атрибут valign определяет вертикальное выравнивание текста внутри таблицы.

 

Теги, определяющие заголовок HTML таблицы

HTML заголовки таблицы:

<html>
<head>
<title>Примеры заголовков</title>
</head>
<body>
<table border=»1″ cellspacing=»0″ cellpadding=»10″>
<tr>
<th>Заголовок</th>
<th>Заголовок</th>
<th>Заголовок</th>
</tr>
<tr>
<td>Текст</td>
<td>Текст</td>
<td>Текст</td>
</tr>
<tr>
<td>Текст</td>
<td>Текст</td>
<td>Текст</td>
</tr>
</table> 
</body>
</html>

Результат:

Заголовок

Заголовок

Заголовок

Текст

Текст

Текст

Текст

Текст

Текст

Теги <th> </th> определяют заголовок HTML таблицы.

 

HTML таблица по центру, с левой, с правой стороны

Горизонтальное расположение HTML таблицы внутри web-страницы:

<html>
<head>
<title>Примеры HTML таблиц</title>
</head>
<body>
<table align=»center» bgcolor=»#006699″>
<tr>
<td>
<p>align=»center»</p>
</td>
</tr>
</table>
   <table align=»left» bgcolor=»#cc0000″>
   <tr>
   <td>
   <p>align=»left»</p>
   </td>
   </tr>
   </table>
<table align=»right» bgcolor=»#66cc66″>
<tr>
<td>
<p>align=»right»</p>
</td>
</tr>
</table>
</body>
</html>

Результат: HTML таблица по центру страницы, слева, справа

В примере выше показаны три отдельные таблицы, каждая из которых состоит из одной ячейки. bgcolor – HTML атрибут – определяет цвет фона. В предыдущем уроке мы использовали его CSSаналог – background-color.

 

HTML таблица расположена внутри ячейки

Пример:

<html>
<head>
<title>Примеры HTML таблицы</title>
</head>
<body>
<table border=»1″ cellspacing=»0″ bgcolor=»#cccccc»>
<tr>
<td> &nbsp; </td>
<td align=»center»>
    <table border=»1″ cellspacing=»5″>
    <tr>
    <td> &nbsp; </td>
    <td> &nbsp; </td>
    </tr>
    <tr>
    <td> &nbsp; </td>
    <td> &nbsp; </td>
    </tr>
    </table>
</td>
</tr>
</table> 
</body>
</html>

Результат: HTML таблица внутри ячейки другой таблицы

Внутри второй ячейки находится еще одна таблица со своими атрибутами, значениями и стилями.

Размеры и фон внутренней таблицы, в отличае от внешней, заданы с помошью CSS.

Как сделать заголовок таблицы слева в html

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

При большом количестве таблиц на странице каждой из них удобно задать заголовок, содержащий название таблицы и ее описание. Для этой цели в HTML существует специальный тег <caption> , который устанавливает текст и его положение относительно таблицы. Проще всего размещать текст по центру таблицы сверху или снизу от нее, в остальных случаях браузеры по разному интерпретируют атрибуты тега <caption> , из-за чего результат получается неодинаковый. По умолчанию заголовок помещается сверху таблицы по центру, его ширина не превышает ширины таблицы и в случае длинного текста он автоматически переносится на новую строку. Для изменения положения заголовка у тега <caption> существует атрибут align , который может принимать следующие значения.

  • left &#8212; выравнивает заголовок по левому краю таблицы. Браузер Firefox располагает текст сбоку от таблицы, Internet Explorer и Opera располагают заголовок сверху, выравнивая его по левому краю.
  • right &#8212; в браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. Firefox отображает заголовок справа от таблицы.
  • center &#8212; заголовок располагается сверху таблицы по ее центру. Такое расположение задано в браузерах по умолчанию.
  • top &#8212; результат аналогичен действию атрибута center , но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.
  • bottom &#8212; заголовок размещается внизу таблицы по ее центру.

В примере 12.7 показано, как установить заголовок сверху таблицы. Обратите внимание, что тег <caption> находится внутри контейнера <table> , это его стандартное местоположение.

И снова таблицы..

Данная глава является продолжением 4 главы про таблицы, отложил я её на потом по нескольким причинам. Во-первых, четвёртая глава и без того получилась длинноватой и «неповоротливой».. Во-вторых, не хотел, что бы Вы на тот момент погрязли в изучении таблиц и так сказать топтались на месте.. обучение, на мой взгляд, должно происходить живенько, интересно, а главное результативно! Зато теперь, когда у Вас сложилось общее представление о HTML, Вы разобрались с его базовой частью, сделали свой первый нехитрый сайт, можно наращивать багаж знаний, умений и навыков. Ну и в-третьих, я надеюсь, что Вы к этому времени, параллельно начали изучать CSS.. что разве ещё нет? жаль.. Дело в том, что далее в этом учебнике нет нет будут попадаться вещи, которые сами по себе могут показаться бесполезными и бессмысленными, однако в купе с другими науками они порой незаменимы!

Ладно, вернёмся к таблицам..

В качестве «полигона» для изучения нового материала возьмём вот такую жутко скучную таблицу:

Продукт Белки Жиры Углеводы ккал
Хлеб ржаной 4,7 0,7 49,8 214
Молоко 2,8 3,2 4,7 58
Картофель 2 0,1 19,7 83
Свинина 11,4 49,3 9 489
Итого: 20,9 53,3 83,2 844

Ну что ж, давайте поколдуем над ней. .

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

Любая ячейка таблицы может быть определена как заголовок. Для того чтобы сделать ячейку таблицы заголовком нужно вместо знакомого тега <td> использовать тег <th> .

Например, вот так:

Как правило, текст ячейки определённый в качестве заголовка отображается браузерами жирным шрифтом по центру ячейки.

Ну что давайте попробуем сделать некоторые ячейки нашей таблицы заголовками? смотрим пример:

К тегу <th> могут применятся точно такие же атрибуты как и к тегу <td> о них мы говорили в 4 главе поэтому повторятся не буду, а просто перечислю их:

  • width — Ширина ячейки в процентах или пикселях.
  • height — Высота ячейки в процентах или пикселях.
  • align — Выравнивает текст в ячейке:
  • left — по левому краю.
  • right — по правому краю.
  • center — по центру.
  • justify — по левому и правому краю.
  • top — по верхнему краю.
  • middle — по центру.
  • bottom — по нижнему краю.
  • baseline — по базовой линии.

Думаю понятно, а посему идем дальше..

Название таблицы и её описание

Тег <caption> позволяет озаглавить таблицу, подписать её каким либо текстом. Данный тег должен располагаться внутри таблицы сразу после <table>

К тегу <caption> может быть применён атрибут align — выравнивание названия таблицы по горизонтали с возможными значениями left, right и center , а также атрибут valign который говорит от том где должно располагаться название сверху — top или снизу — bottom таблицы.

Однако хочу отметить, что данные атрибуты в разных браузерах ведут себя по разному, так например, запись:

<caption align=»left»>Текст</caption>

— для браузеров IE и Opera разместит название сверху таблицы по её левому краю, а для браузера Firefox это будет значить, что название следует размещать слева от самой таблицы.

Так же название таблицы или её краткое описание можно указывать с помощью атрибута summary тега <table>

<table summary=»описание таблицы»>

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

Группировка строк.

Знакомимся с тегами: <thead>, <tbody> и <tfoot> . Данные теги являют собой емкость для строк таблицы (тег <tr> ) позволяя тем самым группировать и логически ими управлять.

  • Тег <thead> — (От Англ. table head — «голова» таблицы) Предназначен для группировки одной или нескольких верхних строк в таблице, делая тем самым «шапку» таблицы.
  • Тег <tbody> — (От Англ. table body — «тело» таблицы), Как правило этим тегом группируют центральные строки в таблице с основным содержанием.
  • Тег <tfoot> — (От Англ. table footer — нижний колонтитул таблицы) Определяет «подвал» таблицы, состоящий из одной или нескольких нижних строк.

Следует отметить несколько правил использования данных тегов:

Данные теги могут быть расположены только внутри таблицы — контейнера <table> .

Теги <thead> и <tfoot> допускается использовать только один раз для одной таблицы, на тег <tbody> данное правило не распространяется.

Структура таблицы при использовании всех трёх данных тегов должна выглядеть вот так:

То есть сверху всегда должен быть контейнер <thead> потом <tbody> и <tfoot> , данные теги не могут пересекаться и быть вложенными друг в друга. А вот тег <tfoot> можно поменять местами с <tbody> , и что примечательно строки взятые в данный тег всё равно браузерами будут отображаться внизу таблицы.

К данным тегам допускается применять атрибуты выравнивания текста в ячейках align и valign , указывать цвет фона строк взятых в группу с помощью bgcolor , делать всплывающую подсказку с помощью title , однако на практике работать во всех браузерах будет только align и title .

Просто ради информации.. есть ещё атрибуты:

  • char — Выравнивание относительно заданного символа.
  • charoff — Смещение относительно указанного символа.

Но эти товарищи вообще не прижились ни в одном из известных браузеров! Толку с них как с козла молока.

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

Теперь отвечу, зачем вообще нужны <thead>, <tbody> и <tfoot> ..

Основное предназначение данных тегов это логическая группировка строк в группы, а это в свою очередь облегчает работу с таблицей, например через стили или скрипты, теперь не нужно определять тот же стиль для каждой строчки, а достаточно указать его для всей группы.. Я сказал стиль? Ах да я же забыл, что Вы еще незнакомы с CSS..

Выходя за рамки темы данной главы, хочу отметить, что практически к любому тегу применим замечательный атрибут style , с помощью которого можно сделать практически все, что касается дизайна того или иного элемента. . А еще есть не менее замечательный тег <style> который внедряет в страницу стили CSS.. но это всё материал из другого учебника, поэтому здесь мы говорить об этом не будем.

Просто покажу пока что малопонятный для Вас пример:

Курсивом в данном примере выделено стилевое описание тегов написанное с помощью средств CSS.

Группировка столбцов.

Группировать можно не только строки, но и столбцы таблицы с помощью тегов <col> и/или <colgroup> данные теги позволяют определить основные параметры столбцов таблицы с помощью следующих атрибутов:

  • width — Ширина столбца в процентах или пикселях.
  • align — Выравнивает текст в ячейке:
  • left — по левому краю.
  • right — по правому краю.
  • center — по центру.
  • justify — по левому и правому краю.
  • top — по верхнему краю.
  • middle — по центру.
  • bottom — по нижнему краю.
  • baseline — по базовой линии.

Давайте сгруппируем колонки нашей пробной таблицы про энергетическую ценность продуктов питания, она у нас состоит из пяти столбцов, значит, после тега <table> следует написать, что-то типа:

<col bgcolor=»#deb887″>
<col bgcolor=»#faebd7″>
<col bgcolor=»#faebd7″>
<col bgcolor=»#faebd7″>
<col bgcolor=»#f5f5dc»>

Для каждой колонки свой тег <col> с указанными параметрами, где первый тег это описание левой колонки таблицы. второй тег — группирует вторую колонку и далее по порядку..

Обратите внимание, что в нашей таблице вторая, третья и четвертая колонки имеют одинаковые параметры width=»100″ bgcolor=»#faebd7″ так вот чтобы не прописывать каждую одинаковую колонку отдельно можно воспользоваться атрибутом span , который указывает какое количество последующих колонок имеет идентичные параметры. В нашем случае запись приобретёт следующий вид:

<col bgcolor=»#deb887″>
<col span=»3″ bgcolor=»#faebd7″>
<col bgcolor=»#f5f5dc»>

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

Ну а вот собственно рабочий пример наших стараний:

Тег <colgroup> практически идентичен тегу <col> и имеет точно такие же атрибуты, так наш выше изложенный пример мог бы иметь такой вид:

<colgroup bgcolor=»#deb887″>
<colgroup span=»3″ bgcolor=»#faebd7″>
<colgroup bgcolor=»#f5f5dc»>

Никакой заметной разницы мы бы не увидели. Однако, некоторые отличия всё же есть.. Во-первых, <colgroup> может служить емкостью тля тегов <col> , конструкция такая:

Во-вторых, если бы мы к тегу <table> применили атрибут rules со значением groups (об этом атрибуте речь пойдёт ниже) эффект будет достигнут только при использовании <colgroup> .

Больше никакой разницы между этими тегами нет.

Обратите внимание, что в этом примере колонки таблицы поделены на три группы с помощью <colgroup> , в этих группах мы указали цвет фона и способ выравнивания, а ширину колонок мы задаём с помощью тегов <col> , которые находятся внутри контейнеров <colgroup> .

Как и в случае с группировкой строк, колонки группируются с основной целью дальнейшего воздействия на них через стили или скрипты.

Границы таблицы.

Ранее в главе «Таблицы» мы с Вами познакомились с атрибутами border — ширина границы и bordercolor — цвет границы, но это не весь набор инструментов применимых к границам таблицы.. Есть ещё два атрибута: frame и rules о них мы и поговорим ниже.

Начнём с атрибута frame — рамка, данный атрибут применяется к тегу <table> и указывает на то, как следует отображать внешние границы таблицы, то есть вокруг самой таблицы, а не между её отдельными ячейками

Атрибут frame может принимать следующие значения:

  • void — не отображать границы вокруг таблицы.
  • border — отображать границы вокруг таблицы (по умолчанию).
  • hsides — отображать только горизонтальные границы сверху и снизу.
  • vsides — отображать только вертикальные границы слева и справа.
  • above — отображать только верхнюю границу таблицы.
  • below — отображать только нижнюю границу таблицы.
  • lhs — отображать только левую границу.
  • rhs — отображать только правую границу.

А вот атрибут rules в отличие от frame наоборот указывает на то, как следует рисовать границы между ячейками таблицы.

Атрибут rules может принимать следующие значения:

  • all — отображать все границы между ячейками.
  • none — не отображать границы между ячейками.
  • rows — отображать границы только между строками.
  • cols — отображать границы только между стобцами.
  • groups — отображать границы только между группами строк и группами столбцов образованными с помощью тегов: <thead>, <tbody>, <tfoot> и <colgroup> .

Атрибут rules напрочь игнорирует браузер Opera, но как я уже не раз намекал такие проблемы можно решить с помощью средств CSS.

Полезные советы:

Тег <col> помимо своей прямой задачи, решает еще одну полезную штуку..
При загрузке таблицы браузеры не показывают её содержание до тех пор пока таблица полностью не загрузилась. Так вот при использовании тега <col> , браузер зная количество и будущие размеры колонок, сразу начинает показывать содержание, не дожидаясь полной загрузки.. что есть гуд! особенно при медленном соединении Интернета. Сайты свёрстанные табличным способом перестают «плясать» во время загрузки.

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

Всё что написано в этой главе, по большей своей части, ориентированно на логику таблиц, что облегчает жизнь всем!:
— Веб-мастерам, для более простого управления таблицей через стили или скрипты.
— Браузерам, и речевым браузерам для более корректного отображения или чтения таблиц.
— Алгоритмам поисковых систем, которые стараются найти эту самую логику на той или иной странице, чтобы выдать пользователю наиболее релевантные результаты.

Так что не стоит пренебрегать тегами: <thead>, <tbody>, <tfoot>, <th>, <col>, <caption>, <colgroup> — они весьма полезны!

Как сделать заголовок таблицы слева в html

В этой лекции подробно рассматриваются принципы применения таблиц в HTML-разметке. Это и табличная организация текста, и табличная координатная сетка, и организованная в таблицы графика.

Средства описания таблиц в HTML

По мере развития WWW стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст (тег <PRE>), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выбивалась из общего стиля документа. После введения таблиц в HTML у Web-мастеров появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.

Создание таблиц в HTML

Для описания таблиц используется тег <ТАВLЕ>. Тег <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.

Создание строки таблицы — тег <ТR>

Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами lt;ТR></ТR>.

Определение ячеек таблицы — тег <ТD>

Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD></ТD>. Число тегов <ТD></ТD> в строке определяет число ячеек

Использование таблиц в дизайне

Заголовки столбцов таблицы — тег <ТН>

Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН></ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD></ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН></ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD></ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.

Использование заголовков таблицы — тег <САРТIОN>

Тег <CAPTION> позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<САРТION АLIGN=top>), либо под таблицей (<САРТION ALIGN=bottom>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда тег <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.

Атрибут NOWRAP

Обычно любой текст, не помещающийся в одну строку ячейки таблицы, переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.

Атрибут СОLSPAN

Теги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее над любым количеством обычных ячеек.

Атрибут ROWSPAN

Атрибут ROWSPAN, используемый в тегах <ТD> и <ТН>, подобен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Внизу таблицы ее поместить нельзя.

Атрибут WIDТН

Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег <ТАВLЕ>, чтобы дать ширину всей таблицы, а можно использовать в тегах <ТD> или <ТН>, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге <ТАВLЕ> WIDTH=250, вы получите таблицу шириной 250 пикселов независимо от размера страницы на мониторе. При задании WIDТН=50% в теге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в процентах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.

Применение пустых ячеек

Если ячейка не содержит данных, она не будет иметь границ. Если требуется, чтобы у ячейки были границы, но не было содержимого, необходимо поместить в нее что-то, что не будет видно при просмотре. Можно воспользоваться пустой строкой <ВR>. Можно даже задать пустые столбцы, определив их ширину в пикселах или относительных единицах и не введя в полученные ячейки никаких данных. Это средство может оказаться полезным при размещении на странице текста и графики.

Атрибут СЕLLРАDDING

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

Атрибуты АLIGN и VALIGN

Теги <ТR>, <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:

ALIGN=blееdleft прижимает содержимое ячейки вплотную к левому краю.

ALIGN=left выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.

АLIGN=сеnter располагает содержимое ячейки по центру.

АLIGN=right выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.

Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. Вертикальное выравнивание может быть задано несколькими способами:

VALIGN=top выравнивает содержимое ячейки по ее верхней границе.

VALIGN=middle центрирует содержимое ячейки по вертикали.

VALIGN=bottom выравнивает содержимое ячейки по ее нижней границе.

Атрибут BORDER

В теге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.

Атрибут CELLSPACING

Атрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам. С помощью атрибута СЕLLSPACING= можно размещать текст и графику там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.

Атрибут BGCOLOR

Данный атрибут позволяет установить цвет фона. В зависимости от того, с каким тегом (TABLE, TR, TD) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB-код или стандартное название цвета.

Атрибут BACKGROUND

Данный атрибут задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением. Применение этого атрибута рассматривается ниже.

Использование таблиц в дизайне страницы

Таблицы хороши тем, что при желании можно сделать их границы невидимыми. Это позволяет с помощью тега <ТАВLЕ> красиво размещать на странице текст и графику. Пока тег <ТАВLЕ> остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически той же свободой в отношении использования «пустого пространства», что и создатели печатных страниц. Таблицы лучше всего помогают отойти от иерархического размещения текста на Web-страницах.

Если браузер поддерживает таблицы, он обычно правильно отображает наиболее интересные эффекты, полученные с их помощью

Использование таблиц в дизайне

Создание разноцветных таблиц

Некоторые браузеры позволяют отображать цвета. Есть несколько способов раскрасить таблицу, в основном они зависят от используемого браузера.

Цветные границы в Netscape Navigator. Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в теге <ВODY> как фон страницы. Затем задайте цвет фона страницы. В результате ваш тег <ВОDY> будет выглядеть примерно так:

Вы создали двойной фон — GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях (<НR>). Вне зависимости от того, является ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF устроен не слишком сложно, время загрузки страницы возрастет лишь немного.

Как сделать заголовок таблицы в Excel. Инструкция в 5 шагов по составлению заголовка в Эксель

Автор Елизавета КМ На чтение 10 мин Опубликовано

Заголовок — важная составляющая каждой таблицы в Microsoft Office Excel. Правильно подобранное название позволяет быстро ориентироваться по таблице, выделять существенные моменты и т. д. В данной статье будет представлен подробный алгоритм составления заголовков в Эксель.

Содержание

  1. Суть заголовка
  2. Шаг 1. Определяемся с местом заголовка
  3.  Шаг 2. Вводим текст и выравниваем его
  4. Шаг 3. Форматируем текст
  5. Шаг 4. Закрепляем заголовок
  6. Шаг 5. Размещаем заголовок на всех листах при печати
  7. Заголовок таблицы с повтором
  8. Таблица с пронумерованными заголовками
  9. Заключение

Суть заголовка

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

Обратите внимание! Название заголовка выбирается на основе сведений, содержащихся в столбце таблицы. Это одно слово или словосочетание, подводящее итог всего написанного.

Шаг 1. Определяемся с местом заголовка

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

  • Если таблица начинается с начала листа, с первой строчки, то для размещения заголовка потребуется освободить эту строку. Для этого необходимо поставить курсор в первую строчку любого столбика и нажать ПКМ.
  • В окне контекстного типа следует выбрать вариант «Вставить», нажав по слову ЛКМ.
Создание дополнительной пустой строчки сверху таблицы. Первоначальные действия
  • После выполнения вышеуказанных манипуляций на экране монитора должно отобразиться меню «Добавление ячеек» с единственным разделом «Добавить». Здесь нужно поставить тумблер на «Строку» и кликнуть по «ОК».
Действия, выполняемые в окне «Добавление ячеек»
  • Теперь построенная таблица сдвинется на одну строку вниз, а сверху останется пустая строчка. Чтобы разграничить заголовок и табличку, необходимо освободить еще одну строку. Так название будет выделяться.
Добавление еще одной пустой строки сверху массива для его разграничения с заголовком
  • Кликнуть ПКМ по любому месту первой строчки, которая была добавлена.
  • В контекстном меню аналогичным образом нажать по слову «Вставить».
  • В следующем окошке выбрать вариант «Строку» и щелкнуть по «ОК». После выполнения таких действий добавится еще одна строчка сверху таблицы.

Важно! Рассмотренным выше способом можно добавить несколько строк на усмотрение пользователя.

Добавление третьей и последующих строчек

Добавление строк можно сделать за один раз. Это ускорит процесс освобождения места под заголовок, сэкономит время. Процесс выполняется по алгоритму:

  • Сверху табличного массива выделить несколько строк во всех столбцах. Причем количество добавляемых строчек должно соответствовать числу выделенных вертикальных ячеек.
  • Кликнуть ПКМ по выделенной ячейке.
  • В меню контекстного типа щелкнуть по слову «Вставить».
  • В знакомом меню еще раз указать на пункт «Строку», поставив тумблер напротив него, а затем щелкнуть по «ОК».
Добавление нескольких строк сверху одним действием
  • Убедиться, что над таблицей добавилось нужное количество строчек.
Финальный результат

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

  • Аналогичным образом сверху таблички выделить нужное количество элементов.
  • Переключиться на раздел «Главная» в верхнем интерфейсе программы Microsoft Excel. Эта вкладка присутствует по всех версиях программного обеспечения.
  • Нажать по кнопке «Вставить» и выбрать вариант «Строки на лист».
Альтернативный способ добавления нужного количества пустых строчек сверху табличного массива
  • Проверить результат. Должны появиться пустые строчки сверху.

Дополнительная информация! При необходимости пустые строчки можно объединить между собой для размещения заголовка для всей таблицы.

 Шаг 2. Вводим текст и выравниваем его

Теперь необходимо придумать наименование таблицы и записать его в подготовленных строчкaх. Название придумывается на основе представленных в табличке сведений. Подробно останавливаться на этом вопросе в рамках данной статьи нецелесообразно. Лучше обратить внимание на методы составления названия, его размещения. Текст для названия вводится следующим образом:

  • Кликнуть ЛКМ по любой из ранее созданных строчек сверху массива.
  • Вписать соответствующие слова в строку. Это и будет содержание заголовка.
  • Расположить прописанное название посередине строчек для улучшения внешнего вида. Для этого сначала надо выделить все ячейки сверху рабочего листа, где прописано наименование.
Написание заголовка в созданных строках сверху таблички
  • Переключиться на раздел «Главная» сверху Excel.
  • В разделе «Выравнивание» щелкнуть по кнопочке «Объединить ячейки», а затем кликнуть по «Поместить в центр».
  • Убедиться, что оставленные под заголовок строчки объединились в одну, а название расположено по центру.
Правильное расположение заголовка после выравнивания

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

  • Выделить ЛКМ диапазон ячеек, в котором расположен заголовок.
  • По выделенным элемента щелкнуть ПКМ.
  • В контекстном меню кликнуть один раз по строчке «Формат ячеек…»
Путь к форматированию названия без объединения ячеек
  • В появившемся окне переключиться на вкладку «Выравнивание», расположенную сверху.
  • В разделе «По горизонтали» выбрать вариант «По центру выделения» и нажать на «ОК». Теперь заголовок будет находиться по центру, но строчки останутся не объединены.
Действия, которые необходимо выполнить в окне «Формат ячеек»

Обратите внимание! При желании цвет заголовка можно изменить, выбрав соответствующую заливку из списка стандартных в Эксель.

Шаг 3. Форматируем текст

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

  • Кликнуть ЛКМ по ячейке, в которой располагается название таблички, чтобы выделить ее. Если после такого клика строка для написания формул будет пустой, то значит заголовок фактически находится в другом месте. Иногда приходится проверять несколько ячеек, чтобы по строке формул понять, в какой из них в действительности отображено название.
Поиск ячейки, в которой прописан заголовок для таблицы
  • Теперь заголовок не помешает выделить жирным. Для этого надо перейти во вкладку «Главная» и щелкнуть по кнопке «Полужирный».
Оформление названия в полужирном стиле
  • Для повышения эстетичности можно увеличить размер заголовка. Во вкладке «Главная» стоит выбрать соответствующий шрифт и оптимальный размер для него. Здесь все зависит от собственных предпочтений пользователя ПК.
Изменение шрифта для заголовка, его размера

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

В некоторых ситуациях пользователям хочется, чтобы их заголовок всегда оставался на виду по мере прокручивания таблицы вниз. Этого эффекта возможно добиться, закрепив строку с названием. Для простоты рекомендуется выполнять действия по инструкции:

  • Выделить заголовок ЛКМ.
  • Переключиться в раздел «Вид» в верхнем интерфейсе программы.
  • Развернуть подраздел «Закрепить области», кликнув по стрелочке справа.
  • Нажать по варианту «Закрепить верхнюю строку», если заголовок находится на первой строчке рабочего листа.
  • Проверить, что по мере опускания листа название табличного массива всегда отображается на экране.
Действия по закреплению названия на всех листах документа

Важно! В Microsoft Office Excel также возможно закрепить шапку таблички.

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

  • Выделить ЛКМ названия первой строки таблички, которая располагается сразу после шапки.
  • Аналогичным образом переключиться на вкладку «Вид» и кликнуть по кнопке «Закрепить области».
  • В контекстном меню щелкнуть по такой же позиции «Закрепить области».
  • Удостовериться, что шапка массива закреплена так же, как и заголовок.
Действия по закреплению табличной шапки на каждой странице документа

Шаг 5. Размещаем заголовок на всех листах при печати

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

  • Переключиться во вкладку «Разметка» сверху интерфейса Excel.
  • В графе «Параметры страницы» кликнуть по кнопке «Печатать заголовки».
Путь к открытию окна «Параметры страницы»
  • Откроется небольшое окошко, в котором надо будет перейти в раздел «Лист».
  • Поставить курсор мышки в поле «Сквозные строки».
  • Нажать ЛКМ по любой ячейке, в которой находится заголовок таблички. После этого в поле «Сквозные строки» должен отобразиться фактический адрес выбранной ячейки.
  • Нажать по «ОК» внизу окна для завершения действия.
Действия в окне «Параметры страницы»
  • Проверить отображение названия таблицы при ее печати. Для этого сначала необходимо кликнуть по слову «Файл», расположенному в левом верхнем углу Microsoft Office Excel.
  • В контекстном меню щелкнуть по слову «Печать». Откроется небольшое по размерам окошко, в правой части которого будет отображаться предварительный просмотр текущего документа. Сверху листа должен быть прописан заголовок.
Предварительный просмотр документа для печати
  • Проверить наличие заголовка на других страничках документа, нажимая на стрелочку «Вправо» под листом текущего просмотра.
Проверка наличия заголовка на последующих страницах документа Excel

Дополнительная информация! В поле выбора листа можно поставить вручную номер нужной странички, после чего нажать на «Enter» с клавиатуры для ее отображения.

Заголовок таблицы с повтором

В более ранних версиях Microsoft Office Excel существует другой способ, позволяющий сделать повтор табличной шапки на каждой последующей странице. Данный метод заключается в выполнении следующего алгоритма:

  • Полностью выделить заголовок таблицы ЛКМ.
  • Переместиться в раздел «Макет», расположенный сверху интерфейса программы.
  • Нажать на кнопку «Данные».
  • Кликнуть по подразделу «Повторить строки» заголовков один раз ЛКМ.
  • Удостовериться, что заголовок повторяется на каждом листке документа.
Действия для повтора заголовка таблицы

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

Таблица с пронумерованными заголовками

Чтобы название таблички, столбцов нумеровалось на каждом листе, необходимо:

  • Вставить пустую строку после названия. Для этого во вкладке «Макет» нужно нажать на кнопку «Вставить сверху».
  • Теперь во вставленной строчке надо пронумеровать ячейки, переключаясь между ними с помощью кнопки «Tab».
  • Разбить основную таблицу на несколько составных частей. Здесь пользователю потребуется перейти в раздел «Макет», развернуть вкладку «Объединение» и нажать на кнопку «Разделить таблицу».
Создание таблицы с пронумерованными заголовками
  • В первой пронумерованной строчке нужно написать заголовок таблички.
  • Выделить шапку массива, переключиться в панель быстрого доступа и поставить галочку напротив поля «Абзац- не отрывать от следующего».
  • Выделить символ конца абзаца и присвоить ему размер «1ПТ». Теперь заголовки табличного массива должны быть пронумерованы.

Заключение

Таким образом, наименование таблиц в Microsoft Excel — важная составляющая оформления, повышающая презентабельность всей работы. Основные шаги составления заголовков в Эксель были описаны выше. С изложенной информацией необходимо внимательно ознакомиться во избежание ошибок.

Оцените качество статьи. Нам важно ваше мнение:

Заголовок таблицы > О том, как правильно делать сайты! > LILIA-WEB.NAROD.RU

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

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

left — выравнивает заголовок по левому краю таблицы. Аргумент работает только в браузерах Internet Explorer и Opera 7, Netscape пренебрегает этим параметром и устанавливает текст по центру.
right — в браузере Internet Explorer и Opera 7 располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. В браузере Netscape параметр игнорируется, а Opera версии 6 и ниже отображает заголовок справа от таблицы.
center — заголовок располагается сверху таблицы по ее центру. Такое расположение задано в браузерах по умолчанию.
top — результат аналогичен действию параметра center, но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.
bottom — заголовок размещается внизу таблицы по ее центру.

Как видно из описания, получить универсальный код, одинаково работающий в разных браузерах, в случае расположения заголовка по правому или левому краю, довольно проблематично. В этом случае нам на помощь придут стили и в частности атрибут text-align. Его задача — заставить текст выравниваться по нужному краю. В примере 1 показано, как установить заголовок сверху таблицы и выровнять по ее правому краю. Обратите внимание, что тег <CAPTION> находится внутри контейнера <TABLE>, это его стандартное местоположение.

Пример 1. Создание заголовка таблицы с помощью тега <CAPTION>
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>
<html>
<head>
<style type=»text/css»>
CAPTION {
text-align: right; /* Выравнивание по правому краю */
font-style: italic /* Курсивный текст */
}
</head>
</style>
<body>
<table border=»1″ cellpadding=»4″ cellspacing=»0″ align=»center»>
<caption>Изменение добычи ресурсов по годам</caption>
<tr>
<th>&nbsp;</th>
<th>2003</th>
<th>2004</th>
<th>2005</th>
</tr>
<tr>
<td>Нефть</td>
<td>43</td>
<td>51</td>
<td>79</td>
</tr>
<tr>
<td>Золото</td>
<td>29</td>
<td>34</td>
<td>48</td>
</tr>
<tr>
<td>Дерево</td>
<td>38</td>
<td>57</td>
<td>36</td>
</tr>
</table>
</body>
</html>

Ниже показан результат примера. Заметьте, что заголовок выравнивается не строго по правому краю таблицы, поскольку на него, как и на содержимое ячеек, действует параметр cellpadding. Можно представить, что заголовок это еще одна ячейка таблицы, на которую распространяются характеристики cellpadding и cellspacing.

Изменение добычи ресурсов по годам
  2003 2004 2005
Нефть 43 51 79
Золото 29 34 48
Дерево 38 57 36

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

Пример 2. Создание заголовка таблицы с помощью стилей

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»>
<html>
<head>
<style type=»text/css»>
.caption {
margin: 0px 15%; /* Отступы сверху и сбоку от текста */
padding-bottom: 4px; /* Поле под текстом */
text-align: right; /* Выравнивание по правому краю */
font-style: italic /* Курсивный текст */
}
</style>
</head>
<body>
<p align=»center»>Изменение добычи ресурсов по годам</p>
<table border=»1″ cellpadding=»4″ cellspacing=»0″ align=»center»>
. ..
</table>
</body>
</html>

В примере 2 создается новый класс с именем caption, который применяется к параграфу (тегу <P>). В данном случае таблица выравнивается по центру веб-страницы, поэтому то же самое должно произойти и с параграфом. Для этой цели добавляются отступы слева и справа через параметр margin. Ширину при этом явно не указываем, она получается вычитанием из общей ширины окна (100%) удвоенного отступа слева (в примере 15%). Таким образом выходит, что ширина текстового блока совпадает с шириной таблицы. В случае использования в качестве единиц измерения пикселы, рекомендуется воспользоваться тегом <CAPTION>.


И снова таблицы.. Учебник html

Глава 12

Данная глава является продолжением 4 главы про таблицы, отложил я её на потом по нескольким причинам. Во-первых, четвёртая глава и без того получилась длинноватой и «неповоротливой».. Во-вторых, не хотел, что бы Вы на тот момент погрязли в изучении таблиц и так сказать топтались на месте.. обучение, на мой взгляд, должно происходить живенько, интересно, а главное результативно! Зато теперь, когда у Вас сложилось общее представление о HTML, Вы разобрались с его базовой частью, сделали свой первый нехитрый сайт, можно наращивать багаж знаний, умений и навыков. Ну и в-третьих, я надеюсь, что Вы к этому времени, параллельно начали изучать CSS.. что разве ещё нет? жаль.. Дело в том, что далее в этом учебнике нет нет будут попадаться вещи, которые сами по себе могут показаться бесполезными и бессмысленными, однако в купе с другими науками они порой незаменимы!

Ладно, вернёмся к таблицам..

В качестве «полигона» для изучения нового материала возьмём вот такую жутко скучную таблицу:

ПродуктБелкиЖирыУглеводыккал
Хлеб ржаной4,70,749,8214
Молоко2,83,24,758
Картофель20,119,783
Свинина11,449,39489
Итого:20,953,383,2844

Ну что ж, давайте поколдуем над ней. .

Любая ячейка таблицы может быть определена как заголовок. Для того чтобы сделать ячейку таблицы заголовком нужно вместо знакомого тега <td> использовать тег <th>.

Например, вот так:

<table>
<tr>
<th>Данная ячейка является заголовком</th>
</tr>
</table>

Как правило, текст ячейки определённый в качестве заголовка отображается браузерами жирным шрифтом по центру ячейки.

Ну что давайте попробуем сделать некоторые ячейки нашей таблицы заголовками? смотрим пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Заголовок таблицы</title>
</head>
<body>
<table border=»1″ cellpadding=»3″ cellspacing=»0″>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</table>
</body>
</html>

смотреть пример  

К тегу <th> могут применятся точно такие же атрибуты как и к тегу <td> о них мы говорили в 4 главе поэтому повторятся не буду, а просто перечислю их:

  • width — Ширина ячейки в процентах или пикселях.
  • height — Высота ячейки в процентах или пикселях.
  • align — Выравнивает текст в ячейке:
    • left — по левому краю.
    • right — по правому краю.
    • center — по центру.
    • justify — по левому и правому краю.
  • valign — Выравнивает текст в ячейке по вертикали:
    • top — по верхнему краю.
    • middle — по центру.
    • bottom — по нижнему краю.
    • baseline — по базовой линии.
  • colspan — количество столбцов занимаемое ячейкой.
  • rowspan — количество рядов занимаемое ячейкой.
  • bgcolor — Цвет фона ячейки.
  • background — Задает фоновый рисунок в ячейке.
  • bordercolor — Цвет бордюра.
  • title — Всплывающая подсказка
  • nowrap — Запрещает перенос строк в ячейке.

Думаю понятно, а посему идем дальше..

Тег <caption> позволяет озаглавить таблицу, подписать её каким либо текстом. Данный тег должен располагаться внутри таблицы сразу после <table>

<table>
<caption>Название таблицы</caption>
<tr>
<td>ячейка</td>
</tr>
</table>

Вот пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Название таблицы</title>
</head>
<body>
<table border=»1″ cellpadding=»3″ cellspacing=»0″>
<caption><b>Энергетическая ценность продуктов питания:</b></caption>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</table>
</body>
</html>

смотреть пример  

К тегу <caption> может быть применён атрибут align — выравнивание названия таблицы по горизонтали с возможными значениями left, right и center, а также атрибут valign который говорит от том где должно располагаться название сверху — top или снизу — bottom таблицы.

Однако хочу отметить, что данные атрибуты в разных браузерах ведут себя по разному, так например, запись:

<caption align=»left»>Текст</caption>

— для браузеров IE и Opera разместит название сверху таблицы по её левому краю, а для браузера Firefox это будет значить, что название следует размещать слева от самой таблицы.

Так же название таблицы или её краткое описание можно указывать с помощью атрибута summary тега <table>

Вот так:

<table summary=»описание таблицы»>

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

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Описание таблицы</title>
</head>
<body>
<table border=»1″ cellpadding=»3″ cellspacing=»0″ summary=»Энергетическая ценность продуктов питания»>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</table>
</body>
</html>

смотреть пример  

Знакомимся с тегами: <thead>, <tbody> и <tfoot>. Данные теги являют собой емкость для строк таблицы (тег <tr>) позволяя тем самым группировать и логически ими управлять.

Так:

  • Тег <thead> — (От Англ. table head — «голова» таблицы) Предназначен для группировки одной или нескольких верхних строк в таблице, делая тем самым «шапку» таблицы.
  • Тег <tbody> — (От Англ. table body — «тело» таблицы), Как правило этим тегом группируют центральные строки в таблице с основным содержанием.
  • Тег <tfoot> — (От Англ. table footer — нижний колонтитул таблицы) Определяет «подвал» таблицы, состоящий из одной или нескольких нижних строк.

Следует отметить несколько правил использования данных тегов:

Данные теги могут быть расположены только внутри таблицы — контейнера <table>.

Теги <thead> и <tfoot> допускается использовать только один раз для одной таблицы, на тег <tbody> данное правило не распространяется.

Структура таблицы при использовании всех трёх данных тегов должна выглядеть вот так:

<table>
<thead>
<tr>
<td>голова</td>
</tr>
</thead>
<tbody>
<tr>
<td> тело</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>подвал</td>
</tr>
</tfoot>
</table>

То есть сверху всегда должен быть контейнер <thead> потом <tbody> и <tfoot>, данные теги не могут пересекаться и быть вложенными друг в друга. А вот тег <tfoot> можно поменять местами с <tbody>, и что примечательно строки взятые в данный тег всё равно браузерами будут отображаться внизу таблицы.

К данным тегам допускается применять атрибуты выравнивания текста в ячейках align и valign, указывать цвет фона строк взятых в группу с помощью bgcolor, делать всплывающую подсказку с помощью title, однако на практике работать во всех браузерах будет только align и title.

Просто ради информации.. есть ещё атрибуты:

  • char — Выравнивание относительно заданного символа.
  • charoff — Смещение относительно указанного символа.

Но эти товарищи вообще не прижились ни в одном из известных браузеров! Толку с них как с козла молока.

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

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www. w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Группировка строк</title>
</head>
<body>
<table border=»1″ cellpadding=»3″ cellspacing=»0″>
<caption><b>Энергетическая ценность продуктов питания:</b></caption>
<thead bgcolor =»#deb887″ title=»Шапка»>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
</thead>
<tbody align=»left» bgcolor =»#faebd7″ title=»Энергетическая ценность продуктов питания»>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
</tbody>
<tfoot align=»left» bgcolor =»#f5f5dc» title=»Итого:»>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</tfoot>
</table>
</body>
</html>

смотреть пример  

Теперь отвечу, зачем вообще нужны <thead>, <tbody> и <tfoot>. .

Основное предназначение данных тегов это логическая группировка строк в группы, а это в свою очередь облегчает работу с таблицей, например через стили или скрипты, теперь не нужно определять тот же стиль для каждой строчки, а достаточно указать его для всей группы.. Я сказал стиль? Ах да я же забыл, что Вы еще незнакомы с CSS..

Выходя за рамки темы данной главы, хочу отметить, что практически к любому тегу применим замечательный атрибут style, с помощью которого можно сделать практически все, что касается дизайна того или иного элемента.. А еще есть не менее замечательный тег <style> который внедряет в страницу стили CSS.. но это всё материал из другого учебника, поэтому здесь мы говорить об этом не будем.

Просто покажу пока что малопонятный для Вас пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Группировка строк и CSS</title>
<style type=»text/css»>
table {width: 600px; margin: 30px; border: #b8860b 6px ridge; border-collapse: collapse;}
td,th,tr {border: #b8860b 2px outset; padding: 3px;}
caption{font: italic bold 16px Arial; padding: 10px;}
thead {background-color: #deb887; text-align: center;}
tbody {background-color: #faebd7; text-align: left;}
tfoot {background-color: #f5f5dc; text-align: left; font: italic 14px Arial;}
tr:hover {background-color:#b8860b; color: #ffffff;}
</style>

</head>
<body>
<table>
<caption>Энергетическая ценность продуктов питания:</caption>
<thead title=»Шапка»>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
</thead>
<tbody title=»Энергетическая ценность продуктов питания»>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
</tbody>
<tfoot title=»Итого:»>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</tfoot>
</table>
</body>
</html>

смотреть пример  

Курсивом в данном примере выделено стилевое описание тегов написанное с помощью средств CSS.

Группировать можно не только строки, но и столбцы таблицы с помощью тегов <col> и/или <colgroup> данные теги позволяют определить основные параметры столбцов таблицы с помощью следующих атрибутов:

  • width — Ширина столбца в процентах или пикселях.
  • align — Выравнивает текст в ячейке:
    • left — по левому краю.
    • right — по правому краю.
    • center — по центру.
    • justify — по левому и правому краю.
  • valign — Выравнивает текст в ячейке по вертикали:
    • top — по верхнему краю.
    • middle — по центру.
    • bottom — по нижнему краю.
    • baseline — по базовой линии.
  • bgcolor — Цвет фона ячейки.
  • span — Количество столбцов, к которым следует применять параметры.

Давайте сгруппируем колонки нашей пробной таблицы про энергетическую ценность продуктов питания, она у нас состоит из пяти столбцов, значит, после тега <table> следует написать, что-то типа:

<col bgcolor=»#deb887″>
<col bgcolor=»#faebd7″>
<col bgcolor=»#faebd7″>
<col bgcolor=»#faebd7″>
<col bgcolor=»#f5f5dc»>

Для каждой колонки свой тег <col> с указанными параметрами, где первый тег это описание левой колонки таблицы. второй тег — группирует вторую колонку и далее по порядку..

Обратите внимание, что в нашей таблице вторая, третья и четвертая колонки имеют одинаковые параметры width=»100″ bgcolor=»#faebd7″ так вот чтобы не прописывать каждую одинаковую колонку отдельно можно воспользоваться атрибутом span, который указывает какое количество последующих колонок имеет идентичные параметры. В нашем случае запись приобретёт следующий вид:

<col bgcolor=»#deb887″>
<col span=»3″ bgcolor=»#faebd7″>
<col bgcolor=»#f5f5dc»>

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

Ну а вот собственно рабочий пример наших стараний:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Группировка столбцов</title>
</head>
<body>
<table border=»1″ cellpadding=»3″ cellspacing=»0″>
<caption><b>Энергетическая ценность продуктов питания:</b></caption>
<col bgcolor=»#deb887″>
<col span=»3″ bgcolor=»#faebd7″>
<col bgcolor=»#f5f5dc»>
<thead title=»Шапка»>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
</thead>
<tbody align=»left» title=»Энергетическая ценность продуктов питания»>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
</tbody>
<tfoot align=»left» title=»Итого:»>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</tfoot>
</table>
</body>
</html>

смотреть пример  

Тег <colgroup> практически идентичен тегу <col> и имеет точно такие же атрибуты, так наш выше изложенный пример мог бы иметь такой вид:

<colgroup bgcolor=»#deb887″>
<colgroup span=»3″ bgcolor=»#faebd7″>
<colgroup bgcolor=»#f5f5dc»>

Никакой заметной разницы мы бы не увидели. Однако, некоторые отличия всё же есть.. Во-первых, <colgroup> может служить емкостью тля тегов <col>, конструкция такая:

<colgroup>
<col>
</colgroup>

Во-вторых, если бы мы к тегу <table> применили атрибут rules со значением groups (об этом атрибуте речь пойдёт ниже) эффект будет достигнут только при использовании <colgroup>.

Больше никакой разницы между этими тегами нет.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>colgroup</title>
</head>
<body>
<table border=»1″>
<colgroup bgcolor=»#deb887″ align=»left»>
<col span=»3″>
</colgroup>
<colgroup bgcolor=»#faebd7″ align=»center»>
<col span=»2″>
<col>
</colgroup>
<colgroup bgcolor=»#f5f5dc» align=»right»>
<col>
<col>
<col>
</colgroup>
<tr>
<td>20</td><td>20</td><td>20</td><td>40</td><td>40</td><td>60</td><td>20</td><td>30</td><td>50</td>
</tr>
<tr>
<td>20</td><td>20</td><td>20</td><td>40</td><td>40</td><td>60</td><td>20</td><td>30</td><td>50</td>
</tr>
<tr>
<td>20</td><td>20</td><td>20</td><td>40</td><td>40</td><td>60</td><td>20</td><td>30</td><td>50</td>
</tr>
<tr>
<td>20</td><td>20</td><td>20</td><td>40</td><td>40</td><td>60</td><td>20</td><td>30</td><td>50</td>
</tr>
</table>
</body>
</html>

смотреть пример  

Обратите внимание, что в этом примере колонки таблицы поделены на три группы с помощью <colgroup>, в этих группах мы указали цвет фона и способ выравнивания, а ширину колонок мы задаём с помощью тегов <col>, которые находятся внутри контейнеров <colgroup>.

Как и в случае с группировкой строк, колонки группируются с основной целью дальнейшего воздействия на них через стили или скрипты.

Ранее в главе «Таблицы» мы с Вами познакомились с атрибутами border — ширина границы и bordercolor — цвет границы, но это не весь набор инструментов применимых к границам таблицы.. Есть ещё два атрибута: frame и rules о них мы и поговорим ниже.

Начнём с атрибута frame — рамка, данный атрибут применяется к тегу <table> и указывает на то, как следует отображать внешние границы таблицы, то есть вокруг самой таблицы, а не между её отдельными ячейками

Атрибут frame может принимать следующие значения:

  • void — не отображать границы вокруг таблицы.
  • border — отображать границы вокруг таблицы (по умолчанию).
  • hsides — отображать только горизонтальные границы сверху и снизу.
  • vsides — отображать только вертикальные границы слева и справа.
  • above — отображать только верхнюю границу таблицы.
  • below — отображать только нижнюю границу таблицы.
  • lhs — отображать только левую границу.
  • rhs — отображать только правую границу.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>frame</title>
</head>
<body>
<table border=»8″ frame=»hsides» cellpadding=»3″ cellspacing=»0″>
<caption><b>Энергетическая ценность продуктов питания:</b></caption>
<thead bgcolor =»#deb887″ title=»Шапка»>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
</thead>
<tbody align=»left» bgcolor =»#faebd7″ title=»Энергетическая ценность продуктов питания»>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
</tbody>
<tfoot align=»left» bgcolor =»#f5f5dc» title=»Итого:»>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</tfoot>
</table>
</body>
</html>

смотреть пример  

А вот атрибут rules в отличие от frame наоборот указывает на то, как следует рисовать границы между ячейками таблицы.

Атрибут rules может принимать следующие значения:

  • all — отображать все границы между ячейками.
  • none — не отображать границы между ячейками.
  • rows — отображать границы только между строками.
  • cols — отображать границы только между стобцами.
  • groups — отображать границы только между группами строк и группами столбцов образованными с помощью тегов: <thead>, <tbody>, <tfoot> и <colgroup>.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>rules</title>
</head>
<body>
<table border=»1″ rules=»groups» cellpadding=»3″ cellspacing=»0″>
<caption><b>Энергетическая ценность продуктов питания:</b></caption>
<thead bgcolor =»#deb887″ title=»Шапка»>
<tr>
<th>Продукт</th><th>Белки</th><th>Жиры</th><th>Углеводы</th><th>ккал</th>
</tr>
</thead>
<tbody align=»left» bgcolor =»#faebd7″ title=»Энергетическая ценность продуктов питания»>
<tr>
<th>Хлеб ржаной</th><td>4,7</td><td>0,7</td><td>49,8</td><td>214</td>
</tr>
<tr>
<th>Молоко</th><td>2,8</td><td>3,2</td><td>4,7</td><td>58</td>
</tr>
<tr>
<th>Картофель</th><td>2</td><td>0,1</td><td>19,7</td><td>83</td>
</tr>
<tr>
<th>Свинина</th><td>11,4</td><td>49,3</td><td>9</td><td>489</td>
</tr>
</tbody>
<tfoot align=»left» bgcolor =»#f5f5dc» title=»Итого:»>
<tr>
<th>Итого:</th><td>20,9</td><td>53,3</td><td>83,2</td><td>844</td>
</tr>
</tfoot>
</table>
</body>
</html>

смотреть пример  

Атрибут rules напрочь игнорирует браузер Opera, но как я уже не раз намекал такие проблемы можно решить с помощью средств CSS.

  • Тег <col> помимо своей прямой задачи, решает еще одну полезную штуку..
    При загрузке таблицы браузеры не показывают её содержание до тех пор пока таблица полностью не загрузилась. Так вот при использовании тега <col>, браузер зная количество и будущие размеры колонок, сразу начинает показывать содержание, не дожидаясь полной загрузки.. что есть гуд! особенно при медленном соединении Интернета. Сайты свёрстанные табличным способом перестают «плясать» во время загрузки.

  • По наблюдениям, на тег <th> обращают внимание поисковые системы, и слова в заголовке таблицы имеют больший «вес», в глазах поисковиков, нежели чем текст в обычных ячейках, что в свою очередь может повлиять на результаты выдачи по тому или иному поисковому запросу.

  • Всё что написано в этой главе, по большей своей части, ориентированно на логику таблиц, что облегчает жизнь всем!:
    — Веб-мастерам, для более простого управления таблицей через стили или скрипты.
    — Браузерам, и речевым браузерам для более корректного отображения или чтения таблиц.
    — Алгоритмам поисковых систем, которые стараются найти эту самую логику на той или иной странице, чтобы выдать пользователю наиболее релевантные результаты.

    Так что не стоит пренебрегать тегами: <thead>, <tbody>, <tfoot>, <th>, <col>, <caption>, <colgroup> — они весьма полезны!


Узнайте, когда их использовать (и когда следует избегать) »

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнайте больше

Таблицы используются в документах HTML (веб-страницах) для представления табличных данных .

Содержание

  • 1 Использование таблиц
  • 2 Пример кода таблицы: простая таблица
  • 3 Пример кода таблицы: сложная таблица
  • 4 О табличной компоновке
  • 5 Связанные элементы
  • 6 Учебные пособия и ресурсы

Использование таблиц

  • ”, которые организованы в строки таблицы ( ). Разметка (код HTML) для таблицы всегда основывается на строках, а не на столбцах.
  • Ячейки таблицы, которые действуют как заголовки столбцов или заголовков строк, должны использовать (заголовок таблицы) элемент.
  • Ячейки таблицы можно объединять с помощью атрибутов colspan и rowspan .
  • Таблицы можно разбить на разделы с помощью следующих элементов:
    • — Заголовок таблицы
    • — Тело таблицы
    • — Нижний колонтитул таблицы 14 90 0 быть добавлен в таблицу с помощью элемента .
    • Вы можете использовать и для определения столбцов таблицы для стилей. Однако у этой практики есть ряд ограничений.

    Пример кода таблицы: простая таблица

     <таблица>
     
      Имя
      Любимый цвет
     
     
      Боб
      Желтый
     
     
      Мишель
      Фиолетовый
     
    
     

    Название Любимый цвет
    Боб Желтый
    Michelle Purple
    CODE CODE DAMEL Сложная таблица Счет № 123456789 14 января 2025 г. <тд colspan="2"> Оплатить:
    Акме Биллинг Ко
    Главная улица, 123
    Ситивилл, Северная Америка, 12345 <тд colspan="2"> Клиент:
    Джон Смит
    Уиллоу Уэй, 321
    Юго-Восточный Северо-Западный Шир, Массачусетс 54321 <тело> Имя/Описание Кол-во <й>@ Стоимость Скрепки 1000 0,01 10.00 Скобы (коробка) 100 1,00 100,00 Итого <тд> 110,00 Налоги <тд> 8% 8,80 Итого $ 118,80

    A Complex Table
    СЧЕТА #123456789 14 января 2025
    Плата.
    John Smith
    321 Willow Way
    Southeast Northwestershire, MA 54321
    Наименование / Описание Кол-во. @ Стоимость
    Скрепки 1000 0.01 10.00
    Staples (box) 100 1.00 100.00
    Subtotal 110.00
    Tax 8% 8.80
    Общая сумма $ 118,80

    О табличном макете

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

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

    Вы не должны использовать табличный макет ни при каких обстоятельствах. Вместо этого ознакомьтесь с нашими учебниками по CSS, чтобы начать изучать современный макет веб-сайта.

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

    Адам Вуд

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

    Связанные элементы

    Поиск на HTML.com

    Поиск:

    Самые популярные

    • HTML-тег
    • Шаблон ввода: Используйте его для добавления проверки основных данных в HTML5
    • Тег комментариев HTML: вот как его использовать Это в вашем коде
    • Тег HTML Body: освойте самый важный элемент HTML сейчас
    • Элемент HTML P: вот код для определения текста абзаца

    HTML-таблица: краткое руководство по HTML

    Темы этой статьи

    • Простой пример HTML-таблицы
    • Тег TH — заголовок таблицы HTML
    • Тег TR – Строка таблицы
    • Тег TD – ячейка таблицы
    • Расстояние между ячейками
    • Обивка стола
    • Стили HTML-таблиц
    • Цвета границ
    • Ширина ячейки
    • Заключение