Таблицы

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

Это 13-й раздел руководства «CSS. Приступая к работе».
Предыдущий раздел: Компоновка
Следующий раздел: Медиа

Информация: Конкретные селекторы

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

Селекторы на основе отношений
Селектор Выбор
A E Любой элемент Е, который является потомком элемента А (то есть: ребенок, или ребенок ребенка и т.д.)
A > E Любой элемент Е, который является дочерним элементом А
E:first-child Любой элемент Е, который является первым ребенком своего родителя
B + E Любой элемент Е, который является соседом элемента B (то есть: следующий ребенок одного из родителей)

Вы можете объединять их в сложные выражения отношений.

Вы также можете использовать символ * (звездочка), который означает «любой элемент».

Пример
HTML-таблица имеет свой идентификатор, но её строки и ячейки не имеют индивидуальных идентификаторов:

<TABLE id="data-table-1">
...
<TR>
<TD>Prefix</TD>
<TD>0001</TD>
<TD>default</TD>
</TR>
...

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

1. data-table-1 td:first-child {font-weight: bolder;}
2. data-table-1 td:first-child + td {font-family: monospace;}

Результат выглядит следующим образом:

Prefix 0001 default
Более подробно
В обычном порядке, если Вы делаете селектор более конкретным, то увеличиваете его приоритет.

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

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

Для получения подробной информации о селекторах см. Селекторы CSS.

Информация: Таблицы

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

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

Не используйте таблицы в необычных способах получения отдельных наглядных макетов. Методы описанные в предыдущей статье этого руководства (Компоновка) лучше для этой цели.

Структура таблицы

В таблице каждая часть информации отображается в ячейке (cell).

Ячейки в линию через страницу составляют строку (row).

В некоторых таблицах строки могут быть сгруппированы. Особая группа строк в начале таблицы это заголовок (header). Особая группа строк в конце таблицы это подвал (footer). Основные строки в таблице это тело (body). Они также могут быть в группе.

Ячейки вниз по странице в линию составляют колонки (column), но колонки имеют ограниченное применение в таблицах CSS.

Пример
Таблица Селекторов на основе отношений в верхней части этой статьи имеет десять ячеек в пять рядов.

Первая строка это заголовок. Остальные четыре строки это тело. Отсутствует футер.

Имеет две колонки.

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

Границы

Ячейки не имеют края (margin).

Ячейки имеют границы и отступы. По умолчанию границы разделяются значением свойства таблицы border-collapse. Вы также можете удалить интервал полностью, установив свойство таблицы border-collapse в collapse.

Пример
Вот три таблицы.

Таблица слева имеет 0,5 em границу интервала. Таблица в центре имеет нулевую границу интервала. Таблица справа collapse границу:

Заголовки

Элемент <caption> это метка, которая применяется ко всей таблице. По умолчанию заголовок отображается в верхней части таблицы.
Чтобы переместить его на дно, нужно установить его свойство caption-side вниз (bottom). Свойство передается по наследству, поэтому Вы можете установить его к таблице или другому предку элемента.

Для стиля текста заголовка используйте любое из обычных свойств текста.

Пример
Эта таблица имеет заглавие внизу:

#demo-table > caption {
  caption-side: bottom;
  font-style: italic;
  text-align: right;
  }
Suits
Clubs Hearts
Diamonds Spades

Пустые ячейки

Вы можете отобразить пустые ячейки (то есть их границы и фона), указав свойство empty-cells : show; для таблицы элементов.

Вы можете скрыть их, указав empty-cells: hide;. Затем, если родительский элемент ячейки имеет фон, он отображается через пустую ячейку.

Пример
  Hearts
Diamonds Spades
  Hearts
Diamonds Spades
Более подробно
Для получения подробной информации о таблицах см. Таблицы в спецификации CSS.

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

