| . Table, th, td { border: 1px solid black; }
Попробовать »
Теперь и таблица и ячейки имеют рамки, при этом и каждая ячейка и таблица имеют свои собственные рамки. В результате между рамками появилось пустое пространство, управлять размером этого пространства позволяет свойство border-spacing , которое задается для всей таблицы целиком. Другими словами, нельзя управлять промежутками между различными ячейками индивидуально.
Даже если убрать промежутки между ячейками с помощью значения 0 свойства border-spacing , то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse . Оно может принимать два значения:
- separate:
является значением по умолчанию. Ячейки отображаются на небольшом расстоянии друг от друга, каждая ячейка имеет свою собственную рамку.
- collapse:
соединяет соседние рамки в одну, все промежутки между ячейками, а также между ячейками и рамкой таблицы игнорируются.
Название документа
| Имя | Фамилия |
|---|
| Гомер | Симпсон |
| Мардж | Симпсон |
| Имя | Фамилия |
|---|
| Гомер | Симпсон |
| Мардж | Симпсон |
Попробовать »
Размер таблицы
После добавления рамок к ячейкам таблицы стало заметно, что содержимое ячеек слишком близко расположено к краям. Для добавления свободного пространства между краями ячеек и их содержимым можно воспользоваться свойством padding : Th, td { padding: 7px; }
Попробовать »
Размер таблицы зависит от ее содержимого, но часто возникают ситуации, когда таблица оказывается слишком узкой и появляется необходимость ее растянуть. Ширину и высоту таблицы можно изменять с помощью свойств width и height , задавая нужные размеры или самой таблице или ячейкам: Table { width: 70%; }
th { height: 50px; }
Попробовать »
Выравнивание текста
По умолчанию текст в заголовочных ячейках таблицы выравнивается по центру, а в обычных ячейках текст выровнен по левому краю, используя свойство text-align можно управлять выравниванием текста по горизонтали.
CSS свойство vertical-align позволяет управлять выравниванием текстового содержимого по вертикали. По умолчанию текст выровнен вертикально по центру ячеек. Вертикальное выравнивание можно переопределить с помощью одного из значений свойства vertical-align:
- top:
текст выравнивается по верхней границе ячейки
- middle:
выравнивает текст по центру (значение по умолчанию)
- bottom:
текст выравнивается по нижней границе ячейки
Название документа
| Имя | Фамилия |
|---|
| Гомер | Симпсон |
| Мардж | Симпсон |
Попробовать »
Чередование фонового цвета строк таблицы
При просмотре больших таблиц, содержащих много строк с большим количеством информации, бывает трудно отследить, какие данные относятся к конкретной строке. Чтобы помочь пользователям сориентироваться, можно использовать два разных фоновых цвета поочередно. Для создания описанного эффекта можно использовать селектор class , добавляя его к каждой второй строке таблицы:
Название документа
| Имя | Фамилия | Положение |
|---|
| Гомер | Симпсон | отец |
| Мардж | Симпсон | мать |
| Барт | Симпсон | сын |
| Лиза | Симпсон | дочь |
Попробовать »
Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс:nth-child , позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса:nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные): Tr:nth-child(odd) { background-color: #EAF2D3; }
Попробовать »
Изменение фона строки при наведении курсора
Еще одним способом повышения удобочитаемости табличных данных является изменение фонового цвета строки при наведении на нее курсора мыши. Это поможет выделить нужное содержимое таблицы и повысит визуальное восприятие данных.
Реализовать такой эффект очень просто, для этого нужно добавить псевдо-класс:hover к селектору строки таблицы и задать нужный цвет фона: Tr:hover { background-color: #E0E0FF; }
Попробовать »
Выравнивание таблицы по центру
Выравнивание HTML таблицы по центру возможно только в том случае, если ширина таблицы меньше, чем ширина её родительского элемента. Чтобы выровнять таблицу по центру, надо воспользоваться свойством margin , задав ему минимум два значения: первое значение будет отвечать за внешний отступ таблицы сверху и снизу, а второе - за автоматическое выравнивание по центру: Table { margin: 10px auto; }
Попробовать »
Если вам нужны разные отступы сверху и снизу таблицы, то можно задать свойству margin три значения: первое будет отвечать за отступ сверху, второе за выравнивание по горизонтали, а третье за отступ снизу: Table { margin: 10px auto 30px; }
Оформление таблиц с помощью CSS - занятие интересное и ответственное. Подходить к этому делу нужно грамотно, со знанием всех возможностей стилей. Помимо этого, нужно владеть чувством прекрасного, чтобы не отпугивать своим творчеством посетителей сайта. В таблицах можно преобразить практически всё. Красивое оформление таблиц CSS подразумевает использование оформления границ, фона таблицы, фона ячеек, промежутка между ними и многого другого. Рассмотрим самое основное. Граница таблицыСтиль оформления таблицы CSS всегда подразумевает игру с границей (рамкой). Все таблицы по умолчанию не обводятся рамкой. То есть она равна 0 пикселям. Но это можно исправить при помощи свойства border. Можно указать внешнюю рамку для всей таблицы: table { border: 3px solid black; } Благодаря этой строчке у всех таблиц на сайте, где используется этот стиль, будет черная рамка. Обратите внимание, что граница только по краям, но не внутри таблицы. Для ячеек и строк рамка задается иначе. th, td {border: 3px solid black;} Толщину и цвет можно указать любые. Имейте в виду, что границы не удваиваются при стыковании ячеек. Слово solid обозначает сплошное оформление. Указывать можно и другие значения. Чаще всего используется именно сплошная рамка, поскольку она смотрится более привлекательно и не отвлекает внимания от основного контента сайта. Свойство border можно указывать еще и по направлениям. Границу можно задавать только для верхней, нижней, левой или правой части. Поскольку в некоторых случаях не подходит вариант с рамкой для всей таблицы сразу. table {border-top: 1px solid red; } Так можно задать рамку только для верхней части таблицы. Аналогично и для любых других сторон, просто вместо top пишем: right, left или bottom. Заголовок таблицыЗаголовок таблицы можно указать при помощи тега . У этого тега можно в CSS прописать много свойств для более тонкой настройки. В CSS оформление таблиц хорошо тем, что можно маневрировать элементами так, как вы хотите.Этот заголовок отображается так же, как стандартно в книгах (например "Таблица 1"). 
Указать можно и расположение этого заголовка свойством caption-side (top или bottom). Выравнивание слева или справа задается свойством text-align. Фон таблицыФоном таблицы может быть какой-нибудь цвет или рисунок. Цвет задается свойством background-color. Названия свойств полностью соответствуют употребляющимся в речи. Это облегчает запоминание во много раз. Цвет можно указывать как названием, так и различными кодировками. Кроме этого, можно указать следующее: - Transparent - прозрачность элемента.
- Inherit - цвет такой же, как и у родительского элемента.
- Initial - значение по умолчанию.
Вариант с прозрачностью использовать можно в тех случаях, когда все таблицы в тексте в CSS файле оформляются одним цветом, но в данном случае такой необходимости нет. Кроме этого, фоном может быть изображение. Для этого в стиле прописывается свойство background-image. Путь указывается вот так: Путь до файла может быть как относительным, так и абсолютным. Более сложную заливку можно делать градиентом: - linear-gradient();
- radial-gradient();
- repeating-linear-gradient() и repeating-radial-gradient() - повтор градиента.
Фон ячеекКроме фона в целом, можно задать чередующийся фон в столбцах или строках. Для оформления это свойство используется очень часто, поскольку визуальное разделение строк облегчает чтение информации. Кроме чередования, можно указывать и номер конкретного столбца или строки. Например вот так: - tr:nth-child (even) { ... } - указание чередования строк;
- tr:nth-child (1) { ... } - указание свойства конкретной строки;
- td:nth-child (even) { ... } - указание чередования столбцов;
- td:nth-child (1) { ... } - указание свойства конкретного столбца.
Кроме чередования и номеров, можно указывать - первый (td:first-child) или последний (td:last-child). Промежуток между ячейкамиВ CSS оформление таблиц позволяет убрать промежутки между ячейками. По умолчанию они есть. Например, если задать рамку в таблице без настроек расстояния между границами, то будет вот такой результат. 
Согласитесь, выглядит не очень красиво и не удобно для чтения. У пользователей будет в глазах рябить из-за этого. Убрать эти промежутки можно, прописав в стиле таблицы вот такую строчку: border-collapse: collapse Но бывает и так, что расстояние, наоборот, нужно увеличить. Причем размер промежутков можно указать как между столбцами, так и между строками. Для этого указываем следующее значение (вместо collapse): border-collapse:separate Но таким действием будет указано, что нужно разделять ячейки. Как именно их разделять, указывается дополнительным свойством: border-spacing: 20px. Если нужно указать разное расстояние между строками и колонами, то указывается два значения: border-spacing:10px20px. 
Разница в браузерахИмейте ввиду, что в CSS оформление таблиц может выглядеть по-разному, в зависимости от браузера. Особенно плохо обстоит дело со старыми версиями, которые новшества в CSS не поддерживают. 
Выше приведен пример толщины рамки для цифровых значений. 
Стили рамок также сильно отличаются. Поэтому при разработке всегда смотрите результат в разных браузерах. 
Совсем продвинутые разработчики могут в зависимости от браузера подключать совершенно разные CSS файлы. А кто-то делает проверки в каждом или каком-нибудь конкретном стиле (классе). Больше всего проблем возникает с тенями. CSS: оформление таблиц, примеры
Оформление может быть самым разнообразным. Всё зависит от сайта в целом и его дизайна. Всё должно сочетаться и не пестрить цветами. Также большую роль вносит и вкус разработчика. Чувство прекрасного у всех разное. Приведем примеры различных таблиц. На рисунке выше показано использование наклона и игра с и границ. 
Многим будет интересен пример красивого аккуратного оформления, которое не будет резать глаза пользователям. Такой вариант уместен практически в любой ситуации. 
Края можно делать скругленными. Смотрится довольно красиво. ЗаключениеКак видите, для оформления внешнего вида таблиц в CSS существует огромное количество инструментов. У каждого параметра также огромное количество вариантов значений. Если пользоваться всем этим сразу, можно создавать шедевры. Особенно если делать под все браузеры. Главное при оформлении - не переборщить с эффектами. Всё нужно делать в меру. На первых порах верстальщики любят экспериментировать и используют сразу все свои знания. В итоге таблицы оказываются перенасыщенными свойствами. Старайтесь избегать этих ошибок. Более того, некоторые параметры могут мешать друг другу. Например, незачем указывать цвет фона таблицы, если при этом еще там установлен фоновый рисунок, который будет перекрывать указанный цвет.
| 