Игорь Квинт

HTML, XHTML и CSS на 100%


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

но разной ширины и высоты.

      Рис. 3.9. Ширина таблицы равна 80 % от ширины окна браузера

      Рис. 3.10. Ширина и высота таблицы равна 300 пикселам

      Ширина первой таблицы равна 80 % от размера окна браузера, а первый столбец этой таблицы занимает 50 % от всей ширины таблицы. Высота первой строки равна 100 пикселам.

      Вторая таблица квадратная, ширина стороны равна 300 пикселам. В листингах 3.4 и 3.5 приведены коды страниц, содержащих описанные таблицы.

Листинг 3.4. Код таблицы шириной 80 % от ширины окна браузера

      <html>

      <head>

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

      </head>

      <body>

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

      <caption>Ширина таблицы 80%</caption>

      <tr><th height="100" width="50%">Заголовок 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.5. Код таблицы шириной 300 пикселов

      <html>

      <head>

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

      </head>

      <body>

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

      <caption>Ширина таблицы 300 пикселов</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.6. Группировка строк и столбцов

      В стандарте HTML 4 появились новые элементы для группировки (не объединения, а именно группировки) строк и столбцов таблицы в группы с общими свойствами.

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

      Полезным атрибутом элементов COLGROUP и COL является атрибут span со значением n. Атрибут распространяет свойства, заданные этими элементами на n столбцов в группе.

      <table>

      <col span=2 style="color:red">

      <tr><td> Этот текст будет красным цветом </td>

      <td> И этот текст будет красным цветом </td>

      <td> А этот текст будет черным цветом </td></tr>

      </table>

      Для группировки строк таблицы служат элементы THEAD, TBODY и TFOOT. Их использование существенно облегчает компоновку и форматирование таблиц.

      Для создания группы заголовков для столбцов таблицы используют элемент THEAD. Его допускается использовать в пределах таблицы только один раз. Для создания одной или нескольких групп строк таблицы, содержащих основные данные, применяется элемент TBODY. Элемент TFOOT позволяет