Действие: Стили для таблицы

  1. Создайте новый документ HTML doc3.html. Скопируйте и вставьте содержание отсюда, убедившись, что Вы выделили пример полностью:
    <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
    <HTML>
    <HEAD>
    <TITLE>Sample document 3</TITLE>
    <LINK rel="stylesheet" type="text/css" href="style3.css">
    </HEAD>
    <BODY>
    
    <TABLE id="demo-table">
    <CAPTION>Oceans</CAPTION>
    
    <THEAD>
    <TR>
    <TH></TH>
    <TH>Area</TH>
    <TH>Mean depth</TH>
    </TR>
    <TR>
    <TH></TH>
    <TH>million km<SUP>2</SUP></TH>
    <TH>m</TH>
    </TR>
    </THEAD>
    
    <TBODY>
    <TR>
    <TH>Arctic</TH>
    <TD>13,000</TD>
    <TD>1,200</TD>
    </TR>
    <TR>
    <TH>Atlantic</TH>
    <TD>87,000</TD>
    <TD>3,900</TD>
    </TR>
    <TR>
    <TH>Pacific</TH>
    <TD>180,000</TD>
    <TD>4,000</TD>
    </TR>
    <TR>
    <TH>Indian</TH>
    <TD>75,000</TD>
    <TD>3,900</TD>
    </TR>
    <TR>
    <TH>Southern</TH>
    <TD>20,000</TD>
    <TD>4,500</TD>
    </TR>
    </TBODY>
    
    <TFOOT>
    <TR>
    <TH>Total</TH>
    <TD>361,000</TD>
    <TD></TD>
    </TR>
    <TR>
    <TH>Mean</TH>
    <TD>72,000</TD>
    <TD>3,800</TD>
    </TR>
    </TFOOT>
    
    </TABLE>
    
    </BODY>
    </HTML>
    
  2. Создайте новый стиль style3.css. Скопируйте и вставьте содержание отсюда, убедившись, что Вы выделили пример полностью:
    /*** Style for doc3.html (Tables) ***/
    
    #demo-table {
      font: 100% sans-serif;
      background-color: #efe;
      border-collapse: collapse;
      empty-cells: show;
      border: 1px solid #7a7;
      }
    
    #demo-table > caption {
      text-align: left;
      font-weight: bold;
      font-size: 200%;
      border-bottom: .2em solid #4ca;
      margin-bottom: .5em;
      }
    
    /* basic shared rules */
    #demo-table th,
    #demo-table td {
      text-align: right;
      padding-right: .5em;
      }
    
    #demo-table th {
      font-weight: bold;
      padding-left: .5em;
      }
    
    /* header */
    #demo-table > thead > tr:first-child > th {
      text-align: center;
      color: blue;
      }
    
    #demo-table > thead > tr + tr > th {
      font-style: italic;
      color: gray;
      }
    
    /* fix size of superscript */
    #demo-table sup {
      font-size: 75%;
      }
    
    /* body */
    #demo-table td {
      background-color: #cef;
      padding:.5em .5em .5em 3em;
      }
    
    #demo-table tbody th:after {
      content: ":";
      }
    
    /* footer */
    #demo-table tfoot {
      font-weight: bold;
      }
    
    #demo-table tfoot th {
      color: blue;
      }
    
    #demo-table tfoot th:after {
      content: ":";
      }
    
    #demo-table > tfoot td {
      background-color: #cee;
      }
    
    #demo-table > tfoot > tr:first-child td {
      border-top: .2em solid #7a7;
      }
    
  3. Откройте документ в вашем браузере. Он должен выглядеть очень похожим на следующее:

    Oceans

      Area Mean depth
      million km2 m
    Arctic: 13,000 1,200
    Atlantic: 87,000 3,900
    Pacific: 180,000 4,000
    Indian: 75,000 3,900
    Southern: 20,000 4,500
    Total: 361,000  
    Mean: 72,000 3,800

  4. Сравните правила в таблице стилей с отображаемой таблицей, чтобы гарантировать, что Вы понимаете действие каждого правила. Если Вы найдете правила, в которых Вы не уверены полностью, закомментируйте правило и обновите страницу в браузере, чтобы увидеть, что происходит. Вот несколько заметок об этой таблице:
    • Надпись находится вне границ таблицы.
    • Если у Вас есть минимальный размер точки установленный в настройках, это может повлиять на индекс в км2.
    • Есть три пустых ячейки. Две из них позволяют показывать фон таблицы сквозь себя. Третья имеет фон и верхнюю границу.
    • Двоеточия добавлены с помощью таблицы стилей.

Выполните

Измените таблицу стилей, чтобы таблица выглядела следующим образом:

  Area Mean depth
  million km2 m
Arctic: 13,000 1,200
Atlantic: 87,000 3,900
Pacific: 180,000 4,000
Indian: 75,000 3,900
Southern: 20,000 4,500
Total: 361,000  
Mean: 72,000 3,800

Oceans

См. решение проблемы.

Что дальше?

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

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

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