Заполнение
Теперь, когда ячейки имеют границы, может быть полезно добавить свободное пространство в заголовок и ячейки таблицы. Для этого используется заполнение (padding).
table {
width: 100%;
border: 1px solid #000;
}
th, td {
width: 25%;
text-align: left;
vertical-align: top;
border: 1px solid #000;
border-collapse: collapse;
padding: 0.3em;
}
caption {
padding: 0.3em;
}
Это позволяет тексту "вздохнуть" немного свободнее, как показано на рис. 33.7:
Рис. 33.7. Таблица с заполнением, добавленным во все ячейки
Размещение заголовка таблицы
До сих пор заголовок таблицы размещался вверху таблицы. Однако можно переместить заголовок таблицы в другое место. К сожалению, это невозможно сделать в браузере IE, но для всех других браузеров можно изменить положение заголовка таблицы с помощью свойства caption-side. Вариантами размещения являются top, bottom, left и right (вверху, внизу, слева, справа). Давайте переместим заголовок таблицы вниз:
table {
width: 100%;
border: 1px solid #000;
}
th, td {
width: 25%;
text-align: left;
vertical-align: top;
border: 1px solid #000;
border-collapse: collapse;
padding: 0.3em;
caption-side: bottom;
}
caption {
padding: 0.3em;
}
рис. 33.8 показывает результат.
Рис. 33.8. Таблица с заголовком, перемещенным вниз таблицы
Если вы захотите переместить заголовок таблицы, помните, что любые стили side-specific не будут работать в браузере IE. Например, если добавляется три границы, чтобы "присоединить" заголовок таблицы снизу таблицы, то в браузере IE желаемый результат не получится, так как заголовок будет по-прежнему находиться вверху. Нужно будет использовать условные комментарии (http://dev.opera.com/articles/view/supporting-ie-with-conditional-comments/), чтобы переоформить таблицу для IE. Смотрите также подробнее позже в разделе "Исправление IE с помощью условных стилей".
В остальных рассматриваемых примерах заголовок таблицы остается вверху.
Фон
Еще одним простым способом оформления таблиц является добавление цвета фона и изображений. Это делается с помощью свойства background, хотя нужно помнить, что различные части таблицы будут "наслаиваться" друг на друга. Спецификация CSS2 подробно объясняет слои фона (http://www.w3.org/TR/REC-CSS2/tables.html#table-layers), однако краткая версия состоит в том, что фон будет переопределять друг друга в следующем порядке:
таблица (которая определяет "низ" или " основу")
группы столбцов
столбцы
группы строк
строки
ячейки ("верх" или "фронтальный", их фон переопределяет все другие)
Поэтому, если задается фон для таблицы и другой цвет для ячеек, фон ячейки будет закрывать фон таблицы. Если для границ задано collapse, то фон таблицы вообще не будет виден. Однако если border-collapse задано как separate, фон таблицы будет просвечивать между границами.
Отметим,
что концепция различных элементов,
располагающихся один поверх другого
на странице, является управляемой; вы
можете управлять, насколько высоко или
низко в "стеке" находится элемент
относительно других элементов, изменяя
его свойство z-index.
Свойство z-index
будет рассмотрено дополнительно в
статье 37.
Предположим, что для таблицы задан красный фон, а для ячеек белый. Разделенные ячейки будут показывать красный фон таблицы, но ячейки будут оставаться белыми, как показано на рис. 33.9:
Рис. 33.9. Красный фон элемента таблицы просвечивает между белыми элементами ячеек
Можно также использовать фоновое изображение. Например, если вы хотите иметь градиент цвета, просвечивающий между ячеек, можно задать белый фон ячеек th и td, а фон таблицы задать как градиент цвета:
table {
border-collapse: separate;
border-spacing: 5px;
background: #000 url("gradient.gif") bottom left repeat-x;
color: #fff;
}
td, th {
background: #fff;
color: #000;
}
Отметим, что для фона задан черный цвет, который будет заполнять пространство вверху, где заканчивается изображение градиента (вы должны всегда предусматривать, чтобы таблица была больше по высоте фонового изображения). Цвет переднего плана задается белым, чтобы эти цвета по умолчанию всегда просвечивали через контент ячейки. Обычно, оформление ячеек будет переопределять настройки цвета текста из таблицы стилей table {}, но нужно всегда объявлять контрастные цвета фона и переднего плана на каждом уровне.
Эти стили оформления создают таблицу, которая будет выглядеть как на рис. 33.10 в большинстве браузеров:
Рис. 33.10. Таблица, демонстрирующая градиентное фоновое изображение, просвечивающее между ячейками
По умолчанию браузер IE не покажет фоновое изображение в такой же степени, так как он не поддерживает свойство border-spacing. Однако вы получите, тем не менее, такой же общий результат, как показано на рис. 33.11.
Рис. 33.11. Браузер IE выводит между границами пробел меньшей величины
В зависимости от обстоятельств вы можете быть вполне удовлетворены этим различием изображений в браузерах. Конечно, это не всегда возможно, например, когда клиент хочет, в частности, чтобы дизайн выглядел одинаково во всех браузерах.
|
Исправление IE с помощью условных стилей Существует способ обхода указанных выше проблем браузера IE. Он требует некоторой хитрости и дополнительной таблицы стилей, но он работает. Можно использовать expression для создания более широкого пробела, а затем загрузить это выражение с помощью условных комментариев. Синтаксис выражения имеет следующий вид: table { border-collapse: expression("separate", cellSpacing = "5px"); } Этот код CSS будет полезен только для IE, поэтому мы хотим, чтобы он применялся только в IE. Это выражение будет также делать недействительной таблицу стилей, поэтому многие разработчики предпочитают изолировать вставку для IE в отдельной таблице стилей, загружаемой только в IE. Для этого создаем новую таблицу стилей с именем ie-only.css и присоединяем ее в условном комментарии: <!--[if lte IE 7]><link rel="stylesheet" media="screen" href="ie-only.css"/><![endif]-->
Отметим, что [if lte IE 7] означает "если меньше или равно IE версии 7". Это условие открывает код для браузера IE7 и более ранних версий IE, в то время как окружающий комментарий HTML скрывает код от всех остальных браузеров. Можно настроить это выражение в соответствии с требуемой версией IE, например, для версии IE6 и более ранних используйте [if the IE 6] . В основной таблице стилей задайте нормальный стиль:
table { border: 1px solid #000; border-collapse: separate; border-spacing: 5px; background: #000 url("gradient.gif") bottom left repeat-x; } И затем установите стиль для IE в ie-only.css: table { border-collapse: expression(""separate", cellSpacing = "5px"); } Это заставит IE создать таблицу с более широким интервалом между ячейками. Необходимо только не забывать поддерживать дополнительные настройки ширины - если изменяется основная таблица стилей, нужно будет изменить также ie-only.css. Очевидно, что условные комментарии позволяют делать значительно больше, чем только оформлять таблицы, так как дополнительная таблица стилей может содержать весь код CSS, который нужен для исправления ошибок IE. Простой дизайн Большинство дизайнерских решений используют относительно простые комбинации фоновых цветов. Давайте зададим для заголовков столбцов таблицы серый фон, а заголовок таблицы представим белым текстом на черном фоне:
table { width: 100%; border: 1px solid #000; }
th, td { width: 25%; text-align: left; vertical-align: top; border: 1px solid #000; border-collapse: collapse; padding: 0.3em; caption-side: bottom; }
caption { padding: 0.3em; color: #fff; background: #000; }
th { background: #eee; } Полученный результат выглядит как на рис. 33.12:
Рис. 33.12. Таблица с негативным белым на черном заголовком таблицы и светло-серым фоном для ячеек заголовков столбцов таблицы Распространенные варианты использования В этом разделе мы рассмотрим несколько распространенных дизайнерских решений, которые постоянно встречаются в таблицах Web. Разметка зебра Широко используемым вариантом дизайна для таблиц является создание строк с альтернативными цветами. Это обычно называют "разметкой зебры". Хотя и существуют какие-то сомнения в отношении того, насколько разметка зебры действительно помогает читателю (http://www.alistapart.com/articles/zebrastripingdoesithelp), она является популярным стилем оформления. рис. 33.13 показывает пример:
Рис. 33.13. Таблица с "разметкой зебры", поочередно задающая строки с белым и светло-серым фоном Проще всего реализация разметки зебры делается добавлением класса для чередования строк таблицы, а затем использованием контекстного селектора CSS для оформления ячеек в этих строках. Прежде всего, в строки таблицы добавляются следующим образом классы "odd" и "even": ... <tr class="odd"> ... <tr class="even"> ... Можно пропустить строку заголовков столбцов, так как она имеет свой собственный стиль оформления. Затем добавляется контекстный класс для задания фона всех ячеек в строках класса odd: .odd th, .odd td { background: #eee; } Это простейший способ добавить разметку зебры в таблицу HTML, который будет работать для всех браузеров, но он имеет недостатки - что если вы добавите в таблицу строку? Тогда потребуется перемещать все имена классов odd и even, чтобы все снова выглядело правильно. Существует два других варианта:
Дополнительно о разметке зебры с помощью селектора nth-child смотрите в специальной статье на сайте dev.opera.com (http://dev.opera.com/articles/view/zebra-striping-tables-with-css3/).
|
|
|
|
Неполные сетки Для некоторых решений хорошо подходят менее структурированные, более открытые сетки. Простым вариантом является удаление вертикальных границ и удаление заливки фона заголовка таблицы, как показано на рис. 33.14:
Рис. 33.14. Таблица со светло-серыми границами только на внешних краях и по нижнему краю каждой ячейки Код CSS для этого представления имеет вид:
table { width: 100%; border: 1px solid #999; text-align: left; border-collapse: collapse; margin: 0 0 1em 0; caption-side: top; }
caption, td, th { padding: 0.3em; }
th, td { border-bottom: 1px solid #999; width: 25%; }
caption { font-weight: bold; font-style: italic; } Можно сделать еще один шаг и удалить все границы, за исключением верхней и нижней границы, чтобы определить тело таблицы - см. рис. 33.15:
Рис. 33.15. Таблица с границами только по верху и низу тела таблицы Код CSS для такой таблицы будет следующим:
table { width: 100%; text-align: left; border-collapse: collapse; margin: 0 0 1em 0; caption-side: top; }
caption, td, th { padding: 0.3em; }
tbody { border-top: 1px solid #000; border-bottom: 1px solid #000; }
tbody th, tfoot th { border: 0; }
th.name { width: 25%; }
th.location { width: 20%; }
th.lasteruption { width: 30%; }
th.eruptiontype { width: 25%; }
tfoot { text-align: center; color: #555; font-size: 0.8em; } Внутренние границы Иногда желательно удалить внешнюю границу, но сохранить внутреннюю сетку границ, как на рис. 33.16:
Рис. 33.16. Таблица с внутренней сеткой Чтобы реализовать это для всех современных браузеров, необходимо добавить класс в ячейки th и td, которые появляются последними в каждой строке, следующим образом: ... <tr> <th scope="col">Volcano Name</th> <th scope="col">Location</th> <th scope="col">Last Major Eruption</th> <th scope="col" class="last">Type of Eruption</th> </tr> ... Затем мы используем этот класс для удаления правой границы из этих ячеек. Полный код CSS будет иметь вид: table { width: 100%; text-align: left; border-collapse: collapse; margin: 0 0 1em 0; caption-side: top; } caption, td, th { padding: 0.3em; } th, td { border-bottom: 1px solid #000; border-right: 1px solid #000; } th.last, td.last { border-right: 0; } tfoot th, tfoot td { border-bottom: 0; text-align: center; } th { width: 25%; } Внутренние сетки использующие :lastchild Когда поддержка в браузерах улучшится, мы сможем использовать псевдо-селектор :lastchild для достижения этого результата без классов. Код CSS будет следующим: table { width: 100%; text-align: left; border-collapse: collapse; margin: 0 0 1em 0; caption-side: top; }
caption, td, th { padding: 0.3em; } th, td { border-bottom: 1px solid #000; border-right: 1px solid #000; } th:lastchild, td:lastchild { border-right: 0; } th { width: 25%; } Это работает в настоящее время в последних версиях браузеров Opera, Firefox и Safari.
|
|
|
|
|
