Как сделать пустую ячейку в таблице html. Применение пустых ячеек. Как убрать промежуток между рамками ячеек

В данном разделе рассматриваются некоторые специфичные возможности отдельных браузеров, а также отдельные тонкости построения и отображения таблиц.

Отображение пустых ячеек в HTML таблицах

Одной из особенностей представления HTML таблиц различными браузерами является отображение пустых ячеек. Согласно описанию HTML языка все браузеры должны дополнять строки пустыми ячейками, если в какой-либо строке их количество задано меньшим, чем в остальных строках. Кроме того, в любом месте таблицы могут находиться ячейки, не содержащие данных.

Существует различие между пустыми ячейками и ячейками, содержащими невидимые данные. В пустых ячейках внутри пары тегов и не содержится никакой информации или один или более пробелов, которые не трактуются как данные. Ячейки, содержащие невидимые данные, к примеру, могут содержать код или код перевода строки
, или любой текст, цвет которого совпадает с цветом фона ячейки. Если ячейки, содержащие данные (пусть даже невидимые), отображаются всеми браузерами одинаково, то пустые ячейки будут показаны по-разному. Браузер Netscape пустую ячейку не показывает, т. е. место, где располагается данная ячейка, будет закрашено цветом фона страницы, а не цветом фона ячейки в отличие от ячеек, содержащих данные. Вокруг пустых ячеек не прорисовывается рамка. Пример HTML таблицы с пустой ячейкой приведен на рис. 4.15.

Рис. 4.15. Пустая ячейка HTML таблицы отображается по-разному различными браузерами

Microsoft Internet Explorer и те, и другие ячейки отображает цветом фона ячеек. Такой браузер как NSCA Mosaic предоставляет пользователю возможность самому определить характер выдачи пустых ячеек таблицы с помощью выбора соответствующих опций. Знание таких особенностей позволит разрабатывать таблицы, которые будут отображены подходящим образом, вне зависимости от выбранного пользователем браузера. В ряде случаев достаточно для этого вместо некоторых пустых ячеек создавать ячейки, содержащие единственный код.

Стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат.

Теги, используемые для построения таблицы в html

table - обязательный тег, открывающий и закрывающий таблицу
caption - необязательный тег, обозначающий заголовок таблицы
th - необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным
tr - обязательный тег, с которого открывается и закрывается строка
td - обязательный тег, обозначающий открытие и закрытие ячейки в строке

Пример кода простой таблицы

Название таблицы

Стобец 1	Стобец 2
Текст в первой ячейке	Текст во второй ячейке

В браузере отобразится

Назначение таблиц в html

Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать фон (или его цвет), отступ , ширину , границу и другие параметры , что придаст ей красивый внешний вид. Таблица - Ваш первый шаг к понимаю web-дизайна ! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) - было содержанием ячеек большой таблицы.
На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой...

Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)

У тега table есть следующие атрибуты:

width - ширина таблицы. может быть в пикселях или % от ширины экрана.
bgcolor - цвет фона ячеек таблицы
background - заливает фон таблицы рисунком
border - рамка и границы в таблице. Толщина указывается в пикселях
cellpadding - отступ в пикселях между содержимым ячейки и её внутренней границей
Как и ранее, значение атрибута прописываем в кавычках.

Рассмотрим применения данных атрибутов на примере. Для этого создадим таблицу (но уже без крайне редко применяемых тегов caption и th ) и зададим параметр атрибуту border (граница) , width (ширина таблицы, строки или ячейки) и bgcolor (цвет ячейки)

В результате в браузере будет выведена таблица следующего вида

frame - атрибут, обозначающий рамку вокруг таблицы. Есть следующие значения:

Void - рамки нет,
above - только верхняя рамка,
below - только нижняя рамка,
hsides - только верхняя и нижняя рамки,
vsides - только левая и правая рамки,
lhs - только левая рамка,
rhs - только правая рамка,
box - все четыре части рамки.

rules - атрибут, обозначающий границы внутри таблицы, между ячейками. Есть следующие значения:

None - между ячейками нет границ,
groups - границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
rows - границы только между строками,
cols - границы только между стобцами,
all - отображать все границы.

Рассмотрим пример кода

