HTML, XHTML и CSS на 100%. Игорь Квинт
Чтение книги онлайн.
Читать онлайн книгу HTML, XHTML и CSS на 100% - Игорь Квинт страница 27
Рис. 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.
<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-таблица с частичным отображением линий внешней и внутренней границ
3.5. Ширина и высота таблицы и ячеек
Ширина таблицы задается атрибутом width элемента TABLE. Значение можно задавать как в абсолютных единицах (width="2 5 0"), так и в относительных (width="80 %"). Например, задав значение ширины в 600 пикселов, можно быть уверенным, что таблица поместится в окне браузера при любом разрешении монитора. Если же ширина задается в процентах, то они высчитываются от ширины окна браузера или от ширины ячейки