Table, th, td { border-style:solid; border-width:1px; border-collapse:collapse; padding:2px; } th { height:28px; background-color:#f892dc; color:white; border-color:black; } .ts1 { background-color:#ffeffb; }

Быстрый просмотр

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

С помощью CSS свойства width Вы можете устанавливать ширину таблицы.

В основном ширина устанавливается в пикселях или %

Tab1 { width:100%; } .tab2 { width:70%; } .tab3 { width:300px; }

Быстрый просмотр

CSS свойство height позволяет установить высоту таблицы. Высота в основном указывается в пикселях , но можно также использовать cm и em.

Tab1 { height:200px; } .tab2 { height:7cm; }

Быстрый просмотр

Оформление границ

Для оформления табличных границ в CSS используется свойство border .

Table, th, td { border-style:solid; border-color:green; border-width:1px; }

Быстрый просмотр

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

Свойство border-collapse

Таблица в примере выше имеет двойную границу, потому что и сама таблица и ее ячейки (элементы th и td) имеют собственные границы.

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

Table, th, td { border-style:solid; border-color:green; border-width:1px; border-collapse:collapse; }

Быстрый просмотр

Выравнивание табличного текста

С помощью свойства text-align Вы можете выравнивать текст табличных ячеек по горизонтали. Текст может быть выравнен:

• По левому краю (значение left)
• По правому краю (right)
• По центру (center)

Tab1 { text-align:right; } .tab2 { text-align:left; } .tab3 { text-align:center; }

Быстрый просмотр

С помощью свойства vertical-align Вы можете выравнивать текст табличных ячеек по вертикали. Текст может быть выравнен:

• По верхней границе (top)
• По центру (middle)
• По нижней границе (bottom)

Top { vertical-align:top; } .mid { vertical-align:middle; } .bot { vertical-align:bottom; }

Быстрый просмотр

Свойство padding

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

#tab1 td { padding:10px; } #tab2 td { padding:5px; } #tab3 td { padding:0px; }

Быстрый просмотр

Сделайте сами

Задание 1 повторите таблицу в редакторе:

Ширина таблицы равна 700 пикселей. Высота первой строки равна 70 пикселей. Границы таблицы и ячеек соединены.

Текст ячейки выравнен по верхнему краю	Текст ячейки выравнен по центру	Текст ячейки выравнен по нижнему краю	Текст ячейки выравнен по центру
Толщина границы этой ячейки равна 2 пикселя	Толщина границы этой ячейки равна 3 пикселя	Толщина границы этой ячейки равна 4 пикселя	Толщина границы этой ячейки равна 1 пиксель
Текст ячейки выравнен по левому краю	Текст ячейки выравнен по правому краю	Текст ячейки выравнен по центру

Включите JavaScript, чтобы воспользоваться

Цель урока: Знакомство со свойствами таблицы и с принципами табличной верстки CSS

Рассмотрим основные CSS свойства таблицы

border

Свойство рассматривается в одном и включает одновременно несколько свойств:

• BORDER-STYLE (СТИЛЬ ГРАНИЦЫ)
• BORDER-WIDTH (ШИРИНА ГРАНИЦЫ)
• BORDER-COLOR (ЦВЕТ ГРАНИЦЫ)

Существует также сборное правило:

table.collapse{ border-collapse:collapse; } table.separate{ border-collapse:separate; }

Результат:

width и height
(высота и ширина таблицы)

Значения:

Пример:

text-align
(выравнивание по горизонтали)

Значения:

• center (по центру)
• left (по левому краю)
• right (по правому краю)
• justify (по ширине)

vertical-align
(выравнивание по вертикали)

Значения:

• baseline (по базовой линии)
• sub (как подиндекс)
• super (как надиндекс)
• top (по верхнему краю)
• middle (посередине)
• bottom (по нижнему краю)
• % (от высоты межстрочного интервала)

Пример:

padding
(внутренние отступы в таблице)

background-color (задний фон)
color (цвет текста)

Табличная верстка CSS

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

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

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

Табличная верстка из двух колонок

Один из самых распространённых способов верстки — две колонки, т.е. страница делится на две части.

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

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

В таком случае необходимо задать общую ширину всей таблицы (тега table) в процентах через свойство width (100%), а для первой ячейки (тега td) установить ширину (также свойство width) в пикселах или процентах.

Пример: задать основной каркас страницы из двух колонок: первая — с фиксированным размером, вторая — на оставшуюся область браузера. Выполнить задание используя CSS стили ()

Выполнение:

</ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "right" > 2</ td > </ tr > </ table > ...

1

2

...

Результат:

Теперь попробуем визуально отделить две колонки таблицы друг от друга.

Пример: задать разный фон ячеек (чтобы разделить две колонки друг от друга) и установить расстояние между колонками (разделитель)

Выполнение:
Добавим новые свойства стилей:

/* для левой ячейки */ td#left{ width:200px; background: #ccc; border:1px solid black; /* временно обозначим границы */ } /* для правой ячейки */ td#right{ background: #fc3; border:1px solid black; /* временно обозначим границы */ } /* для разделителя */ #razdel{ width: 10px; /* Расстояние между колонками */ }

Все вместе:

</ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "razdel" > <td id = "right" > 2</ td > </ tr > </ table >

1

2

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

Разделитель между колонками можно также сделать менее выделяющимся. Для этого воспользуемся стилями границ.

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

Выполнение:
Добавим новые свойства границ для ячеек:

/* для левой ячейки */ td#left{ width:200px; background: #ccc; /* Цвет фона левой колонки */ /* новое */ border-right: 1px dashed #000; /* Параметры правой пунктирной границы */ }

Все вместе:

</ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "right" > 2</ td > </ tr > </ table >

1

2

Результат:

Табличная верстка из трех колонок

Существует понятие фиксированного или «резинового» макета верстки.

Фиксированный макет CSS

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

Пример: создать шаблон страницы из трех колонок. Использовать фиксированный макет табличной верстки:

• левая колонка — 150 пикселей;
• средняя колонка — 400 пикселей;

Выполнение:

</ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "central" > 2</ td > <td id = "right" > 3</ td > </ tr > </ table >

1

2

3

Результат:

Резиновый макет

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

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

Пример:

• левая колонка — 20%;
• средняя колонка — 40%;
• правая колонка — 40%;

Задать фон для колонок и визуально разделить колонки границей.

Выполнение:

</ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "central" > 2</ td > <td id = "right" > 3</ td > </ tr > </ table >

1

2

3

Результат:

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

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

• левая колонка — 150 пикселей;
• средняя колонка — 40%;
• правая колонка — 200 пикселей;

Задать фон для колонок и визуально разделить колонки границей.

Выполнение:

</ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "central" > 2</ td > <td id = "right" > 3</ td > </ tr > </ table >

1

2

3

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

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

Если ширина двух колонок устанавливается в процентах, а третьей - в пикселях, обойтись одной таблицей не получится . Так, если ширина всей таблицы равна 100 процентов, первой колонки - 200 пикселей, а оставшихся колонок по 20 процентов, то простое вычисление показывает, что размер первой колонки получается равным 60 процентов. В таком случае заданное значение в пикселях браузером не воспримется, а размер будет установлен в процентах.

• Исходная таблица создается с двумя ячейками. Ширина таблицы задается в процентах .
• Для левой ячейки (первой колонки) устанавливается ширина в пикселях .
• Ширина правой ячейки (основа для других колонок) не указывается . Внутрь этой ячейки вставляется вторая таблица, тоже состоящая из двух ячеек.
• У ячеек вложенной таблицы ширина устанавливается в процентах .
• Ширина внутренней таблицы должна быть установлена в 100 процентов , чтобы эта таблица занимала все свободное пространство во внешней таблице.
• Ширина центральной и правой колонки вычисляется относительно ширины ячейки, а не внешней таблицы в целом.

Пример: создать шаблон страницы из трех колонок. Использовать резиновый макет с вложенной таблицей:

• левая колонка — 150 пикселей;
• средняя колонка — 60%;
• правая колонка — 40%;

Задать фон для колонок.

Выполнение:

и (пример 4).

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

1 2 3 Атрибуты тегов cellpadding и cellspacing здесь необходимы, для того, чтобы не было «зазора» между таблицами. Результат: Многие веб мастера уверены, что использовать HTML таблицы в шаблонах - плохая практика. Но в данном уроке мы рассмотрим только таблицы CSS. Какая разница между таблицами HTML и CSS? Надо ли использовать таблицы CSS? Если да, то как? Как создать таблицу CSS Модель CSS таблиц основана на модели таблиц HTML4 и хорошо поддерживается браузерами. В обеих моделях структура таблицы существует параллельно визуальному представлению. Основными элементами структуры являются строки. Строка определяется явно, а столбцы зависят от того, как заданы строки и ячейки. Наверняка вы работали с таблицами HTML раньше. Если да, то у вас не будет проблем с созданием таблиц CSS. Каждый элемент таблицы HTML имеет эквивалент в CSS. Единственное отличие заключается в отсутствии отличий между td и th в варианте CSS. Ниже приводится список элементов таблиц HTML и соответствующие им значения CSS. Table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell } caption { display: table-caption } Подписи могут быть размещены сверху или снизу таблицы с помощью свойства caption-side: #caption {caption-side: top} #caption {caption-side: bottom} Несложно догадаться, как создать таблицу CSS опираясь на приведенный список. Вот пример таблицы. #table {display: table;} .row {display: table-row;} .cell {display: table-cell;} Если посмотреть на код HTML примера, то можно легко различить структуру таблицы (используются элементы div и span с классами и ID вместо table , td и tr). Совсем небольшой код CSS представляет элементы div и span в виде таблицы. В дополнение к выше приведенным свойствам модель таблицы CSS включает значение inline-table , которая определяет новую таблицу как и display: table , но в рамках контекста встроенного в HTML код формата. Столбцы и их группировка Так как ячейки таблицы являются потомками строк таблицы, то для формирования столбцов имеет смысл использовать некоторые свойства. Модель таблицы CSS позволяет применять следующие свойства для столбцов и их группировки: border — обычное свойство, пока свойство border-collapse не используется для элемента таблицы; background — обычное свойство, пока строка и ячейка имеют прозрачный фон; width — установка ширины столбца; visibility — если имеет значение collapse (единственное доступное значение), то ячейка столбца не будет выводиться (она объединяется с другими столбцами и ширина таблицы выравнивается). Стек таблицы CSS Различные элементы таблицы имеют разный уровень в стеке для обеспечения возможности использования разных фонов на разных слоях. Данные слои можно посмотреть на представленном рисунке. таблица - самый нижний слой группа столбцов столбцы группа строк строки ячейки - самый верхний слой Фон слоя будет виден только если выше лежащий слой имеет прозрачный фон. Это отличный способ для вывода пустых ячеек действительно пустыми с помощью использования прозрачного фона для них, через который будет видно строку, столбец или таблицу. Алгоритм шаблона таблицы Ширина таблицы CSS может быть вычислена с помощью одно из двух алгоритмов . Алгоритм выбирается с помощью свойства table-layout и двух значений: fixed (фиксированная) — ширина шаблона определяется не содержанием, а установкой ширины таблицы, ячеек, рамок и расстоянием между ячейками; auto (автоматическая)— ширина таблицы устанавливается исходя из ширины столбцов и рамок. Фиксированная модель шаблона вычисляется один раз и очень быстрая. А автоматический режим (используется по умолчанию) требует нескольких проходов по таблице HTML. Если вы явно определяете ширину таблицы, то следует использовать фиксированную модель расчета ширины. По умолчанию высота ячейки устанавливается минимально необходимой для вывода содержания. Но вы можете явно определить высоту ячейки. Все ячейки в строке будут иметь высоту ячейки с максимальным значением. Свойство vertical-align определяет выравнивание содержания в строке baseline bottom middle sub, super, text-top, text-bottom, <длина>, <процент> Последняя группа значений применяется не для ячеек, а для текста в них. Ячейки в данном случае будут выравниваться в соответствии со значением baseline . Рамки таблицы CSS Есть три интересных свойства для рамок таблиц: border-collapse — может иметь значения collapse , separate , или inherit border-spacing — может иметь значения <расстояние_по_горизонтали>, <расстояние_по_вертикали>, или inherit . Определяет дистанцию между рамками ячеек. empty-cells — может иметь значения show , hide , или inherit . Если ячейка пустая или имеет свойство visibility: hidden , то содержание не будет выводиться по умолчанию. Установка свойства empty-cells: show приведет к выводу фона и рамки для пустой ячейки. Нужно ли использовать таблицы CSS? Лучше ли таблицы CSS чем таблицы HTML? Если да, то в чем их преимущества? Если нет, то почему их не надо использовать? Хорошие вопросы, на которые нет однозначного ответа. Если рассмотреть использование таблиц HTML в сравнении с комбинацией элементов div и кода CSS, то выявляются следующие недостатки таблиц: Дополнительное кодирование — таблицы HTML требуют дополнительного кодирования структуры в сравнении с элементами div . Но и таблицы CSS требуют использования дополнительных классов и идентификаторов. Жесткая структура — таблицы HTML очень жестко привязаны к содержанию . Порядок ячеек должен быть таким, каким он будет выводиться. Но такое же ограничение накладывается и на таблицы CSS/ Вывод в браузерах — браузеры выполняют несколько проходов по структуре HTML таблиц. Но и для CSS таблиц ситуация будет аналогичной. В соответствии с выше сказанным у таблиц CSS нет существенных преимуществ перед таблицами HTML при использовании их в шаблонах. CSS таблицы являются более семантическим решением, так как имеется четкое разделение структуры данных и представления внешнего вида. Заключение Таблицы CSS достаточно просто освоить и использовать. Но они не имеют явных преимуществ перед таблицами HTML, за исключением более семантического кода. Может быть практика использования покажет преимущества или недостатки таблиц CSS. Есть ли у вас опыт использования таблиц CSS в реальных проектах? Таблицы являются широко используемым элементом для представления различных данных на презентациях, лекциях, в рекламных листовках и не только. Благодаря своей наглядности, универсальности и простоте таблицы также повсеместно применяют на сайтах, чтобы лучше донести до читателя нужный материал. Добавляя к таблицам всю мощь стилей можно весьма удачно вписать таблицы в дизайн сайта, наглядно и красиво представить табличные данные. Ширина таблицы По умолчанию ширина таблицы устанавливается браузером самостоятельно, исходя из объёма в ней табличных данных. Если текста в ячейках много, тогда таблица будет занимать всю доступную ей ширину, а если мало, то ширина таблицы автоматически уменьшится. При наличии на странице нескольких таблиц их разная ширина выглядит порой небрежно. Так что лучше явно задать ширину таблицы в процентах, пикселях, em или любых других единицах CSS, как показано в примере 1. Пример 1. Ширина таблицы в процентах Table { width: 100%; } .tbl-medium { width: 60%; } .tbl-small { width: 200px; } В данном примере ширина 100% применяется ко всем таблицам. Опять же, классы помогают установить ширину для выбранных таблиц задействуя ранее созданный класс. Чтобы указать таблице ширину в 200 пикселей надо добавить к элементу класс tbl-small . Выравнивание таблиц Исходно любая таблица располагается по левому краю окна браузера. Можно выровнять её по центру, если только таблица не занимает всю доступную область, другими словами, меньше 100%. Для этого к стилю таблицы следует добавить отступы через свойство margin со значением auto , как показано в примере 2. Пример 2. Выравнивание таблицы с помощью margin ... В данном примере для всех таблиц на странице задано выравнивание по центру. Цвет фона Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору table . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с table задать цвет у селектора td или th , то он и будет установлен в качестве фона (пример 3). Пример 3. Цвет фона Вид соединения Вал Втулка Свободное H9 D10 Нормальное N9 Is9 Плотное P9 Результат данного примера показан на рис. 1. Рис. 1. Изменение цвета фона Если нам требуется сделать зебру - так называется чередование строк разного цвета, то следует воспользоваться псевдоклассом :nth-child , добавляя его к селектору tr . Чтобы зебра распространялась только на тело таблицы, а не её заголовок, отделим их друг от друга с помощью элементов