Стобец 1	Стобец 2

Результат

Теперь попробуем создать красивую таблицу. Для этого давайте начнём использовать выравнивание в таблице . Для этого есть следующие уже знакомые параметры:

align - выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center)
cellspacing - расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей)
cellpadding - отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей)
Рассмотрим пример

Стобец 1	Стобец 2
Текст в первой ячейке первого столбца	Текст во второй ячейке второго столбца

В браузере отобразится выравненная по центру таблица следующего вида

Строки tr и ячейки td в таблицах HTML

Снова напомню о том, что таблицы формируются построчно (tr). В строках (tr) уже находятся ячейки (td). Если задавать параметр для строки (tr), то он будет действителен для всех ячеек (td) в этой строке, если для конкретной ячейки, то только для неё. В примерах выше я указывал цвет для строки, этот параметр распространялся соответственно для всех ячеек.

Для тегов tr и td есть следующие

align - выравнивание текста внутри ячейки. По левому краю (left), по правому краю (right), по центру (center)
valign - выравнивание текста внутри ячейки по вертикали. Вверх (top), вниз (bottom), по центру (middle)
bgcolor - задает цвет строки
width - ширина столбца (все ячейки ниже примут данный параметр) указывается в пикселях или в процентах, где 100% ширина всей таблицы
height - высота ячейки (все ячейки в строке примут данный параметр)

Рассмотрим код, где содержимое ячеек (td), выравнено по разным краям: в первой по левому, во второй по правому:

Стобец 1	Стобец 2
Текст в первой ячейке первого столбца	Текст во второй ячейке второго столбца
Стобец 1	Стобец 2

Результат

С помощью таблиц можно сверстать очень даже неплохую страницу. Не забывайте, что в ячейки можно вставлять не только текст, но и изображения, ссылки и прочее!)

Спасибо за внимание! Надеюсь материал был полезен!

HTML-таблицы упорядочивают и выводят на экран данные с помощью строк или столбцов. Таблицы состоят из ячеек, образующихся при пересечении строк и столбцов. Ячейки таблиц могут содержать любые HTML-элементы, такие как заголовки, списки, текст, изображения, элементы форм, а также другие таблицы. Каждой таблице можно добавить связанный с ней заголовок, расположив его перед таблицей или после неё.

Таблицы больше не используются для вёрстки веб-страниц и компоновки отдельных элементов, потому что такой приём не обеспечивает гибкость структуры и адаптивность сайта, существенно увеличивая HTML-разметку.

Для всех элементов таблицы доступны , а также собственные атрибуты.

Создание таблиц в HTML

• Содержание:

1. Как создать таблицу

Таблица создаётся при помощи парного тега

Рис.1. Внешний вид таблицы без форматирования css-свойствами

По умолчанию таблица и ячейки не имеют видимых границ. Границы задаются с помощью свойства border:

/* внешние границы таблицы серого цвета толщиной 1px */ table {border: 1px solid grey;} /* границы ячеек первого ряда таблицы */ th {border: 1px solid grey;} /* границы ячеек тела таблицы */ td {border: 1px solid grey;}

Промежутки между ячейками таблицы убираются с помощью свойства table {border-collapse: collapse;} .

Ширина таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width:

/* сделает ширину таблицы равной ширине блока контейнера, в котором она находится */ table {width: 100%;} /* задаст фиксированную ширину для таблицы */ table {width: 600px;}

Если для ячеек таблицы заданы внутренние отступы и границы, то ширина таблицы будет включать в себя следующие значения:
padding-left и padding-right , ширина border-left плюс ширина border-right последней ячейки в ряду. Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.

2. Как создать строки (ряды) таблицы

Строки или ряды таблицы создаются с помощью тега

. Количество горизонтальных строк таблицы определяется количеством парных тегов .

3. Как сделать ячейку заголовка столбца таблицы

4. Как сделать ячейку тела таблицы

, расположенные в одном ряду, определяют количество ячеек в строке таблицы. Количество пар ячеек и для указания каждой части таблицы.

Элемент должен быть использован в следующем порядке: как дочерний элемент

