Объединение ячеек

Объединение ячеек

Для объединения двух и более ячеек в одну используется параметр colspan тега <td>. Он устанавливает, сколько ячеек следует объединить по горизонтали. Аналогично работает и параметр rowspan, с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. Так, <td colspan="3"> заменяет три ячейки, поэтому в следующей строке должно быть три тега <td> или конструкция вида <td colspan="2">...</td><td>...</td>. Если число ячеек в каждой строке не будет совпадать, появятся пустые фантомные ячейки. В листинге 12.3 приведен хотя и валидный, но неверный код, в котором как раз проявляется подобная ошибка.

Листинг 12.3. Неверное объединение ячеек

<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
   <meta  http-equiv="Content-Type" content="text/html; charset=windows-1251">
   <title>Неправильное использование параметра  colspan</title>
 </head>
 <body>
   <table border="1" cellpadding="5">
    <tr>
     <td colspan="2">Ячейка 1</td>
     <td>Ячейка 2</td>
    </tr>
    <tr>
     <td>Ячейка 3</td>
     <td>Ячейка 4</td>
    </tr>
   </table>
 </body>
</html>

Результат данного примера показан на рис. 12.5.

Рис. 12.5

Рис. 12.5. Появление дополнительной ячейки в таблице

В первой строке примера задано три ячейки, две из них объединены с помощью параметра colpsan, а во второй строке добавлено только две ячейки. Из-за этого возникает дополнительная ячейка, которая отображается в браузере. Ее хорошо видно на рис. 12.5.

Правильное использование параметров colspan и rowspan продемонстрировано в листинге 12.4.

Листинг 12.4. Объединение ячеек по вертикали и горизонтали

<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Объединение ячеек</title>
 </head>
 <body>
  <table border="1" cellpadding="4" cellspacing="0">
   <tr>
    <td rowspan="2">Браузер</td>
    <th colspan="2">Internet  Explorer</th>
    <th colspan="3">Opera</th>
    <th colspan="2">Firefox</th>
   </tr>
   <tr>
    <th>6.0</th><th>7.0</th><th>7.0</th><th>8.0</th><th>9.0</th><th>1.0</th><th>2.0</th>
   </tr>
   <tr align="center">
    <td>Поддерживается</td>
    <td>Нет</td><td>Да</td><td>Нет</td><td>Да</td><td>Да</td><td>Да</td><td>Да</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 12.6.

Рис. 12.6

Рис. 12.6. Таблица с объединенными ячейками

В данной таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer» , «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.

Зверніть увагу на додаткові посилання

загрузка...

Зверніть увагу на додаткові посилання

Якщо вас цікавить...

Головний розділ

Сторінки, близькі за змістом