Урок 11: Ещё о возможностях таблицах

Название "Ещё о таблицах" может звучать немного вызывающе. Если вы уже можете создавать таблицы, то уже абсолютно ничто в HTML не может смутить вас.

Что же ещё?

При создании таблиц используются два атрибута: colspan и rowspan.

Colspan - сокращение от "column span/охват столбцов". Colspan используется в тэге <---td> для специфицирования того, сколько столбцов охватывает данная ячейка:

Пример 1:

           <---table border="1">
             <---tr>
               <---td colspan="3">Ячейка 1<---/td>
             <---/tr>
             <---tr>

               <---td>Ячейка 2<---/td>
               <---td>Ячейка 3<---/td>
               <---td>Ячейка 4<---/td>
             <---/tr>

           <---/table>

будет выглядеть в браузере:

Установка colspan "3", заставляет ячейку в первом ряду охватывать три столбца. Если установим colspan "2", ячейка охватит только два столбца, и понадобится вставить дополнительные ячейки в первый ряд, чтобы ячейки ровно распределились на два ряда.

Пример 2:

           <---table border="1">

             <---tr>
               <---td colspan="2">Ячейка 1<---/td>
               <---td>Ячейка 2<---/td>
             <---/tr>
             <---tr>

               <---td>Ячейка 3<---/td>
               <---td>Ячейка 4<---/td>
               <---td>Ячейка 5<---/td>
             <---/tr>

           <---/table>

будет выглядеть в браузере:

А как насчёт rowspan?

Как вы уже могли догадаться, rowspan специфицирует, сколько рядов охватывает данная ячейка:

Пример 3:

           <---table border="1">
             <---tr>
               <---td rowspan="3">Ячейка 1<---/td>
               <---td>Ячейка 2<---/td>
             <---/tr>

             <---tr>
               <---td>Ячейка 3<---/td>
             <---/tr>
             <---tr>
               <---td>Ячейка 4<---/td>

             <---/tr>
           <---/table>

будет выглядеть в браузере:

В этом примере rowspan имеет значение "3" в ячейке Ячейка 1. Это указывает, что ячейка должна охватывать три ряда (свой собственный ряд плюс ещё два). Ячейка 1 и Ячейка 2 при этом остаются в одном ряду, а Ячейка 3 и Ячейка 4 образуют отдельные ряды.

Удивлены? Ладно, это не так сложно. Неплохо будет нарисовать таблицу на бумаге до начала работы в HTML.

Неудивительно? Тогда вернитесь к началу и создайте пару таблиц с использованием colspan и rowspan.