Стобец 1	Стобец 2
Текст в первой ячейке первого столбца	Текст во второй ячейке второго столбца
создаёт заголовок столбца — специальную ячейку, текст в которой выделяется полужирным. Количество ячеек заголовка определяется количеством пар тегов		создаёт ячейки таблицы, внутрь которых помещаются данные таблицы. Парные теги		должно быть равно количеству пар ячеек	. Для элемента доступны атрибуты colspan , rowspan , headers . 5. Как добавить подпись (заголовок) к таблице Создает подпись таблицы. Добавляется непосредственно после тега 6. Группирование строк и столбцов таблицы Создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки. Добавляется непосредственно после тегов Рис. 2. Выделение столбцов таблицы другим цветом с использованием тегов и 7. Группировка разделов таблицы Элемент создает группу заголовков для строк таблицы с целью задания единого оформления. Используется в сочетании с элементами

, после и, и перед , и элементами. В пределах одной таблицы можно использовать один раз. группирует основное содержимое таблицы. Используется в сочетании с элементами и .

Создает группу строк для представления информации о суммах или итогах, расположенную в нижней части таблицы. Используется в таблице один раз. Располагается после тега, перед тегами

и .

Такая группировка строк была заложена в стандарте в расчете на то, что обозреватели при отображении длинных таблиц обеспечат прокрутку строк данных при сохранении надзаголовка и подзаголовка неподвижными, а при их выводе на принтер смогут использовать надзаголовок и подзаголовок в качестве колонтитулов страницы. Однако, современные обозреватели этого не делают и либо просто отображают и как строки данных, либо, в лучшем случае, просто помещают соответствующие строки в начало и конец таблицы.

8. Как объединить ячейки таблицы

Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.

Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan

9. Атрибуты элементов таблицы

Таблица 1. Атрибуты элементов таблицы

Принимаемые значения: список имен ячеек, разделенных пробелами; эти имена должны быть присвоены ячейкам через их атрибут id .
Принимаемые значения: любое целое положительное число.

Атрибут	Описание, принимаемое значение
colspan	Количество ячеек в строке для объединения по горизонтали.
headers	Задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Предназначен для речевых браузеров.	...	...
rowspan	Количество ячеек в столбце для объединения по вертикали.	Возможные значения: число от 1 до 999.
span	Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1.

10. Пример создания таблицы

Рис. 4. Создание меню ресторана с помощью HTML-таблицы

Разметка HTML

Меню ресторана "Ромашка"

Кухня	Холодные блюда		Горячие блюда		Десерты
	Салаты	Закуски	Первые блюда	Вторые блюда
Русская	Винегрет	Язык с хреном	Щи с квашеной капустой	Вареники с картошкой	Печеные яблоки с медом
	Оливье	Студень говяжий	Рассольник домашний	Караси запеченые в сметане	Блинчатый пирог
	Сельдь под "шубой"	Судак заливной	Мясная солянка	Котлеты "Пожарские"	Пирожное "Картошка"
Испанская	Севиче из гребешков	Эмпанадас	Хлебный суп с чесноком	Паэлья с морепродуктами	Чуррос
	Тимбал из авокадо и тунца	Ахотомате	Астурийская фабада	Свиное раксо	Альмойшавена
	Фасоль с ветчиной	Чанфайна	Рыбный суп с манными клецками	Тортилья картофельная	Бунуэлос
Французская	Вогезский салат	Рийет из курицы	Баклажанный крем-суп "Ренуар"	Картофель огратен	Бриоши
	Салат "Панзанелла"	Делисьез из сыра	Французский тыквенный суп	Гратин из птицы	Лигурийский лимонный пирог
	Тар-тар	Маринованный лосось	Суп "Конти"	Тартифлетт	Саварен "Триумф"

Спецификация CSS даёт неограниченные возможности для оформления таблиц. По умолчанию таблица и ячейки таблицы не имеют видимых границ и фона, при этом ячейки внутри таблицы не прилегают вплотную друг к другу.

Ширина ячеек таблицы определяется шириной их содержимого, поэтому ширина столбцов таблицы может быть разной. Высота всех ячеек ряда одинаковая и определяется высотой самой высокой ячейки.

Форматирование таблиц

1. Границы таблицы border

Таблица и ячейки внутри неё по-умолчанию отображаются в браузере без видимых границ. Границы таблицы задаются свойством border:

