По Р. Christie
Tables попал в один из самых сложных объектов для стиля в Web, благодаря загадочным разметки, количество деталей, мы должны заботиться, и отсутствие совместимости браузера.Много времени может быть потрачено на одну таблицу, хотя it’ всего лишь простой.Это где эта статья пригодится.Он покажет вам десятку наиболее легко реализуется CSS таблицы конструкции, чтобы вы могли стиля таблицы в Зап !
Первые вещи first
Начнем с Valid XHTML 1.0 strict разметку.Вот пример правильного разметку таблицы:
<!-- Table markup--> <table id="..."> <!-- Table header --> <thead> <tr> <th scope="col" id="...">...</th> ... </tr> </thead> <!-- Table footer --> <tfoot> <tr> <td>...</td> </tr> </tfoot> <!-- Table body --> <tbody> <tr> <td>...</td> ... </tr> ... </tbody> </table>
Вы можете прочитать больше о XHTML таблицы разметки HTML Dog’ с Таблица Section.Я испытал приведенных ниже таблицах в Mozilla Firefox 3, IE 6 и 7, Opera 9.x и Safari.Отметим также, что я применяю светло-голубой цветовой схемы на все эти таблицы, чтобы статья согласованный вид.Вы можете изменить цветовую схему, соответствующую Вашим сайтом — источник package представлен в конце article.
Прежде чем мы начнем, let’ S обзор общее правило для оформления таблиц:
- Столы любят space.Установите ширину таблицы тщательно, в соответствии с содержанием.Если вы don’ знаю идеального ширину, просто установите
widthвtableдо100%.Таблицы выглядеть лучше, когда они имеют “ overwidth”, и когда дело доходит до таблицы слишком много ширину, безусловно, лучше, чем слишком мало width. - Клетки нужны padding.Конечно, для каждой ячейки таблицы относятся друг к другу.Но это doesn’ означает, что мы должны вытащить их слишком близко, не так ли?Определим некоторое пространство между клетками, забиты ячейки таблицы так гораздо труднее read.
- столы Лечить, как вы относитесь content.Таблицы читаются аналогично тому, как мы читаем текст — кроме it’ S труднее и это занимает больше времени, чтобы прочитать таблицу.Так что будьте осторожны с количеством контрастного вы даете вашему столу.Используйте мягкие тона — it’ легче для глаз.Don’ T лечения вашего стола, как it’ SA графического оформления.Убедитесь, что стиль, который вы примените к нему делает содержание более удобным для чтения, а не наоборот around.
Теперь, когда мы все настроено let’ S начать, не так ли?
1.Горизонтальная Minimalist
Горизонтальные таблицы таблицами, которые читали, а по горизонтали, чем по вертикали.Каждый объект представлен ряд.Вы можете стиле этих типов таблиц с минималистским стилем.Просто установите достаточно padding в клетках (tdи th) и положить 2 пикселя границу под header.
| Employee | Salary | Bonus | Supervisor |
|---|---|---|---|
| Stephen C. Cox | $ 300 | $ 50 | Bob |
| Josephin Tan | $ 150 | - | Annie |
| Джойс Ming | $ 200 | $ 35 | Andy |
| Джеймс А. Pentel | $ 175 | $ 25 | Annie |
Потому что горизонтальные таблицы должны быть отсканированы horizontally, очищая границу таблицы повышает эффективность таблице.Отсутствие границ, однако, делает эту таблицу дизайн трудно читать, если она имеет слишком много строк.Для борьбы с ним мы просто добавляем 1 пиксель границу под всем td элементы:
| Employee | Salary | Bonus | Supervisor |
|---|---|---|---|
| Stephen C. Cox | $ 300 | $ 50 | Bob |
| Josephin Tan | $ 150 | - | Annie |
| Джойс Ming | $ 200 | $ 35 | Andy |
| Джеймс А. Pentel | $ 175 | $ 25 | Annie |
tr:hover правила очень полезны, чтобы помочь людям, читающим минимально предназначены таблицы.Когда курсор мыши находится над ячейкой, остальные ячейки в той же строке сразу же подчеркивает, что делает его легче отслеживать вещи, если ваши таблицы имеют множественные columns.
- Важные !
- Осторожно настройки параметров типографии и заполнения между cells
- Pros
- Очень легкий стиль, хорошо для простого tables
- Cons
-
tr:hoverправила don’ T работа в IE 6, таблица может ввести в заблуждение, если она имеет слишком много columns - Играть with
- Цветовая схема, типографика,
tr:hovereffects
2.Вертикальная Minimalist
Хотя редко, вертикально ориентированные таблицы полезны для категоризации или сравнением описания объектов, причем каждый объект представлен колонки.Мы можем стиля его в минималистском стиле, добавив пробел разделители между columns.
| Comedy | Adventure | Action | Children |
|---|---|---|---|
| Страшные Movie | Индиана Jones | Punisher | Wall-E |
| Эпические Movie | Star Wars | Bad Boys | Madagascar |
| Spartan | LOTR | Die Hard | Поиск Nemo |
| Доктор Dolittle | Mummy | 300 | Bug’ S Life |
Добавить большая border-left и border-right с тем жецвет в качестве фона.Вы можете использовать прозрачные границы, если вы хотите, но IE 6 винтов все это.Так как эта таблица должна быть прочитана сверху вниз (по вертикали), добавив tr:hover не помогают, а вместо этого делает его труднее для чтения данных.Существует, возможно, Javascript на основе решения, которое позволяет выделить весь столбец, когда mouseover события, но that’ S выходит за рамки этой article.
- Важно !
- Осторожно настройки параметров типографии и отступы между клетками, не добавляют
tr:hovereffect - Pros
- Легкий стиль, хорошо для простого tables
- Cons
- Не может быть использована, если фон не сплошной блок цвета, подходит только для некоторых tables
- Играть With
- Цветовая схема и typography
3.Box
Самые надежные из всех стилей, коробка стиль подходит для всех видов таблиц.Возьмите хорошую цветовую схему, а затем распространить background-color для всех ячеек.Don’ забывайте, чтобы подчеркнуть различия каждой клетки, определив border в качестве разделителя.Пример таблицы стилей окно следующей таблице:
| Employee | Salary | Bonus | Supervisor |
|---|---|---|---|
| Stephen C. Cox | $ 300 | $ 50 | Bob |
| Josephin Tan | $ 150 | - | Annie |
| Джойс Ming | $ 200 | $ 35 | Andy |
| Джеймс А. Pentel | $ 175 | $ 25 | Annie |
| Comedy | Adventure | Action | Children |
|---|---|---|---|
| Страшные Movie | Индиана Jones | Punisher | Wall-E |
| Эпические Movie | Star Wars | Bad Boys | Madagascar |
| Spartan | LOTR | Die Hard | Поиск Nemo |
| Доктор Dolittle | Mummy | 300 | Bug’ S Life |
Этот стиль сегодня является, вероятно, наиболее часто используемых стилей.Сложная часть на самом деле пытается найти цветовую схему, которая соответствует с вашего сайта.Если ваш сайт является тяжелым на графике, это будет довольно трудно использовать эту style.
- Важно !
- Выберите цветовую схему, которая соответствует с вашим site
- Pros
- Легкий стиль, гибкий для больших и малых tables
- Cons
- Выбор идеальный цветовой схемы может быть tricky
- Играть with
- Цвета и границ, использовать
dashedилиdottedдля достижения эффекта милый, типографии, icons
4.Горизонтальная Zebra
Zebra-таблицы довольно привлекательной и полезной.Переменным цветом фона может служить в качестве визуального сигнала для людей, при сканировании таблицы.Для стиля таблицы, как зебра, просто положить class="odd" каждого четного приказал tr теги и определить стиль для него (например, с использованием, если ($ кол-во% 2), то даже class другое нечетным class вPHP)
... <tr class="odd"> <td>...</td> ... </tr> <tr> <td>...</td> ... </tr> ...
| Employee | Salary | Bonus | Supervisor |
|---|---|---|---|
| Stephen C. Cox | $ 300 | $ 50 | Bob |
| Josephin Tan | $ 150 | - | Annie |
| Джойс Ming | $ 200 | $ 35 | Andy |
| Джеймс А. Pentel | $ 175 | $ 25 | Annie |
- Важно!
- Не кладите слишком много контраста на цвета зебры, вы можете слепой вашего users
- Pros
- Зебра может помочь людям, чтобы сканировать table
- Cons
- Добавление
class="odd"вручную может быть очень утомительным для больших таблиц, многие системы управления контентом не обеспечивает even/odd особенностей на столе петли, следовательно, выбор цветовой схемы может быть tricky - Играть With
- Контрастный цвет, границы, типографии, icons
5.Вертикальная Zebra Style
Вертикальные зебры легче стиле, чем горизонтальная, как мы можем использовать colgroup и col элементы для распространения колонке классов.Тем не менее, разметка становится немного тяжелее:
<table> <!-- Colgroup --> <colgroup> <col class="vzebra-odd"> <col class="vzebra-even"> <col class="vzebra-odd"> <col class="vzebra-even"> </colgroup> <!-- Table header --> <thead> <tr> <th scope="col" id="vzebra-comedy">Employee</th> ... </tr> </thead> ... </table>
colgroup элемент на самом деле относится стиля или класса к столу, столбцам.Вместо утомительного применением class за первые td или th элемент, мы можем использовать более удобные colgroup-тегов.Для получения дополнительной информации о colgroup Визит этом page.