Основы работы с XHTML и CSS

       

Объединение строк и столбцов


Можно объединять ячейки разных строк и столбцов для создания интересных и полезных табличных структур. Кодирование будет не таким уж сложным, если просто следовать строго по каждой строке, определяя, нужно ли кодировать тег <td> для каждой позиции ячейки или можно пропустить тег <td>, так как ячейка уже была объединена. В следующем коде теги <td>, которые не требуется кодировать, выводятся в квадратных скобках []. Эти ячейки уже были объединены другими ячейками, которые расширяют свое положение в таблице.


Рис. 8.36.  Таблица с объединенными строками и столбцами

<style type="text/css"> table {border:outset 1px} table td {border:inset 1px; padding:3px} </style>

<table> <tr> <td colspan="2">Cell 1.1</td> [<td>Cell 1.2</td>] <td>Cell 1.3</td> <td rowspan="2">Cell 1.4</td> </tr> <tr> <td>Cell 2.1</td> <td rowspan="2">Cell 2.2</td> <td>Cell 2.3</td> [<td>Cell 2.4</td>] </tr> <tr> <td>Cell 3.1</td> [<td>Cell 3.2</td>] <td colspan="2">Cell 3.3</td> [<td>Cell 3.4</td>] </tr> </table>

Листинг 8.36. Код для объединения строк и столбцов таблицы (html, txt)



Содержание раздела