Интервалы размеров, мм	Допуск IT, мкм, для квалитетов
	5	6	7	8
До 3	4	6	10	14
Св. 3 до 6	5	8	12	18
Св. 6 до 10	6	9	15	22
Св. 10 до 18	8	11	18	27
Св. 18 до 30	9	13	21	33
Св. 30 до 50	11	16	25	39
Св. 50 до 80	13	19	30	46

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

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

O	X	X
O	O	X
X	X	O

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

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

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

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

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

Вид соединения	Поля допусков ширины шпоночного паза
	Вал	Втулка
Свободное	H9	D10
Нормальное	N9	Is9
Плотное	P9

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

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

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

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

Заголовок 1	Ячейка 1	Ячейка 2
Заголовок 2	Ячейка 3	Ячейка 4

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

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

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

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

Вид соединения	Поля допусков ширины шпоночного паза
	Вал	Втулка
Свободное	H9	D10
Нормальное	N9	Is9
Плотное	P9

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

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

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

Разметка HTML

Стили CSS

table {
border-spacing: 0 10px;
font-family: "Open Sans", sans-serif;
font-weight: bold;
}
th {
padding: 10px 20px;
background: #56433D;
color: #F9C941;
border-right: 2px solid;
font-size: 0.9em;
}
th:first-child {
text-align: left;
}
th:last-child {
border-right: none;
}
td {
vertical-align: middle;
padding: 10px;
font-size: 14px;
text-align: center;
border-top: 2px solid #56433D;
border-bottom: 2px solid #56433D;
border-right: 2px solid #56433D;
}
td:first-child {
border-left: 2px solid #56433D;
border-right: none;
}
td:nth-child(2){
text-align: left;
}

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

