Таблицы

Это 13-я секция руководства CSS Начало работы; оно описывает более продвинутые селекторы и некоторые специфичные способы, которыми вы можете стилизовать таблицу. Вы создаете новый пример документа, содержащий таблицу и таблицу стилей для неё.

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

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

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

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

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

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

Ячейки, лежащие на одной линии, составляют строку (row).

В некоторыех таблицах, строки могут быть сгруппирированы. Специальная группа строк в начале таблицы - заголовок (header), в конце - нижний колонтитул (footer). Главные строки таблицы - тело (body), и они могут быть также сгруппирированы.

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

Пример

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

Первая строка - заголовок. Остальные четыре строки - тело таблицы. Нижнего колонтитула нет.

У неё два столбца.

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

Рамки

Ячейки не имеют границ.

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

Пример

Здесь три таблицы.

У таблицы слева интервал рамки 0.5 em. У таблицы по центру он составляет ноль. Таблица справа имеет сжатые границы:

Clubs Hearts
Diamonds Spades
Clubs Hearts
Diamonds Spades
Clubs Hearts
Diamonds Spades

Заголовок

<caption> элемент - это метка, которая применяется ко всей таблице. По умолчанию, она отображается вверху таблицы.

Чтобы переместить её вниз, установите её свойство caption-side в bottom. Это свойство наследуется, поэтому, в качестве альтернативы вы можете установить это свойство у таблицы или у другого элемента предка.

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

Пример

У этой таблицы заголовок внизу

#demo-table > caption {
  caption-side: bottom;
  font-style: italic;
  text-align: right;
}
Подходит
Клубы Сердца
Алмазы Лопаты

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

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

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

Пример

Эти таблицы имеют бледно-зелёный фон. Их ячейки имеют бледно-серый фон и тёмно-серые рамки.

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

  Сердца
Алмазы Лопаты
  Сердца
Алмазы Лопаты
Детали

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

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

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

  1. Создайте новый HTML документ, doc3.html. Скопируйте и вставьте содержимое отсюда:
    <!DOCTYPE html>
    <html>
      <head>
        <title>Документ примера 3</title>
        <link rel="stylesheet" href="style3.css">
      </head>
      <body>
        <table id="demo-table">
          <caption>Океаны</caption>
          <thead>
            <tr>
              <th></th>
              <th>Площадь</th>
              <th>Средняя глубина</th>
            </tr>
            <tr>
              <th></th>
              <th>млн. км<sup>2</sup></th>
              <th>м</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>Северный Ледовитый</th>
              <td>13,000</td>
              <td>1,200</td>
            </tr>
            <tr>
              <th>Атлантический</th>
              <td>87,000</td>
              <td>3,900</td>
            </tr>
            <tr>
              <th>Тихий</th>
              <td>180,000</td>
              <td>4,000</td>
            </tr>
            <tr>
              <th>Индийский</th>
              <td>75,000</td>
              <td>3,900</td>
            </tr>
            <tr>
              <th>Южный</th>
              <td>20,000</td>
              <td>4,500</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <th>Общая</th>
              <td>361,000</td>
              <td></td>
            </tr>
            <tr>
              <th>Средняя</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. Откройте документ в вашем браузере. Он должен выглядеть наподобие этого:

    Океаны

      Площадь Средняя глубина
      млн. км2 м
    Северный Ледовитый: 13,000 1,200
    Атлантический: 87,000 3,900
    Тихий: 180,000 4,000
    Индийский: 75,000 3,900
    Южный: 20,000 4,500
    Общая: 361,000  
    Средняя: 72,000 3,800
  4. Сравните правила в таблице стилей с отображенной таблицей, чтобы гарантировать, что вы понимаете действие для каждого правила. Если вы найдете правило, значение которого вы не понимаете, то закомментируйте его и обновите страницу, чтобы посмотреть, что изменилось. Вот несколько заметок об этой таблице:
    • Заголовок находится снаружи рамки таблицы.
    • Если у вас установлен минимальный размер точки в Опциях, это может повлиять на верхний индекс в km2.
    • Три пустые ячейки. Через две из них  позволено показывать фон таблицы. У третьей есть фон и верхняя рамка.
    • Двоеточия добавлены с помощью таблицы стилей.
Вызов

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

  Площадь Средняя глубина
  млн. км2 м
Северный Ледовитый: 13,000 1,200
Атлантический: 87,000 3,900
Тихий: 180,000 4,000
Индийский: 75,000 3,900
Южный: 20,000 4,500
Общая: 361,000  
Средняя: 72,000 3,800

Океаны

Посмотреть решение для этой задачи.

Что дальше?

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

Следующая страница тоже рассматривает цель и структуру CSS таблиц.

Метки документа и участники

 Внесли вклад в эту страницу: BychekRU, ldone
 Обновлялась последний раз: BychekRU,