Table { border-collapse: collapse; /*убираем пустые промежутки между ячейками*/ border: 1px solid grey; /*устанавливаем для таблицы внешнюю границу серого цвета толщиной 1px*/ }

Границы ячеек заголовка каждого столбца задаются для элемента th:

Th {border: 1px solid grey;}

Границы ячеек тела таблицы задаются для элемента td:

Td {border: 1px solid grey;}

Толщина рамок соседних ячеек не удваивается, поэтому задать границы для всей таблицы можно следующим способом:

Th, td {border: 1px solid grey;}

Внешнюю границу таблицы можно выделить, задав ей увеличенную ширину:

Table {border: 3px solid grey;}

Границы можно задавать частично:

/* устанавливаем для таблицы внешнюю границу серого цвета толщиной 3px */ table {border-top: 3px solid grey; } /* задаём для ячейки тела таблицы границу серого цвета толщиной 1px */ td {border-bottom: 1px solid grey;}

Подробнее о свойстве border вы можете прочитать .

2. Как задать ширину и высоту таблицы

По умолчанию ширина и высота таблицы определяется содержимым её ячеек. Если ширина не задана, то она будет равна ширине самого широкого ряда (строки).

Ширина таблицы и столбцов задаётся с помощью свойства width . Если для таблицы задано table {width: 100%;} , то ширина таблицы будет равна ширине блока-контейнера, в котором она находится.

Ширину таблицы и столбцов обычно задают в px или % , например:

Table {width: 600px;} th {width: 20%;} td:first-child {width: 30%;}

Высота таблицы не задается. Высотой рядов таблицы можно управлять, добавив верхний и нижний padding для элементов и . Фиксировать высоту с помощью свойства height не рекомендуется.

Th, td {padding: 10px 15px;}

3. Как задать фон таблицы

По умолчанию фон таблицы и ячеек прозрачный. Если страница или блок, содержащие таблицу, имеют фон, то он будет просвечиваться сквозь таблицу. Если фон задан и для таблицы и для ячеек, то в местах наложения фона таблицы и ячеек будет виден фон только ячеек. В качестве фона для таблицы в целом и её ячеек могут выступать:
заливка ,
,
.

4. Столбцы таблицы

Модель CSS таблиц ориентирована в основном на строки (ряды), формируемые с помощью тега

. На практике бывают случаи, когда необходимо специальное форматирование столбцов, которое возможно следующими способами:

с помощью тега

Можно задать фон для любого количества столбцов;

с помощью селектора table td:first-child , table td:last-child можно задать стили для первого или последнего столбца таблицы (за исключением первой ячейки заголовка таблицы);

с помощью селектора table td:nth-child(правило отбора столбцов) можно задать стили для любых столбцов таблицы.

Подробнее про CSS-селекторы вы сможете прочитать .

5. Как добавить таблице заголовок

Добавить заголовок в таблицу можно с помощью тега , а с помощью свойства caption-side его можно поместить перед таблицей или под ней. Для горизонтального выравнивания текста заголовка применяется свойство text-align . Наследуется.

...

Таблица № 1

Company	Q1	Q2	Q3	Q4

caption { caption-side: bottom; text-align: right; padding: 10px 0; font-size: 14px; } Рис. 2. Пример отображения заголовка под таблицей

6. Как убрать промежуток между рамками ячеек

Рамки ячеек таблицы по умолчанию разделены небольшим промежутком. Если задать для таблицы border-collapse: collapse , то промежуток уберётся. Свойство наследуется.

Синтаксис

Table {border-collapse: collapse;}
Рис. 3. Пример таблиц со сливающимися и раздельными рамками ячеек

7. Как увеличить промежуток между рамками ячеек

С помощью свойства border-spacing можно менять расстояние между рамками ячеек. Данное свойство применяется к таблице в целом. Наследуется.

Синтаксис

Table {border-collapse: separate; border-spacing: 10px 20px;} table {border-collapse: separate; border-spacing: 10px;} Рис. 4. Пример таблиц с увеличенными промежутками между рамками ячеек

8. Как скрыть пустые ячейки таблицы

