Содержание

СSS Таблицы

Внешний вид таблицы HTML может быть значительно улучшена с помощью CSS:

КомпанияКонтактыСтрана
Alfreds FutterkisteМария АндерсГермания
Berglunds snabbköpКристина БерглундШвеция
Centro comercial MoctezumaФрансиско ЧангМексика
Ernst HandelРоланд МендельАвстрия
Island TradingХелен БеннеттВеликобритания
Königlich EssenФилипп КрамерГермания
Laughing Bacchus WinecellarsЙоши ТаннфмуриКанада
Magazzini Alimentari RiunitiИоанн РовеллиИталия

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

Чтобы задать границы таблицы в CSS, используйте свойство border.

Пример ниже определяет черными границами для элемнтов

<table>, <th>, и <td>:

Обратите внимание, что таблица в примере выше имеет двойную границу. Это потому, что обе таблицы и элименты <th>, и <td> имеют отдельные границы.

Свернуть границы таблицы

Свойство border-collapse задает, будут ли границы таблиц свернуты в одну границу:

Если вы хотите установить границы только вокруг таблицы, укажите свойство border для <table>:

Ширина и высота таблицы

Ширина и высота таблицы определяются свойством width и height.

В примере ниже задается ширина таблицы 100 пиклелей, а высота 50 пиклелей:

Горизонтальное выравнивание таблицы

Свойство text-align задает горизонтальное выравнивание (слева, справа, или по центру) контента в тегах <th> или <td>.

По умолчанию содержание элемента <th> выравниваниет по центру и содержание элемента <td> выравниваниет по левому краю.

В следующем примере выравнивает текст слева в элементе <th>:

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

Свойство vertical-align задает вертикальное выравнивание в (верхней, нижней или по центру) контент в <th> или <td>.

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

<th> и <td>).

Следующий пример задает вертикальное выравнивание текста в нижней части для элемента <td>):

Отступы в таблице

Чтобы контролировать пространство между границей и содержимым в таблице, используйте свойство padding в элементе <th> и <td>:

Горизонтальные разделители таблицы

ИмяФамилияСбережение
АндрейЩипунов$100
СергейЩипунов$150
ЛеонидЩипунов$300

Добавить свойство border-bottom в <th> и <td> для горизонтальных разделителей:

Таблица при наведении

Используйте селектор :hover в <tr> для выделения строк таблицы при наведении:

ИмяФамилияСбережение
АндрейЩипунов$100
СергейЩипунов$150
ЛеонидЩипунов$300

Полосатая таблица

ИмяФамилияСбережение
АндрейЩипунов$100
Сергей
Щипунов		$150
ЛеонидЩипунов$300

Для полосатой таблицы, использовать селектор nth-child() и добавить background-color на всех четных (или нечетных) строк таблицы:

Цвет заголовка таблицы

Пример ниже указывает цвет фона и цвет текста элемента <th>:

ИмяФамилияСбережение
АндрейЩипунов$100
СергейЩипунов$150
ЛеонидЩипунов$300

Отзывчивая таблица

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

ИмяФамилияОчкиОчкиОчкиОчкиОчкиОчкиОчкиОчкиОчкиОчкиОчкиОчки
АндрейЩипунов505050505050505050505050
СергейЩипунов949494949494949494949494
ЛеонидЩипунов676767676767676767676767

Добавьте контейнер элемент <div> в overflow-x:auto внутри элемента <table>, чтобы сделать его отзывчивым:

Еще примеры

Установить шикарную таблицу
Пример демонстрирует, как создать шикарную таблицу.

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

Проверьте себя с помощью упражнений!

Свойства CSS таблицы

СвойствоОписание
borderУстанавливает все свойства границы в одном объявлении
border-collapseУстанавливает границы таблицы должны ли быть свернуты
border-spacingУстанавливает расстояние между границами соседних ячеек
caption-sideУстанавливает размещение таблицы заголовка
empty-cellsУстанавливает следует ли отображать границы и фон пустых ячеек в таблице
table-layoutУстанавливает алгоритм макета компоновки для использования в таблице

CSS-таблицы | CSS

Внешний вид HTML-таблиц можно существенно усовершенствовать с помощью CSS:

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

Чтобы задать границы CSS таблицы, воспользуйтесь свойством border.

В примере ниже элементам <table>, <th> и <td> задается черная граница:

Пример

table, th, td {
   border: 1px solid black;
}

Посмотреть демо

Обратите внимание, что у таблицы в приведенном выше примере двойная граница. Это из-за того, что и у <table>, и у <th> и <td> выставлены отдельные свойства границы.

Свойство border-collapse определяет, нужно ли объединять двойную границу в одну:

Пример

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

Посмотреть демо

Если вам нужна простая контурная рамка вокруг всей красивой таблицы CSS, то свойство border нужно применять к элементу <table>:

Пример

 
table {
    border: 1px solid black;
}

Посмотреть демо

Ширина и высота таблицы определяется свойствами width и height.

В приведенном ниже примере ширина таблицы выставлена на 100%, а высота элементов <th> на 50px:

Пример

table {
    width: 100%;
}

th {
    height: 50px;
}

Посмотреть демо

Свойство text-align предназначено для горизонтального выравнивания (по левому и правому краю, по центру) содержимого элементов <th> и <td>.

По умолчанию, содержимое элементов <th> выравнивается по центру, а элементов <td> — по левому краю.

В приведенном ниже примере оформления таблицы CSS к содержимому элементов <th> применяется выравнивание по левому краю:

Пример

Посмотреть демо

Свойство vertical-align предназначено для вертикального выравнивания (по верхней и нижней границе, а также посередине) содержимого внутри элементов <th> и <td>.

По умолчанию, содержимое <th> и <td> выравнивается посередине.

В приведенном ниже примере к содержимому элементов <td> применяется вертикальное выравнивание по нижней границе:

Пример

td {
    height: 50px;
    vertical-align: bottom;
}

Посмотреть демо

Для регулирования расстояния между границей элемента и его содержимым воспользуйтесь свойством padding (для элементов <td> и <th>):

Пример

th, td {
    padding: 15px;
    text-align: left;
}

Посмотреть демо

Можно использовать свойство border-bottom в элементах <th> и <td>, чтобы отделить строки CSS таблицы друг от друга горизонтальным разделителем:

Пример

th, td {
    border-bottom: 1px solid #ddd;
}

Посмотреть демо

Воспользуйтесь селектором :hover в элементе <tr>, чтобы подсветить ячейки при наведении на них курсора мыши.

Пример

