Вы здесь

Таблицы II

Ранее, в учебнике "HTML начального уровня", таблицы могли показаться достаточно сложными конструкциями. Ведь может оказаться не так просто визуально увидеть двухмерную сетку в одномерных строках кода.

Что ж, на самом деле все еще сложнее. И виноваты в этом атрибуты rowspan и colspan.

Следующий код похож на тот, что приведен в уроке Таблицы учебника "HTML начального уровня":

<table border="1">
   <tr>
      <th>Заголовок столбца 1</th>
      <th>Заголовок столбца 2</th>
      <th>Заголовок столбца 3</th>
   </tr>
   <tr>
      <td>Строка 2, ячейка 1</td>
      <td colspan="2">Строка 2, ячейка 2, также захватывается Строка 2, ячейка 3</td>
   </tr>
   <tr>
      <td rowspan="2">Строка 3, ячейка 1, также захватывается Строка 4, ячейка 1</td>
      <td>Строка 3, ячейка 2</td>
      <td>Строка 3, ячейка 3</td>
   </tr>
   <tr>
      <td>Строка 4, ячейка 2</td>
      <td>Строка 4, ячейка 3</td>
   </tr>
</table>

Однако, внимательно присмотревшись, вы заметите и изменения, произошедшие внутри тега table. Во-первых, мы заменили теги td первой строки на теги th. В то время как тег td – стандартная ячейка данных, тег th – ячейка-заголовок. Как и в случае тега td, эти теги должны находиться внутри тега tr.

Мы также в некоторых тегах td использовали атрибуты colspan и rowspan. Если вы посмотрите этот код в браузере, то увидите, что теперь на второй строке в таблице вместо трех ячеек всего две – вторая ячейка захватывает второй и третий столбцы. Атрибут colspan будет объединять столько ячеек, какое значение ему присвоено. Это значит, что в нашем примере необходимость в третьем теге td отпала, так как две ячейки сливаются в одну.

Атрибут rowspan аналогичен атрибуту colspan за исключением того, что он позволяет объединять строки, а не столбцы. Тут также объединяемые ячейки нужно удалять.

Более подробно о таблицах вы узнаете в учебнике "HTML продвинутого уровня".