Свойство empty-cells скрывает или показывает пустые ячейки. Действует только на ячейки, которые не содержат какой-либо контент. Если для ячейки задан фон, а для таблицы задано table {border-collapse: collapse;} , то ячейка не будет скрыта. Наследуется.

Company	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

table { border: 1px solid #69c; border-collapse: separate; empty-cells: hide; } th, td {border: 2px solid #69c;} Рис. 5. Пример скрытия пустой ячейки таблицы

9. Компоновка макета таблицы с помощью свойства table-layout

Компоновка макета таблицы определяется одним из двух подходов: фиксированный макет или автоматический макет. Под компоновкой в данном случае подразумевается как распределяется ширина таблицы между шириной ячеек. Свойство не наследуется.

Синтаксис

Table {table-layout: fixed;}

10. Лучшие макеты таблиц

1. Горизонтальный минимализм

Горизонтальные таблицы — это таблицы, текст в которых читается по горизонтали. Каждая сущность представляет собой отдельную строку. Вы можете оформить подобные таблицы в минималистском стиле, поместив двухпиксельную границу под заголовком th .

Employee	Salary	Bonus	Supervisor
Stephen C. Cox	$300	$50	Bob
Josephin Tan	$150	-	Annie
Joyce Ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

table { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; background: white; max-width: 70%; width: 70%; border-collapse: collapse; text-align: left; } th { font-weight: normal; color: #039; border-bottom: 2px solid #6678b1; padding: 10px 8px; } td { color: #669; padding: 9px 8px; transition: .3s linear; } tr:hover td {color: #6699ff;}

При большом количестве строк такой дизайн таблиц затрудняет их чтение. Для решения этой проблемы можно добавить однопиксельную границу под всеми элементами td .

Td { border-bottom: 1px solid #ccc; color: #669; padding: 9px 8px; transition: .3s linear; }/*остальной код - как в примере выше*/

Добавление эффекта:hover для элемента tr облегчит чтение таблиц, оформленных в минималистском стиле. При наведении курсора мыши на ячейку, остальные ячейки той же строки выделяются одновременно, что упрощает процесс отслеживания информации, если таблицы имеют несколько столбцов.

Th { font-weight: normal; color: #039; padding: 10px 15px; } td { color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; } tr:hover td {background: #e8edff;}

2. Вертикальный минимализм

Несмотря на то, что подобные таблицы используются редко, тем не менее, вертикально ориентированные таблицы полезны для категоризации или сравнения описания объектов, представленных колонкой. Можно оформить их в минималистском стиле, добавив пробел, разделяющий столбцы.

Th { font-weight: normal; border-bottom: 2px solid #6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: #039; padding: 8px 2px; } td { border-right: 30px solid #fff; border-left: 30px solid #fff; color: #669; padding: 12px 2px; }

3. «Коробочный» стиль

Наиболее надежным стилем для оформления таблиц всех типов, является так называемый «коробочный» стиль. Достаточно подобрать хорошую цветовую гамму, а затем задать цвет фона для всех ячеек. Не забудьте подчеркнуть различие между строками, установив границы в качестве разделителя.

Th { font-size: 13px; font-weight: normal; background: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; padding: 8px; } td { background: #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid transparent; padding: 8px; } tr:hover td {background: #ccddff;}

Самое сложное — найти ту цветовую гамму, которая будет гармонично сочетаться с вашим сайтом. Если сайт нагружен по графике и дизайну, то вам будет довольно трудно использовать этот стиль.

Table { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; max-width: 70%; width: 70%; text-align: center; border-collapse: collapse; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; } th { font-size: 13px; font-weight: normal; background: #e8edff; border-right: 1px solid #9baff1; border-left: 1px solid #9baff1; color: #039; padding: 8px; } td { background: #e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; color: #669; padding: 8px; }

4. Горизонтальная зебра

Зебра-таблица выглядит довольно привлекательной и удобной. Дополнительный цвет фона может служить в качестве визуальной подсказки для людей при чтении таблицы.

Th { font-weight: normal; color: #039; padding: 10px 15px; } td { color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; } tr:nth-child(2n) {background: #e8edff;}

5. Газетный стиль

Для достижения так называемого газетного эффекта, можно применить границы для элементов таблицы и поиграть с ячейками внутри. Легкий, минималистичный газетный стиль может выглядеть так: обыграйте цветовую гамму, добавьте границы, отступы, разные фоны, и эффект:hover при наведении на строку.

Table {border: 1px solid #69c;} th { font-weight: normal; color: #039; border-bottom: 1px dashed #69c; padding: 12px 17px; } td { color: #669; padding: 7px 17px; } tr:hover td {background: #ccddff;}

Table {border: 1px solid #69c;} th { font-weight: normal; color: #039; padding: 10px; } td { color: #669; border-top: 1px dashed #fff; padding: 10px; background:#ccddff; } tr:hover td {background: #99bcff;}

Table {border: 1px solid #6cf;} th { font-weight: normal; font-size: 13px; color: #039; text-transform: uppercase; border-right: 1px solid #0865c2; border-top: 1px solid #0865c2; border-left: 1px solid #0865c2; border-bottom: 1px solid #fff; padding: 20px; } td { color: #669; border-right: 1px dashed #6cf; padding: 10px 20px; }

6. Фон таблицы

Если вы ищете быстрый и уникальный способ оформления таблицы, выберите привлекательное изображение или фото, относящиеся к теме таблицы и установите ее фоном таблицы.

Jpg") no-repeat; background-position: 100% 55px; } th { font-weight: normal; color: #339; padding: 10px 12px; } td { background: url("https://сайт/images/back..png"); background: transparent; }

Влад Мержевич

При большом количестве строк в таблице бывает трудно сопоставлять данные из разных колонок между собой. Для этого требуется визуально отделить одну строку таблицы от другой — либо с помощью линий, либо за счет добавления фонового цвета.

Вначале разберем вариант использования горизонтальных линий. На рис. 1 приведен один из возможных способов акцентирования внимания на строках таблицы. Каждая строка сверху и снизу обрамляется линией, за счет этого взгляд посетителя скользит вдоль них и не перескакивает на соседнюю строку. При этом данные, находящиеся в колонках, также связываются между собой, но уже за счет одновременного выравнивания по левому краю и пустого пространства между колонками.

Линии между строк устанавливаются достаточно просто, для этого следует добавить стилевое свойство border-bottom к селектору TD . Если вокруг таблицы содержится рамка, то нижняя граница получится удвоенной толщины. В этом случае можно убрать нижнюю линию у последней строки или скрыть нижнюю границу у таблицы (пример 1).

Пример 1. Разделение строк таблицы линиями

	2004	2005	2006
Рубины	43	51	79
Изумруды	28	34	48
Сапфиры	29	57	36

В данном примере вертикальные линии между ячейками заголовка добавляются за счет стилевого свойства border , которое используется для селектора TH . При этом возникает пустое пространство толщиной один пиксел между границей таблицы и фоновой областью заголовка.

Применение цвета расширяет возможности по изменению вида таблицы. Например, цвет фона четных и нечетных строк может различаться, как показано на рис. 2.

Для изменения цвета фона нужных строк введем дополнительный класс, назовем его even , и станем добавлять его к четным строкам таблицы, а именно к тегу . Заметьте, что для селектора TR можно задавать только цвет фона через свойство background . Всякие линии, которые установлены для селектора TR , отображаться не будут. Поэтому нижнюю границу проводим у ячейки, применяя свойство border-bottom к селектору TD (пример 2).

Цвет фона нечетных строк определяется путем изменения цвета всей таблицы. Но поскольку для выборочных строк (для которых добавлен параметр class="even" ) устанавливается индивидуальный цвет, то он «перекрывает» цвет фона таблицы. За счет этого и получается чередование цветных строк.

Пример 2. Выделение строк таблицы цветом

	2004	2005	2006
Рубины	43	51	79
Изумруды	28	34	48
Сапфиры	29	57	36
Аметисты	23	64	97

В данном примере двойной линии внизу таблицы не возникает в результате применения свойства border-collapse со значением collapse к селектору TABLE . Этот параметр отслеживает появление двойных линий в местах соприкосновения ячеек и заменяет их одинарными линиями. Заметим, что в разных браузерах могут возникнуть разночтения по поводу цвета оставляемых линий в том случае, если цвет границы вокруг таблицы не совпадает с цветом линий под строками.