Книга: HTML, XHTML и CSS на 100%

3.4. Граница таблицы

3.4. Граница таблицы

В рассмотренном выше примере в таблице и ее ячейках отсутствовали границы. Граница таблицы создается с помощью атрибута border элемента TABLE. Ширина границы таблицы указывается в пикселах. Если атрибут border не указан, то таблица выводится без видимой рамки. Благодаря атрибуту bordercolor можно задать цвет границы таблицы, указав код цвета. Добавим к уже созданной таблице черную границу шириной четыре пиксела.

Для этого изменим строку

<table>

на

<table border="4" bordercolor="#000000">

Граница таблицы (и другие элементы сайта) в окне каждого браузера отображается по-разному. На рис. 3.5 показано, как созданная таблица отображается в окне стандартного браузера Internet Explorer, а на рис. 3.6 эта же таблица изображена в браузере Opera. Опытные веб-программисты стараются просматривать созданную страницу под разными типами браузеров, чтобы все везде выглядело одинаково. У каждого браузера свои капризы, так что создать сайт, чтобы все выглядело одинаково в любом браузере, – задача непростая.


Рис. 3.5. Отображение таблицы в окне Internet Explorer


Рис. 3.6. Отображение таблицы в окне Opera

Из рис. 3.5 видно, что между границами ячеек и внешней границей таблицы существует свободное пространство. Это пространство легко регулируется атрибутами cellspacing и cellpadding элемента TABLE. Атрибут cellspacing определяет расстояние между ячейками таблицы в пикселах, а атрибут cellpadding – между содержимым ячейки и ее границей.

В листинге 3.2 приведен пример таблицы, у которой расстояние между содержимым ячеек и границей равно 10 пикселов, а расстояние между ячейками равно нулю (рис. 3.7).

Листинг 3.2. Код HTML-таблицы с нестандартными расстояниями между ячейками и границей

<html>

<head>

<title>Простая HTML-таблица</title>

</head>

<body>

<table border="4" bordercolor="#000000" cellspacing="0" cellpadding="10">

<caption>Это заголовок таблицы</caption>

<tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>

<tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>

<tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>

</table>

</body>

</html>


Рис. 3.7. Таблица с нестандартными расстояниями между ячейками и границей

Получив некоторые навыки работы с границей таблицы, вы можете приступать к управлению ее отображением. С помощью атрибута frame будем управлять отображением внешней границы, а с помощью атрибута rules – внутренними границами таблицы. Атрибут frame может принимать следующие значения:

• above – отображается только верхняя линия границы;

• below – видна только нижняя линия границы;

• box – отображается внешняя граница таблицы;

• border – видна внешняя граница таблицы (аналогично box);

• hsides – отображаются только горизонтальные линии границы;

• lhs – видна только левая линия границы;

• rhs – отображается только правая линия границы;

• void – внешняя граница таблицы не отображается;

• vsides – видны только вертикальные линии границы.

Frame и rules – это новые атрибуты в HTML, они поддерживаются только последними версиями браузеров.

Атрибут rules может принимать следующие значения:

• all – граница отображается вокруг каждой ячейки;

• cols – видны только вертикальные границы между столбцами;

• groups – отображаются только вертикальные границы между группами столбцов или горизонтальные границы между группами строк;

• none – границы между ячейками не отображаются;

• rows – видны только горизонтальные границы между группами строк.

В листинге 3.3 приведен пример использования атрибутов frame и rules.

Листинг 3.3. Код HTML-таблицы с частичным отображением линий внешней и внутренней границ

<html>

<head>

<title>Простая HTML-таблица</title>

<head>

<body>

<table border="4" bordercolor="#000000" cellspacing="0" cellpadding= "10" frame= Hsides rules= Cols>

<caption>Склонение слова пиксел по падежам </caption>

<tr><th>Падеж</th><th>Пример </th></tr>

<tr><td>Им. </td><td>пиксел </td></tr>

<tr><td>Рд. </td><td>пиксела </td></tr>

<tr><td>Дт. </td><td>пикселу </td></tr>

<tr><td>Вт. </td><td>пиксел </td></tr>

<tr><td>Тв. </td><td>пикселом </td></tr>

<tr><td>Пр. </td><td>о пикселе </td></tr>

</table>

</body>

</html>

На рис. 3.8 показано, как рассмотренная таблица будет отображаться в окне браузера. У таблицы есть горизонтальные линии внешней и вертикальные линии внутренней границы, так как именно такие значения мы задали соответствующим атрибутам rules и frame.


Рис. 3.8.HTML-таблица с частичным отображением линий внешней и внутренней границ

Оглавление книги

Оглавление статьи/книги
Похожие страницы

Генерация: 2.802. Запросов К БД/Cache: 3 / 0
поделиться
Вверх Вниз