tr:hover {background-color: #f5f5f5}

Посмотреть демо

Чтобы получить CSS таблицы со строками разного цвета, используйте селектор nth-child(), и задайте всем четным и нечетным строкам разный цвет.

Пример

tr:nth-child(even) {background-color: #f2f2f2}

Посмотреть демо

В приведенном ниже примере показано, как задавать цвет фона и текста для элементов <th>:

Пример

th {
    background-color: #4CAF50;
    color: white;
}

Посмотреть демо

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

Добавьте <div> с заданным свойством overflow-x: auto для элемента <table>, чтобы сделать таблицу адаптивной.

Пример

<div>

<table>
... содержимое таблицы ...
</table>

</div>

Посмотреть демо

Больше примеров


Создаем причудливую таблицу

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

Выставляем расположение подписи таблицы

В данном примере показано, как можно расположить подпись к таблице при помощи CSS.

CSS-свойства таблицы

СвойстваОписание
borderПозволяет одним выражением установить сразу все границы
border-collapseПозволяет объединять двойные границы в одну
border-spacingПозволяет указать расстояние между смежными ячейками
caption-sideОтвечает за положение подписи к таблице
empty-cellsПозволяет показать или скрыть границы для пустых ячеек в таблице
table-layoutПозволяет использовать в таблице шаблонный алгоритм

Данная публикация представляет собой перевод статьи «CSS Tables» , подготовленной дружной командой проекта Интернет-технологии.ру

Таблицы и стили | htmlbook.ru

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

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

Цвет фона ячеек

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background, которое применяется к селектору TABLE. При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с TABLE задать цвет у селектора TD или TH, то он и будет установлен в качестве фона (пример 1).

Пример 1. Цвет фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблицы</title>
  <style type="text/css">
   TABLE {
    background: maroon; /* Цвет фона таблицы */
    color: white; /* Цвет текста */
   }
   TD {
    background: navy; /* Цвет фона ячеек */
   }
  </style>
 </head> 
 <body>
  <table cellpadding="4" cellspacing="1">
   <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
   <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
 </body>
</html>

В данном примере получим синий цвет фона у ячеек (тег <td>) и красный у заголовка (тег <th>). Это связано с тем, что стиль для селектора TH не определен, поэтому «просвечивается» фон родителя, в данном случае, селектора TABLE. А цвет для селектора TD указан явно, вот ячейки и «заливаются» синим цветом.

То же самое происходит и с цветом текста. Для всех элементов таблицы в примере он установлен белым.

Результат данного примера показан на рис. 1.

Рис. 1. Изменение цвета фона

Поля внутри ячеек

Полем называется расстояние между краем содержимого ячейки и ее границей. Обычно для этой цели применяется атрибут cellpadding тега <table>. Он определяет значение поля в пикселах со всех сторон ячейки. Допускается использовать стилевое свойство padding, добавляя его к селектору TD, как показано в примере 2.

Пример 2. Поля в таблицах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблицы</title>
  <style type="text/css">
   TABLE {
    background: white; /* Цвет фона таблицы */
    color: white; /* Цвет текста */
   }
   TD, TH {
    background: maroon; /* Цвет фона ячеек */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body>
  <table cellspacing="1">
   <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
   <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
 </body>
</html>

В данном примере с помощью группирования селектором поля установлены одновременно для селектора TD и TH.

Результат данного примера показан на рис. 2.

Рис. 2. Поля в ячейках

Если применяется стилевое свойство padding для ячеек таблицы, то действие атрибута cellpadding тега <table> игнорируется.

Границы и рамки

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

Использование атрибута cellspacing

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

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

Применение свойства border

Стилевое свойство border одновременно задает цвет границы, ее стиль и толщину вокруг элемента. Когда требуется создать отдельные линии на разных сторонах, лучше использовать его производные — border-left, border-right, border-top и border-bottom, они соответственно определяют границу слева, справа, сверху и снизу.

Применяя свойство border к селектору TABLE, мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH — рамку вокруг ячеек (пример 3).

Пример 3. Добавление двойной рамки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблицы</title>
  <style type="text/css">
   TABLE {
    background: #dc0; /* Цвет фона таблицы */
    border: 5px double #000; /* Рамка вокруг таблицы */
   }
   TD, TH {
    padding: 5px; /* Поля вокруг текста */
    border: 1px solid #fff; /* Рамка вокруг ячеек */
   }
  </style>
 </head>
 <body>
  <table>
   <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
   <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
 </body>
</html>

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

Результат примера показан на рис. 3.

Рис. 3. Граница вокруг таблицы и ячеек

Обратите внимание, что в месте состыковки ячеек образуются двойные линии. Они получаются опять же за счет действия атрибута cellspacing тега <table>. Хотя в коде примера этот атрибут нигде не фигурирует, браузер использует его по умолчанию. Если задать <table cellspacing=»0″>, то получим не двойные, а одинарные линии, но удвоенной толщины. Для изменения указанной особенности применяется стилевое свойство border-collapse со значением collapse, которое добавляется к селектору TABLE (пример 4).

Пример 4. Создание одинарной рамки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблицы</title>
  <style type="text/css">
   TABLE {
    border-collapse: collapse; /* Убираем двойные границы между ячейками */
    background: #dc0; /* Цвет фона таблицы */
    border: 4px solid #000; /* Рамка вокруг таблицы */
   }
   TD, TH {
    padding: 5px; /* Поля вокруг текста */
    border: 2px solid green; /* Рамка вокруг ячеек */
   }
  </style>
 </head>
 <body>
  <table>
   <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
   <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
 </body>
</html>

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

Результат примера показан на рис. 4.

Рис. 4. Граница вокруг таблицы

При добавлении border-collapse: collapse значение атрибута cellspacing тега <table> игнорируется.

Выравнивание содержимого ячеек

По умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением из этого правила служит тег <th>, он определяет заголовок, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 5).

Пример 5. Выравнивание содержимого ячеек по горизонтали

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблицы</title>
  <style type="text/css">
   TABLE {
    border-collapse: collapse; /* Убираем двойные линии между ячейками */
    width: 300px; /* Ширина таблицы */
   }
   TH { 
    background: #fc0; /* Цвет фона ячейки */
    text-align: left; /* Выравнивание по левому краю */
   }
   TD {
    background: #fff; /* Цвет фона ячеек */
    text-align: center; /* Выравнивание по центру */
   }
   TH, TD {
    border: 1px solid black; /* Параметры рамки */
    padding: 4px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body>
  <table>
   <tr><th>Заголовок 1</th><td>Ячейка 1</td><td>Ячейка 2</td></tr>
   <tr><th>Заголовок 2</th><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
 </body>
</html>

В данном примере содержимое тега <th> выравнивается по левому краю, а содержимое тега <td> — по центру. Результат примера показан ниже.

Рис. 5. Выравнивание текста в ячейках

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

Пример 6. Выравнивание содержимого ячеек по вертикали

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблицы</title>
  <style type="text/css">
   TABLE {
    border-collapse: collapse; /* Убираем двойные линии между ячейками */
    width: 300px; /* Ширина таблицы */
   }
   TH, TD {
    border: 1px solid black; /* Параметры рамки */
    text-align: center; /* Выравнивание по центру */
    padding: 4px; /* Поля вокруг текста */
   }
   TH {
    background: #fc0; /* Цвет фона ячейки */
    height: 40px; /* Высота ячеек */
    vertical-align: bottom; /* Выравнивание по нижнему краю */
    padding: 0; /* Убираем поля вокруг текста */
   }
  </style>
 </head> 
 <body>
  <table>
   <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
   <tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>
  </table>
 </body>
</html>

В данном примере устанавливается высота заголовка <th> как 40 пикселов и выравнивание текста происходит по нижнему краю. Результат примера показан на рис. 6.

Рис. 6. Выравнивание текста в ячейках

Оформление таблиц | WebReference

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

Ширина таблицы

По умолчанию ширина таблицы устанавливается браузером самостоятельно, исходя из объёма в ней табличных данных. Если текста в ячейках много, тогда таблица будет занимать всю доступную ей ширину, а если мало, то ширина таблицы автоматически уменьшится. При наличии на странице нескольких таблиц их разная ширина выглядит порой небрежно. Так что лучше явно задать ширину таблицы в процентах, пикселях, em или любых других единицах CSS, как показано в примере 1.

Пример 1. Ширина таблицы в процентах

table { width: 100%; }
.tbl-medium { width: 60%; }
.tbl-small { width: 200px; }

В данном примере ширина 100% применяется ко всем таблицам. Опять же, классы помогают установить ширину для выбранных таблиц задействуя ранее созданный класс. Чтобы указать таблице ширину в 200 пикселей надо добавить к элементу <table> класс tbl-small.

<table>

Выравнивание таблиц

Исходно любая таблица располагается по левому краю окна браузера. Можно выровнять её по центру, если только таблица не занимает всю доступную область, другими словами, меньше 100%. Для этого к стилю таблицы следует добавить отступы через свойство margin со значением auto, как показано в примере 2.

Пример 2. Выравнивание таблицы с помощью margin

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Таблица</title> <style> table { margin: auto; /* Выравнивание по центру */ } </style> </head> <body> <table> <tr><td>…</td></tr> </table> </body> </html>

В данном примере для всех таблиц на странице задано выравнивание по центру.

Цвет фона

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background, которое применяется к селектору table. При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с table задать цвет у селектора td или th, то он и будет установлен в качестве фона (пример 3).

Пример 3. Цвет фона

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Таблица</title> <style> table { background: #f5e8d0; /* Цвет фона таблицы */ border-spacing: 0; /* Расстояние между ячеек */ } th { background: #496791; /* Цвет фона ячеек */ color: #fff; /* Цвет текста */ } td, th { padding: 5px 10px; /* Поля в ячейках */ } </style> </head> <body> <table> <tr> <th rowspan=»2″>Вид соединения</th> <th colspan=»2″>Поля допусков ширины шпоночного паза</th> </tr> <tr> <th>Вал</th><th>Втулка</th> </tr> <tr> <td>Свободное</td><td>H9</td><td>D10</td> </tr> <tr> <td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td> </tr> <tr> <td>Плотное</td><td colspan=»2″>P9</td> </tr> </table> </body> </html>

Результат данного примера показан на рис. 1.

Изменение цвета фона

Рис. 1. Изменение цвета фона

Если нам требуется сделать зебру — так называется чередование строк разного цвета, то следует воспользоваться псевдоклассом :nth-child, добавляя его к селектору tr. Чтобы зебра распространялась только на тело таблицы, а не её заголовок, отделим их друг от друга с помощью элементов <thead> и <tbody> (пример 4).

Пример 4. Создание зебры

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Таблица</title> <style> table { width: 100%; /* Ширина таблицы */ border-collapse: collapse; /* Убираем двойные линии */ } thead { background: #f5e8d0; /* Цвет фона заголовка */ } td, th { padding: 5px; /* Поля в ячейках */ border: 1px solid #333; /* Параметры рамки */ } tbody tr:nth-child(even) { background: #f0f0f0; /* Зебра */ } </style> </head> <body> <table> <thead> <tr> <th rowspan=»2″>Интервалы размеров, мм</th> <th colspan=»4″>Допуск IT, мкм, для квалитетов</th> </tr> <tr> <th>5</th><th>6</th><th>7</th><th>8</th> </tr> </thead> <tbody> <tr> <td>До 3</td><td>4</td><td>6</td><td>10</td><td>14</td> </tr> <tr> <td>Св. 3 до 6</td><td>5</td><td>8</td><td>12</td><td>18</td> </tr> <tr> <td>Св. 6 до 10</td><td>6</td><td>9</td><td>15</td><td>22</td> </tr> <tr> <td>Св. 10 до 18</td><td>8</td><td>11</td><td>18</td><td>27</td> </tr> <tr> <td>Св. 18 до 30</td><td>9</td><td>13</td><td>21</td><td>33</td> </tr> <tr> <td>Св. 30 до 50</td><td>11</td><td>16</td><td>25</td><td>39</td> </tr> <tr> <td>Св. 50 до 80</td><td>13</td><td>19</td><td>30</td><td>46</td> </tr> </tbody> </table> </body> </html>

Результат данного примера показан на рис. 2.

Зебра

Рис. 2. Зебра

Значение even у селектора :nth-child применяет стиль ко всем чётным строкам и задаёт их цвет фона. Можно, также, поменять его на odd, тогда серым цветом будут выделяться нечётные строки.

Аналогичным образом цветом выделяются не строки, а колонки, для этого следует использовать селектор tbody td:nth-child(even).

Поля внутри ячеек

Полем называется расстояние между границей ячейки и её содержимым. Без полей текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие, добавление же полей позволяет улучшить читабельность текста. Для этой цели применяется стилевое свойство padding, которое работает с селектором td или th, как показано выше в примерах 3 и 4. Обычно указывают одно значение, оно тогда задаёт пустое пространство вокруг содержимого ячейки сразу со всех сторон. Два значения пишутся, когда надо задать разные поля по вертикали (первое значение) и горизонтали (второе значение).

Расстояние между ячеек

Между ячеек имеется небольшое пустое расстояние, которое не видно, пока для ячеек не установить границу или фоновый цвет. Исходно это расстояние равно 2px и его можно изменить с помощью свойства border-spacing, добавляя его к селектору table (пример 5).

Пример 5. Использование border-spacing

table {
 border-spacing: 3px; /* Расстояние между ячеек */
}
thead  th {
 background: #e08156; /* Цвет фона заголовка */
 color: #333; /* Цвет текста */
}
td, th {
 padding: 5px; /* Поля в ячейках */
 background: #4c715b; /* Цвет фона ячеек */
 color: #f5e8d0; /* Цвет текста */
}

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

Вид таблицы с расстоянием между ячеек

Рис. 3. Вид таблицы с расстоянием между ячеек

Если к table добавляется свойство border-collapse со значением collapse, то border-spacing игнорируется, потому как расстояния между ячеек уже нет.

Границы и рамки

Чтобы чётко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает стилевое свойство border, которое применяется к элементам (<td> или <th>). Однако здесь нас подстерегают подводные камни. Поскольку рамка создаётся для каждой ячейки, то в местах соприкосновения ячеек получается граница удвоенной толщины. Для устранения указанной особенности существует несколько путей. Самый простой — воспользоваться свойством border-collapse со значением collapse. В его задачу входит отслеживать соприкосновение линий и вместо двойной границы изображать одинарную. Это свойство достаточно добавить к селектору table, а дальше оно всё сделает самостоятельно (пример 6).

Пример 6. Применение свойства border-collapse при создании рамок таблицы

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Таблица</title> <style> table { border-collapse: collapse; /* Убираем двойные линии */ width: 100%; /* Ширина таблицы */ border-spacing: 0; /* Расстояние между ячеек */ } td { border: 2px solid #333; /* Параметры границ */ padding: 4px; /* Поля в ячейках */ text-align: center; /* Выравнивание по центру */ } </style> </head> <body> <table> <tr><td>O</td><td>X</td><td>X</td></tr> <tr><td>O</td><td>O</td><td>X</td></tr> <tr><td>X</td><td>X</td><td>O</td></tr> </table> </body> </html>

Разница между границами таблицы при добавлении свойства border-collapse, а также без него, представлена на рис. 4.

 

свойство не установлено

а — свойство не установлено

свойство установлено

б — свойство установлено

Рис. 4. Вид таблицы при использовании border-collapse

На рис. 4а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 4б).

Линии не обязательно делать для всех сторон ячеек, согласно дизайну они могут отделять одну строку или колонку от другой. Для этого мы используем свойства border-bottom, border-left и другие подобные. Применять границы к элементам <tr>, <thead>, <tfoot> и <tbody> нельзя, поэтому добавляем их к селектору table и td (пример 7).

Пример 7. Линии между строк

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Таблица</title> <style> table { width: 100%; /* Ширина таблицы */ border-collapse: collapse; /* Убираем двойные линии */ border-bottom: 2px solid #333; /* Линия снизу таблицы */ border-top: 2px solid #333; /* Линия сверху таблицы */ } td { text-align: center; /* Выравнивание по центру */ border-bottom: 1px solid #333; border-top: 1px solid #333; } td, th { padding: 5px; /* Поля в ячейках */ } </style> </head> <body> <table> <thead> <tr> <th rowspan=»2″>Вид соединения</th> <th colspan=»2″>Поля допусков ширины шпоночного паза</th> </tr> <tr> <th>Вал</th><th>Втулка</th> </tr> </thead> <tbody> <tr> <td>Свободное</td><td>H9</td><td>D10</td> </tr> <tr> <td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td> </tr> <tr> <td>Плотное</td><td colspan=»2″>P9</td> </tr> </tbody> </table> </body> </html>

Результат данного примера показан на рис. 5.

Таблица с горизонтальными линиями

Рис. 5. Таблица с горизонтальными линиями

Выравнивание текста в ячейках

По умолчанию текст в ячейке таблицы выравнивается по левому краю и по центру высоты. Исключением служит элемент <th>, он определяет ячейку заголовка, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 8).

Пример 8. Выравнивание содержимого ячеек по горизонтали

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Таблица</title> <style> table { border-collapse: collapse; /* Убираем двойные линии */ width: 100%; /* Ширина таблицы */ } th { background: #dfebb7; /* Цвет фона ячейки */ text-align: left; /* Выравнивание по левому краю */ } td { text-align: center; /* Выравнивание по центру */ } th, td { border: 1px solid black; /* Параметры рамки */ padding: 4px; /* Поля вокруг текста */ } </style> </head> <body> <table> <tr><th>Заголовок 1</th><td>Ячейка 1</td><td>Ячейка 2</td></tr> <tr><th>Заголовок 2</th><td>Ячейка 3</td><td>Ячейка 4</td></tr> </table> </body> </html>

В данном примере содержимое <th> выравнивается по левому краю, а содержимое <td> — по центру. Результат примера показан ниже (рис. 6).

Выравнивание текста в ячейках

Рис. 6. Выравнивание текста в ячейках

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

Пример 9. Выравнивание содержимого ячеек по вертикали

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Таблица</title> <style> th { background: #496791; /* Цвет фона ячеек заголовка */ color: #fff; /* Цвет текста */ } td { background: #f5e8d0; /* Цвет фона ячеек */ text-align: center; /* Выравниваем по центру */ } td, th { padding: 5px 10px; /* Поля в ячейках */ vertical-align: top; /* Выравниваем по верхнему краю */ } </style> </head> <body> <table> <tr> <th rowspan=»2″>Вид соединения</th> <th colspan=»2″>Поля допусков ширины шпоночного паза</th> </tr> <tr> <th>Вал</th><th>Втулка</th> </tr> <tr> <td>Свободное</td><td>H9</td><td>D10</td> </tr> <tr> <td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td> </tr> <tr> <td>Плотное</td><td colspan=»2″>P9</td> </tr> </table> </body> </html>

В данном примере выравнивание текста происходит по верхнему краю. Результат примера показан на рис. 7.

Выравнивание текста в ячейках

Рис. 7. Выравнивание текста в ячейках

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

Как научиться разрабатывать сайты

Таблицы и стили | htmlbook.ru

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

Цвет фона ячеек

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background, которое применяется к селектору TABLE. При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Хотя свойство background не наследуется, для ячеек значением фона по умолчанию выступает transparent, т.е. прозрачность, поэтому эффект заливки фона получается и у ячеек. Если одновременно с TABLE задать цвет у селектора TD или TH, то этот цвет будет установлен в качестве фона ячейки (пример 2.3).

Пример 2.3. Цвет фона

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Таблицы</title>
  <style type="text/css">
   table {
    background: maroon; /* Цвет фона таблицы */
    color: white; /* Цвет текста */
   }
   td {
    background: navy; /* Цвет фона ячеек */
   }
  </style>
 </head> 
 <body>
  <table cellpadding="4" cellspacing="1">
   <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
   <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
 </body>
</html>

В данном примере получим синий цвет фона у ячеек (тег <td>) и красный у заголовка (тег <th>). Это связано с тем, что стиль для селектора TH не определен, поэтому «просвечивается» фон родителя, в данном случае, селектора TABLE. А цвет для селектора TD указан явно, вот ячейки и «заливаются» синим цветом.

Результат данного примера показан на рис. 2.4.

Рис. 2.4. Изменение цвета фона

Поля внутри ячеек

Полем называется расстояние между краем содержимого ячейки и её границей. Обычно для этой цели применяется атрибут cellpadding тега <table>. Он определяет значение поля в пикселах со всех сторон ячейки. Допускается использовать стилевое свойство padding, добавляя его к селектору TD, как показано в примере 2.4.

Пример 2.4. Поля в таблицах

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Таблицы</title>
  <style type="text/css">
   TABLE {
    background: white; /* Цвет фона таблицы */
    color: white; /* Цвет текста */
   }
   TD, TH {
    background: maroon; /* Цвет фона ячеек */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body>
  <table cellspacing="1">
   <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
   <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
 </body>
</html>

В данном примере с помощью группирования селекторов поля установлены одновременно для селектора TD и TH. Результат примера показан на рис. 2.5.

Рис. 2.5. Поля в ячейках

Если применяется стилевое свойство padding для ячеек таблицы, то действие атрибута cellpadding тега <table> игнорируется.

Расстояние между ячейками

Для изменения расстояния между ячейками применяется атрибут cellspacing тега <table>. Влияние этого атрибута хорошо заметно при использовании границ вокруг ячеек или при заливке ячеек цветом, который выделяется на фоне страницы. В качестве замены cellspacing выступает стилевое свойство border-spacing, оно устанавливает расстояние между границами ячеек. Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений у этого свойства два, то первое определяет горизонтальное расстояние (т.е. слева и справа от ячейки), а второе — вертикальное (сверху и снизу).

Свойство border-spacing действует только в том случае, если для селектора TABLE не задано свойство border-collapse со значением collapse (пример 2.5).

Пример 2.5. Расстояние между границами ячеек

XHTML 1.0CSS 2.1IE 7IE 8+CrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Замена cellspacing</title>
  <style type="text/css">
   TABLE {
    width: 100%; /* Ширина таблицы */
    border: 1px solid #399; /* Граница вокруг таблицы */
    border-spacing: 7px 5px; /* Расстояние между границ */
   }
   TD {
    background: #fc0; /* Цвет фона */
    border: 1px solid #333; /* Граница вокруг ячеек */
    padding: 5px; /* Поля в ячейках */ 
   }
  </style>
 </head>
 <body>
  <table>
    <tr><td>Леонардо</td><td>5</td><td>8</td></tr>
    <tr><td>Рафаэль</td><td>4</td><td>11</td></tr>
    <tr><td>Микеланджело</td><td>24</td><td>9</td></tr>
    <tr><td>Донателло</td><td>2</td><td>13</td></tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 2.6.

Рис. 2.6. Вид таблицы при использовании border-spacing

Браузер Internet Explorer до седьмой версии включительно не поддерживает свойство border-spacing, поэтому в этом браузере для таблиц будет применяться значение cellspacing заданное по умолчанию (обычно оно равно 2px).

При добавлении к селектору TABLE свойства border-collapse со значением collapse, атрибут cellspacing игнорируется, а значение border-spacing обнуляется.

Границы и рамки

По умолчанию границы в таблице изначально нет, а её добавление происходит с помощью атрибута border тега <table>. Браузеры по-разному отображают такую границу, поэтому лучше не указывать этот атрибут вообще, а рисование границ возложить на стили. Рассмотрим два метода, непосредственно связанных со стилями.

Использование атрибута cellspacing

Известно, что атрибут cellspacing тега <table> задаёт расстояние между ячейками таблицы. Если используется разный цвет фона таблицы и ячеек, то между ячейками возникнет сетка линий, цвет которых совпадает с цветом таблицы, а толщина равна значению атрибута cellspacing в пикселах. В вышеприведенном выше примере 2.3 этот эффект показан, поэтому повторять его не буду.

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

Применение свойства border

Стилевое свойство border одновременно устанавливает цвет границы, её стиль и толщину вокруг элемента. Когда требуется создать отдельные линии на разных сторонах, лучше использовать производные — border-left, border-right, border-top и border-bottom, эти свойства соответственно определяют границу слева, справа, сверху и снизу.

Применяя свойство border к селектору TABLE, мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH — рамку вокруг ячеек (пример 2.6).

Пример 2.6. Добавление двойной рамки

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Таблицы</title>
  <style type="text/css">
   TABLE {
    background: #dc0; /* Цвет фона таблицы */
    border: 5px double #000; /* Рамка вокруг таблицы */
   }
   TD, TH {
    padding: 5px; /* Поля вокруг текста */
    border: 1px solid #fff; /* Рамка вокруг ячеек */
   }
  </style>
 </head>
 <body>
  <table>
   <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
   <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
 </body>
</html>

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

Рис. 2.7. Граница вокруг таблицы и ячеек

Обратите внимание, что в месте состыковки ячеек образуются двойные линии. Они получаются опять же за счет действия атрибута cellspacing тега <table>. Хотя в коде примера этот атрибут нигде не фигурирует, браузер использует его по умолчанию. Если задать <table cellspacing=»0″>, то получим не двойные, а одинарные линии, но удвоенной толщины. Для изменения указанной особенности применяется стилевое свойство border-collapse со значением collapse, которое добавляется к селектору TABLE (пример 2.7).

Пример 2.7. Создание одинарной рамки

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Таблицы</title>
  <style type="text/css">
   TABLE {
    border-collapse: collapse; /* Убираем двойные границы между ячейками */
    background: #dc0; /* Цвет фона таблицы */
    border: 4px solid #000; /* Рамка вокруг таблицы */
   }
   TD, TH {
    padding: 5px; /* Поля вокруг текста */
    border: 2px solid green; /* Рамка вокруг ячеек */
   }
  </style>
 </head>
 <body>
  <table>
   <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
   <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
 </body>
</html>

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

Рис. 2.8. Граница вокруг таблицы

Выравнивание содержимого ячеек

По умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением из этого правила служит тег <th>, он определяет заголовок, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 2.8).

Пример 2.8. Выравнивание содержимого ячеек по горизонтали

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Таблицы</title>
  <style type="text/css">
   TABLE {
    border-collapse: collapse; /* Убираем двойные линии между ячейками */
    width: 300px; /* Ширина таблицы */
   }
   TH { 
    background: #fc0; /* Цвет фона ячейки */
    text-align: left; /* Выравнивание по левому краю */
   }
   TD {
    background: #fff; /* Цвет фона ячеек */
    text-align: center; /* Выравнивание по центру */
   }
   TH, TD {
    border: 1px solid black; /* Параметры рамки */
    padding: 4px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body>
  <table>
   <tr><th>Заголовок 1</th><td>Ячейка 1</td><td>Ячейка 2</td></tr>
   <tr><th>Заголовок 2</th><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
 </body>
</html>

В данном примере содержимое тега <th> выравнивается по левому краю, а содержимое тега <td> — по центру. Результат примера показан ниже (рис. 2.9).

Рис. 2.9. Выравнивание текста в ячейках

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

Пример 2.9. Выравнивание содержимого ячеек по вертикали

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Таблицы</title>
  <style type="text/css">
   TABLE {
    border-collapse: collapse; /* Убираем двойные линии между ячейками */
    width: 300px; /* Ширина таблицы */
   }
   TH, TD {
    border: 1px solid black; /* Параметры рамки */
    text-align: center; /* Выравнивание по центру */
    padding: 4px; /* Поля вокруг текста */
   }
   TH {
    background: #fc0; /* Цвет фона ячейки */
    height: 40px; /* Высота ячеек */
    vertical-align: bottom; /* Выравнивание по нижнему краю */
    padding: 0; /* Убираем поля вокруг текста */
   }
  </style>
 </head> 
 <body>
  <table>
   <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
   <tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>
  </table>
 </body>
</html>

В данном примере устанавливается высота заголовка <th> как 40 пикселов и выравнивание текста происходит по нижнему краю. Результат примера показан на рис. 2.10.

Рис. 2.10. Выравнивание текста в ячейках

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

Браузеры иначе отображают ячейку, внутри которой ничего нет. «Ничего» в данном случае означает, что внутрь ячейки не добавили ни рисунок, ни текст, причём пробел в расчёт не принимается. Естественно, вид ячеек различается только в том случае, если вокруг них установлена граница. При использовании невидимой рамки, вид ячеек, независимо от того, есть в них что-нибудь или нет, совпадает.

Старые браузеры не отображали цвет фона пустых ячеек вида <td bgcolor=»#ffcc00″></td>, поэтому в том случае, когда требовалось оставить ячейку без содержимого, но отобразить цвет фона, внутрь ячейки добавляли неразделяемый пробел (&nbsp;). Пробел не всегда подходит, особенно когда нужно установить высоту ячейки 1–2 пиксела, из-за чего широкое распространение получил однопиксельный прозрачный рисунок. Действительно, такой рисунок можно масштабировать на свое усмотрение, но он на веб-странице никак не отображается.

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

Для управления видом пустых ячеек используется свойство empty-cells, при значении hide граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком. Ячейка считается пустой в следующих случаях:

  • нет вообще никаких символов;
  • в ячейке содержится только перевод строки, символ табуляции или пробел;
  • значение visibility установлено как hidden.

Добавление неразрывного пробела &nbsp; воспринимается как видимое содержание, т.е. ячейка уже будет не пустой (пример 2.10).

Пример 2.10. Пустые ячейки

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Использование empty-cells</title>
  <style type="text/css">
   TABLE {
    border: 4px double #399; /* Граница вокруг таблицы */
   }
   TD {
    background: #fc0; /* Цвет фона */
    border: 1px solid #333; /* Граница вокруг ячеек */
    empty-cells: hide; /* Прячем пустые ячейки */
    padding: 5px; /* Поля в ячейках */ 
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td>Леонардо</td><td>5</td><td>8</td>
   </tr>
   <tr>
    <td>Рафаэль</td><td> </td><td>11</td>
   </tr>
   <tr>
    <td>Микеланджело</td><td>24</td><td></td>
   </tr>
   <tr>
    <td>Донателло</td><td>&nbsp;</td><td>13</td>
   </tr>
  </table>
 </body>
</html>

Вид таблицы в браузере Safari показан на рис. 2.11а. Та же таблица в браузере IE7 продемонстрирована на рис. 2.11б.

а. В браузере Safari, Firefox, Opera, IE8, IE9

б. В браузере IE7

Рис. 2.11. Вид таблицы с пустыми ячейками

CSS оформление таблиц — ширина, высота, выравнивание, размер и другие параметры

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

width и height

Задают соответственно ширину и высоту таблицы. Без этих свойств параметры определяются автоматически и зависят от содержимого контейнера <table>. Значения устанавливаются в любых единицах длины CSS, но зачастую используются пиксели (px) и проценты (%). Последние настраивают ширину относительно родительского элемента, первые же задают абсолютную величину.

table {width: 450px; height: 80%;}

caption-side

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

  • top — расположить над таблицей.
  • bottom — разместить под таблицей.

Эксклюзивно для обозревателя Firefox доступны значения left (заголовок слева) и right (справа от таблицы), но другие браузеры их не понимают.

table {caption-side: top;}

border-collapse

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

Так рамки ячеек отображаются по умолчанию. Правило border-collapse: separate; даёт такой же эффект. Чтобы решить проблему, нужно объявить border-collapse: collapse; (результат показан на рисунке ниже).

border-spacing

Определяет расстояние между границами ячеек. Правило задаётся сразу для всей таблицы. Если значение одно, то оно установит расстояние и по горизонтали, и по вертикали. Если значения два, то первое задаст расстояние по горизонтали, второе — по вертикали. Свойство несовместимо с правилом table {border-collapse: collapse;}.

CSS-код

   table { 
    border: 4px double #FCA360;
    border-collapse: separate;
    border-spacing: 10px 20px;
   }
   td {
    padding: 3px;
    border: 1px solid #FCA360;
   }

Задаёт таблице следующее оформление:

empty-cells

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

  • show — показывать границы и фон (по умолчанию).
  • hide — скрыть их. Если все ячейки строки пусты, то будет скрыта, соответственно, вся строка. Если таблице задано правило border-collapse: collapse;, то свойство игнорируется.

table-layout

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

  • auto. Ширина определяется автоматически. При этом либо суммируется ширина всех столбцов, либо берётся значение свойства width, если таблице оно задано. Браузер сначала загружает таблицу, потом анализирует её, определяя ширину, и только после этого отображает.
  • fixed. Фиксированная ширина, которая определяется по первой строке.

Пример оформления таблицы

Не забывайте, что таблице можно задавать и другие универсальные правила, например, как мы это делали с высотой (height) и шириной (width).

Помня это, оформим несложную таблицу, частично прокомментировав код.

<!DOCTYPE html>
<html>
 <head>
  <title>border-collapse</title>
  <style>
   table {
    width: 50%;
    caption-side: bottom;
    border: 4px solid #006400;
    border-collapse: collapse;
    table-layout: fixed;
   }
   th {
    font-size: 13px;
    font-weight: bold;
    background: #ADFF2F;
    border-top: 4px solid #006400;
    border-bottom: 3px solid #FF8C00;
    color: #039;
    padding: 8px;
   }
   td {
    background: #E0FFFF;
    border-bottom: 1px solid #FF8C00;
    border-top: 1px solid transparent;
    padding: 8px;
   </style>
 </head>
 <body>   
  <table>
   <caption>Пример таблицы</caption>
   <tr> 
    <th>Цены</th><th>2014</th>
    <th>2015</th><th>2016</th>
   </tr>
   <tr> 
    <td>Хлеб</td><td>16</td>
    <td>18</td><td>21</td>
   </tr>
   <tr> 
    <td>Сахар</td><td>35</td>
    <td>44</td><td>50</td>
   </tr>
   <tr> 
    <td>Соль</td><td>8</td>
    <td>8,50</td><td>9</td>
   </tr>
  </table> 
 </body>
</html>

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

width: 50%;

Задаём ширину таблицы в половину от родительской. 50% берётся от ширины контейнера <body>, потому что других родителей у неё нет. То есть таблица будет занимать ровно половину окна браузера.

caption-side: bottom;

Размещаем заголовок снизу, под таблицей.

border: 4px solid #006400;

Задаём таблице цветную рамку толщиной 4 пикселя.

border-collapse: collapse;

Объединяем границы ячеек.

table-layout: fixed;

Настраиваем способ определения браузером ширины таблицы.

font-size: 13px;

Задаём размер шрифта заглавных ячеек.

font-weight: bold;

Делаем текст внутри них жирным.

background: #ADFF2F;

Устанавливаем цвет фона ячеек.

border-top: 4px solid #006400; border-bottom: 3px solid #FF8C00;

Настраиваем верхние и нижние рамки.

color: #039;

Определяем цвет текста.

padding: 8px;

Задаём расстояние от содержимого ячеек до их границ равным восьми пикселям.

Полезные ссылки:

Особенности таблиц | htmlbook.ru

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

Ширина таблицы

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

Ширина ячеек

Ширина ячеек определяется атрибутом width тега <td>, причем устанавливать это значение требуется в том случае, если ширина ячейки должна быть задана.

Рассмотрим на примере тот случай, когда размер ячеек нужно указать. Предположим, что нам требуется создать на веб-странице две колонки, одна из них должна иметь размер 200 пикселов, а вторая занимать оставшееся место. Создаем таблицу с двумя ячейками и для левой ячейки задаем параметр (пример 1). Единицы измерения ставить не нужно, браузер сам понимает, что если задано число, значит, используются пикселы.

Пример 1. Ширина ячеек

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
 </head>
 <body>
  <table cellspacing="0" cellpadding="4" border="1">
   <tr>
    <td>Левая колонка</td><td>Правая колонка</td>
   </tr>
  </table>
 </body>
</html>

Поскольку в данном примере ширина таблицы указана как 100%, таблица будет занимать всю свободную ширину окна браузера. При этом левая колонка берет под себя 200 пикселов, а правая — оставшееся свободное место.

Ширина ячейки иной раз может меняться, несмотря на то, что указана жестко. Это происходит, например, в том случае, если в ячейку добавили рисунок, размер которого превышает ширину ячейки. Чтобы вместить изображение, ячейка будет вынуждена раздаться. Также может повлиять на размер ячейки ее текстовое содержимое, которое содержит очень длинное слово.

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

  • Не добавляют в ячейку фиксированной ширины те изображения, размер которых превышает ширину ячейки. Способ, конечно, звучит банально, тем не менее, зная особенности ячеек, можно избежать неприятностей с их отображением.
  • Для тега <table> используют стилевое свойство table-layout со значением fixed. Применение этого свойства позволяет обрезать рисунок, если он не помещается целиком в ячейку (пример 2).

Пример 2. Свойство table-layout

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
  <style type="text/css">
   TABLE {
    table-layout: fixed; /* Ячейки фиксированной ширины */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0" cellpadding="4" border="1">
   <tr>
    <td><img src="images/dino.gif" alt="Динозаврик"></td>
    <td>...</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Отображение рисунка при использовании свойства table-layout

Современные браузеры (Firefox 3+, Internet Explorer 8+, Chrome и Safari) несколько иначе показывают таблицу (рис. 2).

Рис. 2. Отображение рисунка в браузере Safari

  • Воспользоваться стилевым свойством overflow со значением scroll. Это свойство добавляет полосы прокрутки к содержимому, но из-за того, что он применяется к блочным элементам им нельзя воспользоваться для тега <td>. Поэтому приходится вкладывать внутрь ячейки тег <div> и устанавливать стилевое свойство для него (пример 3). Это конечно не совсем правильно и удобно, но зато может дать требуемый результат.

Пример 3. Полосы прокрутки в ячейках

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
   <style type="text/css">
    TD DIV {
     overflow: scroll; /* Добавляем полосы прокрутки */
     width: 200px; /* Ширина элемента */
    }
  </style>
 </head>
 <body>
  <table cellspacing="0" cellpadding="4" border="1">
   <tr>
    <td><div><img src="images/dino.gif" 
    alt="Динозаврик"></div></td>
    <td>...</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 3.

Рис. 3. Отображение рисунка при использовании свойства overflow

Содержимое ячеек

Браузеры иначе отображают ячейку, внутри которой ничего нет. «Ничего» в данном случае означает, что внутрь ячейки не добавили ни рисунок, ни текст, причем пробел в расчет не принимается. Естественно, вид ячеек различается только в том случае, если вокруг них установлена граница. При использовании невидимой рамки, вид ячеек, независимо от того, есть в них что-нибудь или нет, совпадает.

Старые браузеры не отображали цвет фона пустых ячеек вида <td bgcolor=»#ffcc00″></td>, поэтому в том случае, когда требовалось оставить ячейку без содержимого, но отобразить цвет фона, внутрь ячейки добавляли неразделяемый пробел (&nbsp;). Пробел не всегда подходит, особенно когда нужно установить высоту ячейки 1–2 пиксела, из-за чего широкое распространение получил прозрачный рисунок размером в один пиксел. Действительно, такой рисунок можно масштабировать на свое усмотрение, но он на веб-странице никак не отображается.

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

Объединение ячеек

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

Ячейка 1Ячейка 2
Ячейка 3
Ячейка 4

Для наглядности код этой таблицы приведен в примере 4.

Пример 4. Таблица с объединенными ячейками

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблица</title>
 </head>
 <body>
  <table border="1" align="center" cellpadding="4" cellspacing="0">
   <tr> 
    <td bgcolor="#ffcc33">Ячейка 1</td>
    <td rowspan="2" valign="top">Ячейка 2</td>
   </tr>
   <tr> 
    <td valign="top">Ячейка 3<br><br></td>
   </tr>
   <tr bgcolor="#cccccc"> 
    <td colspan="2">Ячейка 4</td>
   </tr>
  </table>
 </body>
</html>

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

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

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

Скорость загрузки таблицы

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

Исходя из этого факта, таблицы не используют для хранения большой информации (от 100 кБ). А чтобы ускорить загрузку табличного макета, его разбивают на отдельные таблицы или используют свойство table-layout, применение которого позволяет несколько повысить скорость отображения содержимого таблицы.

таблиц стилей CSS

Внешний вид таблицы HTML можно значительно улучшить с помощью CSS:

Компания Контакт Страна
Альфредс Футтеркисте Мария Андерс Германия
Berglunds snabbköp Кристина Берглунд Швеция
Торговый центр Moctezuma Франциско Чанг Мексика
Эрнст Гендель Роланд Мендель Австрия
Island Trading Хелен Беннет Великобритания
Кениглих Эссен Филип Крамер Германия
Винные погреба Смеющегося Вакха Йоши Таннамури Канада
Magazzini Alimentari Riuniti Джованни Ровелли Италия

Попробуй сам »

Границы стола

Чтобы указать границы таблицы в CSS, используйте свойство border .

В приведенном ниже примере указана черная рамка для элементов

,, чтобы выделить строки таблицы с помощью мыши больше:

и:

Обратите внимание, что таблица в приведенном выше примере имеет двойные границы. Это потому что и таблица, и элементы

 и имеют отдельные границы.

Свернуть границы таблицы

Свойство border-collapse устанавливает, будут ли границы таблицы должен быть свернут в одну рамку:

Пример

стол {
граница-коллапс: коллапс;
}

стол, тыс, тд {
граница: сплошной черный 1px;
}

Попробуй сам »

Если вам нужна только рамка вокруг стола, укажите только свойство border для <таблица>:

Ширина и высота стола

Ширина и высота таблицы определяются свойствами ширина и высота .

В приведенном ниже примере ширина таблицы устанавливается равной 100%, а высота

 элементов до 50 пикселей:

Горизонтальное выравнивание

Свойство text-align устанавливает горизонтальное выравнивание (например, по левому, правому или по центру) содержимого в

 или.

По умолчанию содержимое элементов

 выравнивается по центру, а содержимое элементов выравнивается по левому краю.

В следующем примере текст в элементах

 выравнивается по левому краю:

Вертикальное выравнивание

Свойство vertical-align устанавливает вертикальное выравнивание (например, по верхнему, нижнему или среднему) содержимого в

 или.

По умолчанию вертикальное выравнивание содержимого в таблице среднее (для обоих

 и элементы).

В следующем примере устанавливается вертикальное выравнивание текста по низу для элементов

:

Обивка стола

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

 и:

Разделители горизонтальные

Имя Фамилия Экономия
Питер Грифон $ 100
Lois Грифон $ 150
Джо Swanson $ 300

Добавьте свойство border-bottom в

 и для горизонтальных разделителей:

Подъемный стол

Используйте селектор : hover на

Имя Фамилия Экономия
Питер Грифон $ 100
Lois Грифон $ 150
Джо Swanson $ 300

Столы в полоску

Имя Фамилия Экономия
Питер Грифон $ 100
Lois Грифон $ 150
Джо Swanson $ 300

Для таблиц с полосками зебры используйте селектор nth-child () и добавьте цвет фона ко всем четным (или нечетным) строкам таблицы:

Цвет стола

В примере ниже указан цвет фона. и цвет текста элементы:

Имя Фамилия Экономия
Питер Грифон $ 100
Lois Грифон $ 150
Джо Swanson $ 300

Адаптивный стол

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

Имя Фамилия Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки
Джилл Смит 50 50 50 50 50 50 50 50 50 50 50 50
Ева Джексон 94 94 94 94 94 94 94 94 94 94 94 94
Адам Джонсон 67 67 67 67 67 67 67 67 67 67 67 67

Добавьте элемент контейнера (например,

) с overflow-x: auto вокруг элемента, чтобы сделать его отзывчивым:

Примечание: В OS X Lion (на Mac) полосы прокрутки по умолчанию скрыты и отображаются только при использовании (даже если задано «overflow: scroll»).

Другие примеры

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

Установить положение заголовка таблицы
В этом примере показано, как разместить заголовок таблицы.

Проверьте себя упражнениями!

Свойства таблицы CSS

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

,

HTML-таблиц

Таблицы

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

Пример

Компания Контакт Страна
Альфредс Футтеркисте Мария Андерс Германия
Коммерческий центр Moctezuma Франциско Чанг Мексика
Эрнст Гендель Роланд Мендель Австрия
Island Trading Хелен Беннет Великобритания
Винные погреба Смеющегося Вакха Йоши Таннамури Канада
Magazzini Alimentari Riuniti Джованни Ровелли Италия
Попробуй сам »

Определите таблицу HTML

Тег

определяет таблицу HTML.

Каждая строка таблицы определяется тегом

. Каждый заголовок таблицы определяется тегом














. Каждые данные / ячейка таблицы определяются с помощью тег.

По умолчанию текст в

элементах выделены жирным шрифтом и по центру.

По умолчанию текст в

элементах обычные и выровнены по левому краю

Пример

Простая таблица HTML:

<таблица>

Имя Фамилия Возраст
Джилл Смит 50
Ева Джексон 94

Попробуй сам »

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

Таблица

HTML — Добавить границу

Чтобы добавить границу к таблице, используйте свойство CSS border :

Не забудьте определить границы как для таблицы, так и для ячеек таблицы.

Таблица HTML — свернутые границы

Чтобы границы сжимались в одну границу, добавьте CSS border-collapse недвижимость:

Пример

table, th, td {
border: 1px сплошной черный;
граница-коллапс: коллапс;
}

Попробуй сам »

Таблица HTML — Добавить заполнение ячеек

Заполнение ячейки определяет расстояние между содержимым ячейки и ее границами.

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

Чтобы установить отступ, используйте свойство заполнения CSS :

Таблица HTML - заголовки по левому краю

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

Чтобы выровнять заголовки таблицы по левому краю, используйте свойство CSS text-align :

Таблица HTML - Добавить интервал между границами

Интервал границы указывает расстояние между ячейками.

Чтобы установить интервал границ для таблицы, используйте свойство CSS border-spacing :

Примечание: Если таблица имеет свернутые границы, border-spacing не действует.

Таблица HTML - ячейка, охватывающая множество столбцов

Чтобы ячейка занимала более одного столбца, используйте атрибут colspan :

Пример

<таблица>

Имя
Телефон


Билл Гейтс
55577854
55577855

Попробуй сам "

Таблица HTML - ячейка, занимающая много строк

Чтобы сделать ячейку более одной строки, используйте атрибут rowspan :

Пример













Имя: Билл Гейтс
Телефон: 55577854
55577855

Попробуй сам "

HTML-таблица - добавить заголовок

Чтобы добавить заголовок к таблице, используйте тег :

Пример














Ежемесячная экономия
Месяц Экономия
Январь < / td>
100 долларов США
февраль 50 долларов США

Попробуй сам "

Примечание: Тег должен быть вставлен сразу после тега

.

Особый стиль для одного стола

Чтобы определить специальный стиль для одной конкретной таблицы, добавьте id атрибут к таблице:

Пример

<таблица>











Имя Фамилия Возраст
Ева Джексон 94

Теперь вы можете определить специальный стиль для этой таблицы:

# t01 {
ширина: 100%;
цвет фона: # f1f1c1;
}

Попробуй сам "

И добавьте еще стилей:

# t01 tr: nth-child (четный) {
цвет фона: #eee;
}
# t01 tr: nth-child (нечетный) {
цвет фона: #fff;
}
# t01 th {
цвет: белый;
цвет фона: черный;
}

Попробуй сам "

Краткое содержание главы

  • Используйте элемент HTML для определения таблицы
  • Используйте элемент HTML
    • , чтобы определить строку таблицы
  • Используйте элемент HTML















    • для определения данных таблицы
  • Используйте элемент HTML
    		• для определения заголовка таблицы
  • Используйте элемент HTML
    • для определения заголовка таблицы
  • Используйте свойство CSS border , чтобы определить границу
  • Используйте свойство CSS border-collapse , чтобы свернуть границы ячеек
  • Используйте свойство CSS padding , чтобы добавить отступ к ячейкам
  • Используйте свойство CSS text-align для выравнивания текста ячейки
  • Используйте свойство CSS border-spacing , чтобы установить интервал между ячейками
  • Используйте атрибут colspan , чтобы ячейка охватывала несколько столбцов
  • Используйте атрибут rowspan , чтобы ячейка занимала много строк
  • Используйте атрибут id , чтобы однозначно определить одну таблицу

    • Упражнения HTML

    HTML-теги таблиц

    Тег Описание
    <таблица> Определяет таблицу
    Определяет ячейку заголовка в таблице
    Определяет строку в таблице
    Определяет ячейку в таблице
    <заголовок> Определяет заголовок таблицы
    Задает группу из одного или нескольких столбцов в таблице для форматирования.
    Задает свойства столбца для каждого столбца в элементе
    Группирует содержимое заголовка в таблицу
    <тело> Группирует содержимое тела в таблицу
    <фут> Группирует содержимое нижнего колонтитула в таблице

    ,

    Как создать таблицу сравнения с CSS

    Узнайте, как создать сравнительную таблицу с помощью CSS.

    Характеристики Базовый Pro
    Образец текста
    Образец текста
    Образец текста
    Образец текста
    Образец текста

    Попробуйте сами »

    Как создать таблицу сравнения

    Шаг 1) Добавьте HTML:

    Пример

    <таблица>

    Возможности Базовый Pro
    Образец текст
    Образец текста

    Шаг 2) Добавьте CSS:

    Пример

    / * Стиль таблицы * /
    table {
    border-collapse: collapse;
    border-spacing: 0;
    ширина: 100%;
    граница: сплошная 1px #ddd;
    }

    / * Таблица стилей заголовки и данные таблицы * /
    th, td {
    text-align: center;
    отступ: 16 пикселей;
    }

    -й: первенец, td: first-child {
    выравнивание текста: слева;
    }

    / * в полоску под зебру строки таблицы * /
    tr: nth-child (even) {
    background-color: # f2f2f2
    }

    .fa-check {
    цвет: зеленый;
    }

    .fa-remove {
    цвет: красный;
    }

    Попробуй сам "
    ,

    Как создать адаптивную таблицу

    Узнайте, как создать адаптивную таблицу.

    Адаптивные таблицы

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

    Имя Фамилия Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки
    Джилл Смит 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50
    Ева Джексон 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94
    Адам Джонсон 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67

    Чтобы создать адаптивную таблицу, добавьте элемент контейнера с overflow-x: auto вокруг <стола>:

    Пример


    <таблица>
    ...


    Попробуй сам "

    Примечание: В OS X Lion (на Mac) полосы прокрутки по умолчанию скрыты и отображаются только при использовании (даже если задано «overflow: scroll» или auto).

    Совет: Перейдите к нашему руководству по таблицам CSS, чтобы узнать больше о как укладывать столы.


    ,

    No related posts.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *