Хотя линии между ячейками позволяют четко отделить одни данные от других, ту же самую функцию выполняет и пустое пространство вокруг текста. А чтобы таблица выделялась на веб-страницы, для нее устанавливают определенный цвет фона. Заголовок при этом допустимо задать другого цвета, как показано на рис. 1.
Рис. 1. Вид таблицы без рамки
Для изменения цвета фона таблицы используем свойство background , добавляя его к селектору TABLE . Для красоты внизу таблицы рисуем линию с помощью свойства border-bottom (пример 1).
Пример 1. Создание таблицы без рамки
Поскольку содержимое тега
исходно выравнивается по центру, то для изменения этой характеристики в данном примере применяется стилевое свойство text-align со значением left . Можно поступить наоборот и задать выравнивание по центру для ячеек
| . Но содержимое первой колонки с названиями камней лучше оставить выровненным по левому краю. Чтобы установить для разных колонок различное выравнивание содержимого рассмотрим два способа.
Первый метод заключается в использовании тега , он добавляется в контейнер
и устанавливает, в частности, выравнивание для отдельных колонок (пример 2).
Пример 2. Выравнивание с помощью тега
Атрибут align тега указывает, по какой стороне выравнивать ячейки колонки, а span определяет число колонок, к которым будут применяться заданные параметры. Если этот атрибут отсутствует, то тег работает только для одной колонки.
Выравнивание содержимого колонок с помощью тега работает в браузере Internet Explorer и не действует в браузере Firefox и некоторых других.
Второй метод универсальный, работает во всех браузерах и основан на добавлении отдельного класса для определенных ячеек.
Создаем стилевой класс, например, с именем jewel и применяем его к ячейкам левой колонки (пример 3).
Пример 3. Выравнивание с помощью стилей
В данном примере изменяется цвет фона и способ выравнивания для всех ячеек, где установлен атрибут . Результат примера показан на рис. 2.
Рис. 2. Таблица без рамки с выделенной левой колонкой
Хотя линии между ячейками позволяют четко отделить одни данные от других, ту же самую функцию выполняет и пустое пространство вокруг контента. А чтобы таблица выделялась на web-страницы, для нее устанавливают определенный цвет фона. Заголовок при этом допустимо задать другого цвета, как показано на рис. 1.
Рис. 1. Вид таблицы без рамки
Для изменения цвета фона таблицы используем атрибут background , добавляя его к селектору TABLE . Для красоты внизу таблицы рисуем линию с помощью параметра border-bottom (пример 1).
Метод добавления рамки к отдельным ячейкам, столбцам и строкам таблиц. К ячейке таблицы добавляются position: relative и блок :after с абсолютным позиционированием, который растягивается на всю ширину и высоту. Далее к нему применяются нужные CSS стили.
Рамка у ячейки
Наложение на текущую рамку таблицы
Для наложения на рамку таблицы нужно указать отрицательные значения top , right , bottom , left .
| 