Разметка HTML

Company	Q1	Q2	Q3	Q4
Microsoft	20.3	30.5	23.5	40.3
Google	50.2	40.63	45.23	39.3
Apple	25.4	30.2	33.3	36.7
IBM	20.4	15.6	22.3	29.3

Стили CSS

table {

font-size: 14px;
border-collapse: collapse;
text-align: center;
}
th, td:first-child {
background: #AFCDE7;
color: white;
padding: 10px 20px;
}
th, td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
td {
background: #D8E6F3;
}

text-align: left;
}

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

Разметка HTML
— аналогично с примером 2.

Стили CSS

table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
border-radius: 10px;
border-spacing: 0;
text-align: center;
}
th {
background: #BCEBDD;
color: white;
text-shadow: 0 1px 1px #2D2020;
padding: 10px 20px;
}
th, td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
th:first-child, td:first-child {
text-align: left;
}
th:first-child {

}
th:last-child {

border-right: none;
}
td {
padding: 10px 20px;
background: #F8E391;
}
tr:last-child td:first-child {
border-radius: 0 0 0 10px;
}
tr:last-child td:last-child {
border-radius: 0 0 10px 0;
}
tr td:last-child {
border-right: none;
}

4. Таблица с раздельными ячейками

Разметка HTML

— аналогично с примером 2.

