Помощь css: улучшение вида таблицы
Перечисленные выше элементы и атрибуты — это все, что требуется для кодирования хорошей таблицы данных. Теперь, когда имеется структура HTML, давайте рассмотрим несколько простых применений CSS для улучшения вида таблицы:
body {
background: #ffffff;
margin: 0;
padding: 20px;
line-height: 1.4em;
font-family: tahoma, arial, sans-serif;
font-size: 62.5%;
}
table {
width: 80%;
margin: 0;
background: #FFFFFF;
border: 1px solid #333333;
border-collapse: collapse;
}
td, th {
border-bottom: 1px solid #333333;
padding: 6px 16px;
text-align: left;
}
th {
background: #EEEEEE;
}
caption {
background: #E0E0E0;
margin: 0;
border: 1px solid #333333;
border-bottom: none;
padding: 6px 16px;
font-weight: bold;
}
Листинг 19.b. Применение CSS для улучшения вида таблицы (html, txt)
После применении этого кода CSS к окончательной разметке таблица выглядит как показано на рисунке 19.1.
Рис. 19.1. Таблица выглядит теперь визуально значительно привлекательнее
Теперь она выглядит значительно лучше. Можно выбрать любое стилевое оформление таблицы, но приведенное выше предоставляет основу для дальнейшей работы. Вы узнаете значительно больше об оформлении таблиц с помощью CSS в будущей лекции, но пока кратко укажем, что делает каждый раздел этого кода CSS:
body: В приведенном выше коде CSS, добавлены свойства для задания полей (нулевых в этом случае), заполнение для создания небольшого свободного пространства, цвета фона (белый), размера и семейства шрифта, а также высоты строки, чтобы создать дополнительное пространство. Код этого примера можно загрузить здесь (http://dev.opera.com/articles/view/19-html-tables/csstable.zip) - попробуйте изменить свойства в файле CSS, чтобы посмотреть, как изменится представление.
table: Были добавлены границы с помощью объявления CSS. Чтобы это работало правильно, мне также пришлось задать для свойства border-collapse значение collapse, чтобы сбросить значения границы в таблице и позволить border-bottom быть сплошной линейкой вдоль всей строки, а не разрываться в конце каждой ячейки. Я выбрала ширину 80% для этого примера (это растягивает таблицу на 80% ширины экрана; таблица будет изменять ширину в соответствии с любым сделанным изменением ширины окна браузера).
th и td: В приведенном выше примере CSS, выравнивание текста задано слева, но можно задать его по центру, или даже задать различным элементам th и td имена классов, а затем использовать CSS для получения дополнительного контроля над каждой строкой или столбцом (в случае строки нужно будет задать тегу элемента tr имя класса). Я также добавила в оба элемента th и td немного заполнения, чтобы открыть строки и обеспечить большую удобочитаемость. В случае селектора th выше, я задала другой цвет, чтобы выделить заголовки относительно остальной таблицы.
caption: Если свойства CSS для селектора caption не заданы, то он не имеет границы и имеет тот же цвет фона, что и вся страница, даже хотя разметка HTML для заголовка находится в теге table. Потому в примере выше для заголовка задана граница (без нижней границы, так как граница таблицы уже создает ее), другой цвет фона и жирный шрифт, чтобы выделить заголовок относительно строки верхнего колонтитула таблицы.