HTML, XHTML и CSS на 100%. Игорь Квинт

Читать онлайн книгу.

HTML, XHTML и CSS на 100% - Игорь Квинт


Скачать книгу
определяет расстояние между ячейками таблицы в пикселах, а атрибут 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 показано, как рассмотренная таблица будет отображаться в окне браузера.


Скачать книгу