Стили CSS

table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align: left;
border-collapse: separate;
border-spacing: 5px;
background: #ECE9E0;
color: #656665;
border: 16px solid #ECE9E0;
border-radius: 20px;
}
th {
font-size: 18px;
padding: 10px;
}
td {
background: #F5D7BF;
padding: 10px;
}

Разметка HTML

My working weeks, March 2015
Monday	Tuesday	Wednesday	Thursday	Friday
2	3	4	5	6
9	10	11	12	13
16	17	18	19	20
23	24	25	26	27
30	31

Стили CSS

table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align: center;
border-collapse: collapse;
border-spacing: 5px;
background: #E1E3E0;
border-radius: 20px;
}
th {
font-size: 22px;
font-weight: 300;
padding: 12px 10px;

color: #F56433;
}
tbody tr:nth-child(2) {
border-bottom: 2px solid #F56433;
}
td {
padding: 10px;
color: #8D8173;
}

Разметка HTML

Employee	Salary	Bonus	Supervisor
Stephen C. Cox	$300	$50	Bob
Josephin Tan	$150	—	Annie
Joyce Ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

Стили CSS

table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
text-align: left;
border-collapse: collapse;
border-radius: 20px;
box-shadow: 0 0 0 10px #F2906B;
color: #452F21;
}
th {
padding: 10px 8px;
background: white;
}
table th:first-child {
border-top-left-radius: 20px;
}
table th:last-child {
border-top-right-radius: 20px;
}
td {
border-top: 10px solid #F2906B;
padding: 8px;
background: white;
}
table td:first-child {
border-bottom-left-radius: 20px;
}
table td:last-child {
border-bottom-right-radius: 20px;
}

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

