Создаём красивую html таблицу

Привет, друзья!

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

Оформлять будем, конечно же, с помощью CSS. Научимся делать «зебру» — не только горизонтальную, но и вертикальную. Поехали!

Пример красивой таблицы

Язык	Переводы
русский	один	два	три	четыре
английский	one	two	three	four
немецкий	eins	zwei	drei	vier

Как видим, оформление коснулось всех основных аспектов:

1. Заголовки отличаются от остальных строк.
2. Строки чередуются цветом для более удобного восприятия.
3. В столбцах так же чередуется цвет. Это помогает не потерять нужный столбец при движении вверх/вниз.
4. Если навести мышку на строку, та подсветится. Это удобно для громоздких таблиц.

Что же, основые моменты определили, давайте пытаться реализовать.

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

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

Итак, у нас есть таблица table, заголовок thead и тело tbody. В свою очередь thead и tbody содержат строки — tr. Строки разбиваются на ячейки — th и td. Формально, для ячейки подходят оба тега, но семантически верно для заголовков использовать th, для остального — td.

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

Исходный код таблицы:

<table class="zebra">
  <colgroup>
    <col></col>
    <col></col>
    <col></col>
    <col></col>
    <col></col>
  </colgroup>
  
  <thead>
    <tr>
      <th>Язык</th>
      <th colspan="4">Переводы</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>русский</td>
      <td>один</td>
      <td>два</td>
      <td>три</td>
      <td>четыре</td>
    </tr>
    
    <tr>
      <td>английский</td>
      <td>one</td>
      <td>two</td>
      <td>three</td>
      <td>four</td>
    </tr>
    
    <tr>
      <td>немецкий</td>
      <td>eins</td>
      <td>zwei</td>
      <td>drei</td>
      <td>vier</td>
    </tr>
  </tbody>
</table>

Пожалуй, остановлюсь на тегах colgroup и col. Теги нужны для описания стилей колонок таблицы. Формально, колонок нет — есть строки и ячейки. Из-за этого теги и не используются. Но в нашем случае они необходимы для того, чтобы не прописывать вручную классы каждой ячейке.

Оформление заголовка

Настало время небольшой CSS-магии. Определим стили для ячеек-заголовков. Пусть они будут фиолетовые, с жирным шрифтом и текстом, выровненным по левому краю:

table.zebra thead th {
    background-color: rgba(204, 204, 255, 0.4);
    font-weight: bold;
    text-align: left;
}

Возможно, кто-то спросит, почему я задал цвет не в виде rgb() или более привычного #CCCCFF? Всё просто: без полупрозрачности цвета будут перекрываться и получится совсем не то, что нам нужно. Просто посмотрте на рисунок:

Чередование фона строк

Раньше (да и сейчас порой) можно было встретить в HTML-коде такое:

<tr class="odd"> <td>нечет</td> </tr>
<tr class="even"> <td>чёт</td> </tr>

Программно подставляется соответствующий класс для чётной и нечётной строк. Представьте, что каждую строку нужно «помечать» соответствующим образом. Дичь? А то! И ладно это формирует скрипт, но представьте, что таблица большая, строки добавляются/удаляются вручную. Смекаете, куда клоню? При добавлении новой строки в середину таблицы всем остальным за ней придётся вручную менять название класса, чтобы не сбить чересполосицу.

К счастью, есть CSS, благодаря которому это делается не просто, а очень просто. Делаем!

  /* нечётные строки таблицы — красные */
  table.zebra tbody tr:nth-child(odd) {
    background-color:rgba(255, 0, 0, 0.2);
  }
  
  /* чётные строки — зелёные */
  table.zebra tbody tr:nth-child(even) {
    background-color:rgba(0, 255, 0, 0.2);
  }

И всё. Изи)

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

Чередование фона столбцов

Здесь всё аналогично, только «чередовашки» описываем для элементов col:

  table.zebra col:nth-child(odd) {
    background-color:rgba(255, 255, 255, 0.2);
  }
  
  table.zebra col:nth-child(even) {
    background-color:rgba(0, 0, 0, 0.1);
  }

Чётные строки будут чёрные, нечётные — белые. Не забываем про полупрозрачность!

Выделение строки при наведении мышкой

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

  table.zebra tbody tr:hover {
    background-color:rgba(255, 255, 0, 0.2);
  }

Вот и всё. Окончательный вариант здесь. Для сохранения файла себе просто нажмите Ctrl-S на открывшейся странице. Там ничего не подсасывается, не нужны сторонние библиотеки и прочее, только голый HTML со стилями.

PS: «Нафига это нужно?» — спросит пытливый читатель. В самом деле, для трех строк и пяти столбцов не много ли чести? Но представьте, что строк тридцать, плюс десяток столбцов, и подобные труды уже не кажутся излишеством. В конце концов, посмотрите таблицы в phpMyAdmin. Очевидно, что без такой раскраски работать было бы крайне неудобно.

Дополнение

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

Отличия: стили применяются к таблицам (тег table), «вертикальная» линовка вынесена на th/td. Но! Редактор CMS должен генерировать thead и tbody. Это означает, что colgroup/col более не нужны, но не отменяет необходимость «правильного кода» со стороны движка.

Можно усложнить ещё немного, предположить, что первая строка всегда является заголовком, когда нужно убрать из css упоминания о tbody/thead, а для первой строки определить:

table tr:first-child

заместо

table thead tr

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