Оформление таблиц
Цель: Изучить создание таблиц с различными рамками.
Содержание:
Учебная задача 1
Учебная задача 2
Учебная задача 3
Практика
Учебная задача 1: Изучи создание простой таблицы и таблицы без рамки.
Хотя линии между ячейками позволяют четко отделить одни данные от других, ту же самую функцию выполняет и пустое пространство вокруг текста. А чтобы таблица выделялась на веб-страницы, для нее устанавливают определенный цвет фона. Заголовок при этом допустимо задать другого цвета, как показано на рис.
Для изменения цвета фона таблицы используем атрибут background, добавляя его к селектору TABLE. Для красоты внизу таблицы рисуем линию с помощью параметра border-bottom
<head>
<style type="text/css">TABLE {width: 300px; /* Ширина таблицы */border-bottom: 2px solid maroon; /* Линия внизу таблицы */background: lemonchiffon /* Цвет фона таблицы */}TH {background: maroon; /* Цвет фона заголовка */color: white; /* Цвет текста */text-align: left /* Выравнивание по левому краю */}TD, TH {padding: 3px /* Поля вокруг текста */}</style></head>
<body> <table cellspacing="0">
<tr> <th> </th> <th>2004</th> <th>2005</th> <th>2006</th> </tr>
<tr> <td>Рубины</td> <td>43</td> <td>51</td> <td>79</td> </tr>
<tr> <td>Изумруды</td> <td>28</td> <td>34</td> <td>48</td> </tr>
<tr> <td>Сапфиры</td> <td>29</td> <td>57</td> <td>36</td> </tr>
</table></body></html>
Поскольку содержимое тега <TH> исходно выравнивается по центру, то для изменения этой характеристики в данном примере применяется стилевой атрибут text-align со значением left. Можно поступить наоборот и задать выравнивание по центру для ячеек <TD>. Но содержимое первой колонки с названиями камней лучше оставить выровненным по левому краю. Чтобы установить для разных колонок различное выравнивание содержимого рассмотрим два способа.
Первый метод заключается в использовании тега <COL>, он добавляется в контейнер <TABLE> и устанавливает, в частности, выравнивание для отдельных колонок (пример)
<html><head>
<style type="text/css">TABLE {width: 300px; /* Ширина таблицы */border-bottom: 2px solid maroon; /* Линия внизу таблицы */background: lemonchiffon /* Цвет фона таблицы */}TH {background: maroon; /* Цвет фона заголовка */color: white; /* Цвет текста */}TD, TH {padding: 3px /* Поля вокруг текста */}</style></head>
<body>
<table cellspacing="0"><!-- Выравнивание первой колонки по левому краю --><col align="left"><!-- Выравнивание остальных колонок по центру --><col span="3" align="center">
…………….</table></body></html>
Аргумент align тега <COL> указывает, по какой стороне выравнивать ячейки колонки, а span определяет число колонок, к которым будут применяться заданные параметры. Если этот атрибут отсутствует, то тег <COL> работает только для одной колонки.
Замечание. Выравнивание содержимого колонок с помощью тега <COL> работает в браузере Internet Explorer и не действует в браузере Firefox и некоторых других.
Второй метод универсальный, работает во всех браузерах и основан на добавлении отдельного класса для определенных ячеек.
Создаем стилевой класс, например, с именем jewel и применяем его к ячейкам левой колонки (пример)
<html><head>
<style type="text/css">TABLE {width: 300px; /* Ширина таблицы */border-bottom: 2px solid maroon; /* Линия внизу таблицы */background: lemonchiffon /* Цвет фона таблицы */}TH {background: maroon; /* Цвет фона заголовка */color: white; /* Цвет текста */}TD, TH {padding: 3px; /* Поля вокруг текста */text-align: center /* Выравнивание по центру */}TD. jewel {text-align: left; /* Выравнивание по левому краю */background: #ccc /* Цвет фона */}</style></head>
<body>
<table cellspacing="0">
<tr><th> </th> <th>2004</th> <th>2005</th> <th>2006</th> </tr>
<tr><td class="jewel">Рубины</td> <td>43</td> <td>51</td> <td>79</td> </tr>
<tr><td сlass="jewel">Изумруды</td> <td>28</td> <td>34</td> <td>48</td> </tr>
<tr><td class="jewel">Сапфиры</td><td>29</td> <td>57</td><td>36</td> </tr>
</table></body></html>
В данном примере изменяется цвет фона и способ выравнивания для всех ячеек, где установлен параметр class="jewel". Результат примера показан на рис.
Простая таблица
Простая таблица характеризуется тем, что в ней не используется цветовое решение, а визуальное отделение одного блока данных от другого происходит с помощью линий.
Вначале рассмотрим таблицу без рамки, при этом ее контур на веб-странице формируется горизонтальной линией сверху и снизу от таблицы (рис).
Верхний заголовок таблицы (тег <TH>) также отделяется от ее данных линией, но уже меньшей толщины.
Для добавления линий воспользуемся стилевыми свойствами border-top и border-bottom, они устанавливают линию определенной толщины сверху и снизу от элемента. Применяя эти параметры к селектору TABLE, получим нужный вид таблицы. Аналогично указывается линия внизу ячеек с заголовком, только в этом случае border-bottom следует добавить к селектору TH, как показано в примере.
<html><head>
<style type="text/css">TABLE { width: 300px; /* Ширина таблицы */ border-top: 2px solid #000; /* Линия сверху таблицы */ border-bottom: 2px solid #000 /* Линия внизу таблицы */}TD, TH { padding: 3px /* Поля вокруг содержимого ячеек */}TH { text-align: left; /* Выравнивание текста по левому краю */ border-bottom: 1px solid #000 /* Линия под верхним заголовком */}</style></head>
<body>
<table cellspacing="0">
<tr> <th> </th> <th>2004</th> <th>2005</th> <th>2006</th> </tr>
<tr> <td>Рубины</td> <td>43</td> <td>51</td> <td>79</td> </tr>
<tr> <td>Изумруды</td> <td>28</td> <td>34</td> <td>48</td> </tr>
<tr> <td>Сапфиры</td> <td>29</td> <td>57</td> <td>36</td> </tr>
</table></body></html>
В данном примере меняется выравнивание содержимого ячеек <TH> по левому краю, поскольку исходно для таких ячеек оно установлено по центру.
Следующий вариант таблицы еще проще выглядит и содержит всего две линии, которые разбивают содержимое таблицы на три блока (рис. 2). Первый блок содержит названия драгоценных камней, второй – годы, а третий – набор чисел.
Горизонтальную линию создаем путем добавления стилевого свойства border-bottom к селектору TH, как это было показано в примере 1. А для вертикальной линии заводим новый класс, назовем его vl, который устанавливает линию справа, и добавляем класс к определенным ячейкам (пример ).
<html><head>
<style type="text/css">TABLE { width: 300px /* Ширина таблицы */}TD, TH { padding: 3px /* Поля вокруг содержимого ячеек */}TH { text-align: left; /* Выравнивание по левому краю */ border-bottom: 1px solid #000 /* Линия снизу */}.vl { border-right: 1px solid #000 /* Линия справа */}</style></head>
<body>
<table cellspacing="0">
<tr><th class="vl"> </th><th>2004</th><th>2005</th><th>2006</th></tr>
<tr><td class="vl">Рубины</td><td>43</td><td>51</td><td>79</td></tr>
<tr><td class="vl">Изумруды</td><td>28</td><td>34</td><td>48</td></tr>
<tr><td class="vl">Сапфиры</td><td>29</td><td>57</td><td>36</td></tr>
</table></body></html>
В данном примере класс vl, который устанавливает вертикальную линию справа, добавляется ко всем ячейкам первой колонки, это тег <TH> и <TD>.
К содержанию
Учебная задача 2: Изучи создание таблицы с рамкой и объёмной таблицы.
Рамка вокруг таблицы позволяет акцентировать на ней внимание, отделить от остального содержимого веб-страницы и расширить набор средств по дизайну таблиц.
Для создания рамки применяется стилевое свойство border, которое добавляется к селектору TABLE. Также эффектно смотрится таблица, когда цвет рамки совпадает с цветом фона заголовка (тег <TH>), как показано на рис. 1.
В следующем примере показано, как создать такую простую таблицу.
<html><head>
<style type="text/css">TABLE {width: 300px; /* Ширина таблицы */border: 1px solid black /* Рамка вокруг таблицы */}TD, TH {padding: 3px /* Поля вокруг содержимого ячеек */}TH {text-align: left; /* Выравнивание по левому краю */background: black; /* Цвет фона */color: white /* Цвет текста */}</style></head>
<body>
<table cellspacing="0">
……….</table></body></html>
Здесь выравнивание текста во всех ячейках происходит по левому краю, что не всегда удобно. На следующем рис. показана таблица, у которой содержимое ячеек выравнивается по центру за исключением левой колонки, где текст выравнивается по левому краю.
Изменение выравнивания происходит с помощью стилевого свойства text-align, при этом для отдельных ячеек требуется вводить новый класс, чтобы гибко управлять некоторыми характеристиками (пример 2).
<html><head>
<style type="text/css">TABLE { width: 300px; /* Ширина таблицы */border: 2px solid black; /* Рамка вокруг таблицы */background: silver /* Цвет фона таблицы */}TD, TH {text-align: center; /* Выравнивание по центру */padding: 3px /* Поля вокруг содержимого ячеек */}TH {background: steelblue; /* Цвет фона */color: white; /* Цвет текста */border-bottom: 2px solid black /* Линия снизу */}.lc {font-weight: bold; /* Жирное начертание текста */text-align: left /* Выравнивание по левому краю */}</style></head>
<body>
<table cellspacing="0">
<tr><th> </th><th>2004</th><th>2005</th><th>2006</th></tr>
<tr><td class="lc">Рубины</td><td>43</td><td>51</td><td>79</td></tr>
<tr><td class="lc">Изумруды</td><td>28</td><td>34</td><td>48</td></tr>
<tr><td class="lc">Сапфиры</td><td>29</td><td>57</td><td>36</td></tr>
</table></body></html>
В данном примере добавляется стилевой класс с именем lc, он добавляется к ячейкам левой колонки для изменения выравнивания содержимого и создания жирного начертания текста.
Эффектно смотрится таблица, у которой фон заголовка выполнен в виде градиента (рис. 3). При этом создание подобной таблицы не представляет особой сложности.
При этом в качестве фона применяется заранее заготовленный рисунок, например, как показано на рис.
Для добавления фона только к одной строке таблицы имеется несколько способов. Можно воспользоваться тегом <THEAD>, который предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Для этого тега добавляем стилевой параметр background, он одновременно определяет цвет фона и фоновый рисунок, а также его повторяемость (пример 3).
<html><head>
<style type="text/css">TABLE {width: 300px; /* Ширина таблицы */border: 2px solid seagreen /* Рамка вокруг таблицы */}THEAD {background:seagreen /* Цвет фона */url('images/bg. gif') /* Путь к фоновому изображению */repeat-x /* Повторять фон только по горизонтали */}TD, TH {padding: 3px; /* Поля вокруг содержимого ячеек */text-align: center /* Выравнивание по центру */}.lc {font-weight: bold; /* Жирное начертание текста */text-align: left /* Выравнивание по левому краю */}</style></head>
<body>
<table cellspacing="0">
<thead>
<tr><th> </th> <th>2004</th><th>2005</th><th>2006</th></tr> </thead>
<tr><td class="lc">Рубины</td><td>43</td><td>51</td><td>79</td></tr>
<tr><td class="lc">Изумруды</td><td>28</td><td>34</td><td>48</td></tr>
<tr><td class="lc">Сапфиры</td><td>29</td><td>57</td><td>36</td></tr>
</table></body></html>
В данном примере тег <THEAD> охватывает только верхнюю строку таблицы с ее заголовком. Для этого тега в стилях одновременно устанавливается цвет фона и картинка, которая приведена на рис. 4. Хотя цвет под рисунком не виден, лучше его всегда добавлять, например, для случая отключения пользователем отображения изображений в браузере.
Объемная таблица
Эффект объемности таблицы достигается за счет одновременного использования светлых и темных цветов в рамке или ячейках, при этом возникает иллюзия, что таблица выступает над фоном веб-страницы. Например, рамка вокруг таблицы по умолчанию отображается как объемная. Хотя такой вид рамки не пользуется достаточной популярностью у веб-дизайнеров, это не означает, что такие рамки вообще не следует применять. Используя стили таблице можно придать самый разнообразный вид, в том числе и объемный, который может удачно выделяться на фоне своих «плоских» собратов.
Толщина трехмерной рамки регулируется параметром border тега <TABLE>, при этом меняется только внешняя граница вокруг таблицы. Толщина линий внутри таблицы остается неизменной (рис. 1).
Для создания указанной таблицы вынесем все возможные параметры в стили, а добавление рамки возложим на атрибут border (пример 1).
<head><style type="text/css">TABLE {width: 300px /* Ширина таблицы */}TH {background: indigo; /* Цвет фона */color: ivory /* Цвет текста */}TD, TH {padding: 3px /* Поля вокруг содержимого ячеек */}</style></head><body><table cellspacing="0" border="2…..</table>
</body></html>
В данном примере рамка вокруг таблицы имеет толщину два пиксела, а ее вид может незначительно отличаться в разных браузерах.
Стили также позволяют создать эффект трехмерности таблицы за счет использования универсального стилевого параметра border. В качестве аргументов указывается стиль линии и ее толщина, которые весьма влияют на конечный вид таблицы. В табл. 1 показаны некоторые значения и конечный результат.
Табл. 1. Вид рамки в зависимости от стиля и толщины границы элемента | |||
Толщина рамки | |||
Стиль рамки | 2 пиксела | 4 пиксела | 6 пикселов |
groove (углубленная) | |||
ridge (бортик) | |||
inset (вдавленная) | |||
outset (выдавленная) |
В примере 2 для добавления рамки используется стиль со значением groove и толщиной 5 пикселов. Вид полученной таблицы показан на рис. 2.
Параметр border применяется к селектору TABLE для создания рамки вокруг таблицы и к селекторам TD и TH для добавления рамки к каждой ячейки. При этом чтобы не возникало двойных линий в местах соприкосновения разных ячеек, используется свойство border-collapse со значением collapse (пример 2).
<html><head>
<style type="text/css">TABLE {width: 300px; /* Ширина таблицы */border-collapse: collapse; /* Убираем двойные линии между ячейками */border: 5px groove #ccc /* Рамка вокруг таблицы */}TH {background: indigo; /* Цвет фона */color: ivory /* Цвет текста */}TD, TH {padding: 3px; /* Поля вокруг содержимого ячеек */border: 5px groove #ccc /* Граница между ячейками */}</style></head>
<body><table cellspacing="0">…..</table></body></html>
В данном примере создается углубленная рамка серого цвета вокруг ячеек и таблицы в целом.
Мы можем сами создать эффект трехмерности таблицы за счет правильного чередования темных и светлых линий в ее строках (рис. 3).
На этом рисунке показано, что четные строки таблицы содержат светлый фон, белую горизонтальную линию снизу и темно-серую — сверху. Впрочем, можно трактовать и наоборот и сказать, что это нечетные строки имеют белую линию сверху и темную — снизу.
Для создания приведенной на рис. 3 таблицы введем дополнительный класс с именем even, и будем добавлять его к четным строкам таблицы. При этом для селектора TR нельзя напрямую установить атрибут border, линия в этом случае отображаться просто не будет. Поэтому воспользуемся контекстными селекторами и добавим конструкцию .even TD, которая говорит, что для всех ячеек расположенных внутри элемента с классом even задаем линию снизу и сверху. Цвет фона с помощью параметра background допускается применять к селектору TR, что и показано в примере 3.
<html><head>
<style type="text/css">TABLE {width: 227px; /* Ширина таблицы */background: #ccc; /* Цвет фона нечетных строк */border: 1px solid #000 /* Рамка вокруг таблицы */}TD, TH {padding: 3px; /* Поля вокруг содержимого */text-align: left /* Выравнивание по левому краю */}TR. even {background: #e0e0e0 /* Цвет фона четных строк*/}.even TD {border-top: 2px solid #666; /* Темная линия сверху ячейки */border-bottom: 1px solid #fff /* Светлая линия снизу ячейки */}</style></head><body>
<table cellspacing="0">
<tr><th> </th><th>2004</th><th>2005</th><th>2006</th></tr>
<tr class="even"><td>Рубины</td><td>43</td><td>51</td><td>79</td></tr>
<tr><td>Изумруды</td><td>28</td><td>34</td><td>48</td></tr>
<tr class="even"><td>Сапфиры</td><td>29</td><td>57</td><td>36</td></tr>
</table></body></html>
Если нижняя строка таблицы четная, фон которой в стиле задается светлым цветом, то внизу таблицы можно заметить светлую полосу. С ее присутствием можно смириться или завести новый стилевой класс без нижней линии и применять его к этой строке.
К содержанию
Учебная задача 3: Изучи создание сетки, колонок и строк таблиц.
Сетка представляет собой набор горизонтальных и вертикальных линий между ячейками таблицы, которые отделяют содержимое ячеек друг от друга. Сетка используется по умолчанию, если включить отображение границ с помощью параметра border тега <TABLE>. Однако такие линии отображаются по-разному в различных браузерах, поэтому применение стилей не только позволит удобно управлять видом таблиц, но и сделает их однотипными.
Для создания таблицы показанной на рис. 1 потребуется всего ничего: установить атрибут border для каждой ячейки и воспользоваться параметром border-collapse.
При добавлении border к селектору TD или TH между ячейками возникают двойные линии, которые образуются за счет соприкосновения рамок вокруг ячеек. Чтобы этого не произошло, для селектора TABLE указывается свойство border-collapse со значением collapse, как показано в примере 1.
<html><head>
<style type="text/css">TABLE { width: 300px; /* Ширина таблицы */ border-collapse: collapse /* Убираем двойные линии между яч. */}TD, TH { padding: 3px; /* Поля вокруг содержимого таблицы */ border: 1px solid black /* Параметры рамки */}TH { background: powderblue /* Цвет фона */}</style></head>
<body>
<table>
…..</table></body></html>
В данном примере также устанавливается цвет фона для ячеек заголовка (тег <TH>) через параметр background.
Как вариант, можно вообще убрать рамку вокруг таблицы, оставив только линии внутри нее (рис. 2).
При этом удобнее всего будет не убрать рамку, а спрятать ее, задав ей цвет, совпадающий с цветом фона веб-страницы. Так, в примере 2 фон страницы задан белым и такого же цвета используется граница, которая добавляется к селектору TABLE.
<html><head>
<style type="text/css">BODY { background: white /* Цвет фона веб-страницы */}TABLE { width: 300px; /* Ширина таблицы */ border-collapse: collapse; /* Убираем двойные линии между яч. */ border: 2px solid white /* Прячем рамку вокруг таблицы */}TD, TH { padding: 3px; /* Поля вокруг содержимого таблицы */ border: 1px solid maroon; /* Параметры рамки */ text-align: left /* Выравнивание по левому краю */}</style></head>
<body><table>…..</table></body></html>
В данном примере толщина линий между ячейками составляет один пиксел, а белая рамка вокруг – два пиксела, т. е. на один пиксел больше. Это требуется для того, чтобы надежно скрыть внешнюю границу вокруг таблицы.
Колонки таблицы
Чтобы взгляд читателя скользил по данным, представленным в колонках таблицы, не перескакивая на соседний раздел, колонки удобно выделить цветом фона или вертикальными линиями. При этом цвет четных и нечетных колонок может различаться.
Поскольку формирование таблицы происходит по строкам, а не по колонкам, то для изменения вида колонок приходится задавать стиль практически для каждой ячейки. В этом случае удобно использовать разные классы – один для ячеек четных колонок, а второй – для нечетных. На рис. 1 показана таблица, которая формируется именно таким способом.
Цвет нечетных колонок можно задать путем добавления стилевых параметров к селектору TABLE, а для четных колонок введем новый класс, назовем его even. Первая колонка обычно используется для заголовков строк, поэтому для нее имеет смысл задать стиль, отличный от стиля остальных ячеек. В данном случае вводим еще один класс, назовем его lc и для него определим выравнивание по левому краю и цвет текста (пример 1). Остается для ячеек первой колонки добавить к тегу <TD> параметр class="lc", а для ячеек четных колонок class="even".
<html><head>
<style type="text/css">TABLE { width: 300; /* Ширина таблицы */ border: 2px solid black; /* Рамка вокруг таблицы */ background: lightslategray; /* Цвет фона */ color: white /* Цвет текста */}TD, TH { text-align: center; /* Выравнивание по центру */ padding: 3px /* Поля вокруг текста */}TH { color: white; /* Цвет текста */ border-bottom: 4px double black /* Двойная линия снизу */}.even { /* Стиль для четных колонок */ background: moccasin; /* Цвет фона */ color: black /* Цвет текста */}.lc { /* Стиль для первой колонки */ text-align: left; /* Выравнивание по левому краю */ color: lemonchiffon /* Цвет текста */}</style></head>
<body>
<table cellspacing="0">
<tr><th> </th><th class="even">2004</th>
<th>2005</th><th class="even">2006</th></tr>
<tr><td class="lc">Рубины</td>
<td class="even">43</td><td>51</td>
<td class="even">79</td></tr>
<tr><td class="lc">Изумруды</td>
<td class="even">28</td>
<td>34</td><td class="even">48</td></tr>
<tr><td class="lc">Сапфиры</td>
<td class="even">29</td>
<td>57</td><td class="even">36</td></tr></table></body></html>
Чтобы отделить первую строку с заголовком от данных таблицы в примере используется двойная линия. Она получается за счет добавления параметра border-bottom к тегу TH.
Рассмотрим еще один способ формирования вида колонок — не только за счет разного цвета фона, но и применением линий между колонками (рис. 2).
Структура кода останется практически той же, что была показана в примере 1. А именно, для ячеек четных колонок используем класс even, а для первой колонки — класс lc. Чтобы установить линию между колонками, к селектору TD добавляем параметр border-left, он создает линию слева от ячейки. Однако при этом возникнет ненужная линия слева в первой колонке, поэтому для класса lc используем border: none, этот атрибут уберет лишние границы (пример 2).
<html><head><style type="text/css">TABLE { width: 300px; /* Ширина таблицы */ border: 1px solid black /* Рамка вокруг таблицы */}TD, TH { text-align: center; /* Выравнивание по центру */ padding: 3px /* Поля вокруг текста */}TH { color: white; /* Цвет текста */ background: goldenrod /* Цвет фона */}TD { border-left: 1px dashed black /* Линия слева от ячейки */}.even { /* Стиль для четных колонок */ background: gainsboro /* Цвет фона */} .lc { /* Стиль для первой колонки */ text-align: left; /* Выравнивание по левому краю */ border: none /* Нет лишних линий */}</style></head><body>
<table cellspacing="0">
<tr><th> </th><th>2004</th><th>2005</th><th>2006</th></tr>
<tr><td class="lc">Рубины</td>
<td class="even">43</td><td>51</td><td class="even">79</td></tr>
<tr><td class="lc">Изумруды</td>
<td class="even">28</td><td>34</td><td class="even">48</td></tr>
<tr><td class="lc">Сапфиры</td>
<td class="even">29</td><td>57</td><td class="even">36</td></tr>
</table></body></html>
К сожалению, работа с колонками таблицы не так удобна, как хотелось бы. Если применять стили, то фактически все ячейки таблицы пестрят указаниями на определенный стилевой класс. За счет этого снижается удобство по расширению табличных данных и повышается объем кода. Существуют специальные теги <COL> и <COLGROUP> призванные облегчить работу с колонками таблицы. Но их возможности ограничены, да и нужный результат будет отображаться не во всех браузерах. Так что на данном этапе для создания таблиц желаемого вида приходится обращаться к стилям.
Строки таблицы
При большом количестве строк в таблице бывает трудно сопоставлять данные из разных колонок между собой. Для этого требуется визуально отделить одну строку таблицы от другой – либо с помощью линий, либо за счет добавления фонового цвета.
Вначале разберем вариант использования горизонтальных линий. На рис. 1 приведен один из возможных способов акцентирования внимания на строках таблицы. Каждая строка сверху и снизу обрамляется линией, за счет этого взгляд посетителя скользит вдоль них и не перескакивает на соседнюю строку. При этом данные, находящиеся в колонках, также связываются между собой, но уже за счет одновременного выравнивания по левому краю и пустого пространства между колонками.
Линии между строк устанавливаются достаточно просто, для этого следует добавить стилевой атрибут border-bottom к селектору TD. Если вокруг таблицы содержится рамка, то нижняя граница получится удвоенной толщины. В этом случае можно убрать нижнюю линию у последней строки или скрыть нижнюю границу у таблицы (пример 1).
<html><head><style type="text/css">TABLE { width: 300px; /* Ширина таблицы */ border: 1px solid black; /* Рамка вокруг таблицы */ border-bottom: none /* Убираем линию снизу */}TD, TH { padding: 3px /* Поля вокруг содержимого ячеек */}TH { text-align: left; /* Выравнивание по левому краю */ background: black; /* Цвет фона */ color: white; /* Цвет текста */ border: 1px solid white /* Рамка вокруг ячеек */}TD { border-bottom: 1px solid black /* Линия снизу */}</style></head>
<body><table cellspacing="0">
….</table></body></html>
В данном примере вертикальные линии между ячейками заголовка добавляются за счет параметра border, который используется для селектора TH. При этом возникает пустое пространство толщиной один пиксел между границей таблицы и фоновой областью заголовка.
Применение цвета расширяет возможности по изменению вида таблицы. Например, цвет фона четных и нечетных строк может различаться, как показано на рис. 2.
Для изменения цвета фона нужных строк введем дополнительный класс, назовем его even, и станем добавлять его к четным строкам таблицы, а именно к тегу <TR>. Заметьте, что для селектора TR можно задавать только цвет фона через свойство background. Всякие линии, которые установлены для селектора TR, отображаться не будут. Поэтому нижнюю границу проводим у ячейки, применяя свойство border-bottom к селектору TD (пример 2).
Цвет фона нечетных строк определяется путем изменения цвета всей таблицы. Но поскольку для выборочных строк (для которых добавлен параметр class="even") устанавливается индивидуальный цвет, то он «перекрывает» цвет фона таблицы. За счет этого и получается чередование цветных строк.
<html><head>
<style type="text/css">TABLE { width: 300px; /* Ширина таблицы */ background: cornsilk; /* Цвет фона нечетных строк */ border: 1px solid brown; /* Рамка вокруг таблицы */ border-collapse: collapse /* Убираем двойные линии между яч. */}TD, TH { padding: 3px /* Поля вокруг содержимого ячейки */}TD { text-align: center; /* Выравнивание по центру */ border-bottom: 1px solid brown /* Линия внизу ячейки */}TH { background: brown; /* Цвет фона */ color: white /* Цвет текста */}TR. even { background: ivory /* Цвет фона четных строк */}.la { text-align: left /* Выравнивание по левому краю */}</style></head><body>
<table><tr><th> </th><th>2004</th><th>2005</th><th>2006</th></tr><tr class="even"><td class="la">Рубины</td><td>43</td><td>51</td><td>79</td></tr>
<tr><td class="la">Изумруды</td><td>28</td><td>34</td><td>48</td></tr>
<tr class="even"><td class="la">Сапфиры</td><td>29</td><td>57</td><td>36</td>
</tr>
<tr><td class="la">Аметисты</td><td>23</td><td>64</td><td>97</td>
</tr></table></body></html>
В данном примере двойной линии внизу таблицы не возникает в результате применения свойства border-collapse со значением collapse к селектору TABLE. Этот параметр отслеживает появление двойных линий в местах соприкосновения ячеек и заменяет их одинарными линиями. Заметим, что в разных браузерах могут возникнуть разночтения по поводу цвета оставляемых линий в том случае, если цвет границы вокруг таблицы не совпадает с цветом линий под строками.
Таблицы могут использоваться не только для добавления колонок или выравнивания элементов веб-страницы, но и для создания различных дизайнерских изысков вроде декоративной рамки или тени. Благодаря наличию множества параметров, как у самой таблицы, так и у ее ячеек, с помощью сочетания таблиц и рисунков можно формировать практически любые декоративные элементы. Причем их легко можно приспосабливать под любой макет, поскольку ширину таблицы можно устанавливать и в процентах и в пикселах.
К содержанию
Практика
Запиши приведенные варианты таблиц на языке HTML.