Разметка HTML

	Q1	Q2	Q3	Q4
Microsoft	20.3	30.5	23.5	40.3
Google	50.2	40.63	45.23	39.3
Apple	25.4	30.2	33.3	36.7
IBM	20.4	15.6	22.3	29.3

Стили CSS

table {
border-spacing: 0;
empty-cells: hide;
}
td {
padding: 10px 20px;
text-align: center;

transition: all 0.5s linear;
}
td:first-child {
text-align: left;
color: #3D3511;
font-weight: bold;
}
th {
padding: 10px 20px;
color: #3D3511;
border-bottom: 1px solid #F4EEE8;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
td:nth-child(even) {
background: #F6D27E;
}
td:nth-child(odd) {
background: #D1C7BF;
}
th:nth-child(even) {
background: #F6D27E;
}
th:nth-child(odd) {
background: #D1C7BF;
}
.round-top {
border-top-left-radius: 5px;
}
.round-bottom {
border-bottom-left-radius: 5px;
}
tr:hover td{
background: #D1C7BF;
font-weight: bold;
}

Разметка HTML

Стили CSS

table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
border-collapse: collapse;
color: #686461;
}
caption {
padding: 10px;
color: white;
background: #8FD4C1;
font-size: 18px;
text-align: left;
font-weight: bold;
}
th {
border-bottom: 3px solid #B9B29F;
padding: 10px;
text-align: left;
}
td {
padding: 10px;
}
tr:nth-child(odd) {
background: white;
}
tr:nth-child(even) {
background: #E8E6D1;
}

Разметка HTML

Comedy	Adventure	Action	Children
Scary Movie	Indiana Jones	The Punisher	Wall-E
Epic Movie	Star Wars	Bad Boys	Madagascar
Spartan	LOTR	Die Hard	Finding Nemo
Dr. Dolittle	The Mummy	300	A Bug"s Life

Стили CSS

Table_col {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
width: 660px;
background: white;
text-align: left;
border-collapse: collapse;
color: #3E4347;
}
.table_col th:first-child, .table_col td:first-child {
color: #F5F6F6;
border-left: none;
}
.table_col th {
font-weight: normal;
border-bottom: 2px solid #F5E1A6;


padding: 8px 10px;
}
.table_col td {
border-right: 20px solid white;
border-left: 20px solid white;
padding: 12px 10px;
color: #8b8e91;
}

Разметка HTML

Company	Q1	Q2	Q3	Q4
Microsoft	20.3	30.5	23.5	40.3
Google	50.2	40.63	45.23	39.3
Apple	25.4	30.2	33.3	36.7
IBM	20.4	15.6	22.3	29.3

Стили CSS

Table_blur {
background: #f5ffff;
border-collapse: collapse;
text-align: left;
}
.table_blur th {
border-top: 1px solid #777777;

box-shadow: inset 0 1px 0 #999999, inset 0 -1px 0 #999999;
background: linear-gradient(#9595b6, #5a567f);
color: white;
padding: 10px 15px;
position: relative;
}
.table_blur th:after {
content: "";
display: block;
position: absolute;
left: 0;
top: 25%;
height: 25%;
width: 100%;
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255,255,255,.08));
}
.table_blur tr:nth-child(odd) {
background: #ebf3f9;
}
.table_blur th:first-child {
border-left: 1px solid #777777;
border-bottom: 1px solid #777777;
box-shadow: inset 1px 1px 0 #999999, inset 0 -1px 0 #999999;
}
.table_blur th:last-child {
border-right: 1px solid #777777;
border-bottom: 1px solid #777777;
box-shadow: inset -1px 1px 0 #999999, inset 0 -1px 0 #999999;
}
.table_blur td {
border: 1px solid #e3eef7;
padding: 10px 15px;
position: relative;
transition: all 0.5s ease;
}
.table_blur tbody:hover td {
color: transparent;
text-shadow: 0 0 3px #a09f9d;
}
.table_blur tbody:hover tr:hover td {
color: #444444;
text-shadow: none;
}