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

Иногда вам может понадобиться, чтобы ячейка таблицы занимала не один, а несколько столбцов.

Атрибут colspan может быть использован с элементами <th> и <td> для обозначения, сколько столбцов должна занимать ячейка.

В примере справа вы можете видеть расписание, состоящее из пяти столбцов: первый содержит заголовок строки (день недели), оставшиеся четыре представляют собой часы.

Если вы посмотрите на код ячейки с текстом «География», то увидите, что значение атрибута colspan равно 2, это значит, что ячейка должна занимать два столбца.

Ячейка «Физкультура», расположенная на третьей строке, занимает три столбца.

Вы также можете видеть, что вторая и третья строки состоят из меньшего количества элементов <td>.

Код

<table>
    <tr>
        <th></th>
        <th>9:00</th>
        <th>10:00</th>
        <th>11:00</th>
        <th>12:00</th>
    </tr>
    <tr>
        <th>Понедельник</th>
        <td colspan="2">География</td>
        <td>Mузыка</td>
        <td>Изо</td>
    </tr>
    <tr>
        <th>Вторник</th>
        <td colspan="3">Физкультура</td>
        <td>География</td>
    </tr>
</table>

Результат

Дело в том, что если какая-либо ячейка занимает несколько столбцов, то занятые ею элементы <td> в коде не прописываются.

Для иллюстрации этого примера я использовал несколько стилей CSS с тем, чтобы показать вам, как одна ячейка может занимать сразу несколько столбцов.

---

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

Кроме того, вам может понадобиться сделать так, чтобы одна ячейка занимала несколько строк.

Атрибут rowspan может быть использован с элементами <th> и <td> для обозначения, на сколько строк должна простираться ячейка.

В примере слева вы можете видеть, что телеканал TV1000 показывает фильм с 18:00 до 20:00, а в это время на каналах ТНТ и СТС транслируются по две развлекательные телепередачи (каждая из которых длится один час).

Если вы посмотрите на последний элемент <tr>, то увидите, что он содержит только три элемента, несмотря на то что в таблице на рисунке ниже четыре столбца.

Это произошло потому, что в элементе <tr>, содержащем текст «Фильм», указан атрибут rowspan, благодаря которому он «поглотил» расположенную ниже ячейку.

Код

<table>
    <tr>
        <th></th>
        <th>TV1000</th>
        <th>THT</th>
        <th>CTC</th>
    </tr>
    <tr>
        <th>20:00-21:00</th>
        <td rowspan="2">Фильм</td>
        <td>Ток-шоу</td>
        <td>Юмор</td>
    </tr>
    <tr>
        <th>21:00-22:00</th>
        <td>Ток-шоу</td>
        <td>Мультфильм</td>
    </tr>
</table>

Результат

Для иллюстрации этого примера я использовал несколько параметров стиля CSS с тем, чтобы показать вам, как одна ячейка может занять сразу несколько строк.

Предыдущая страницаСледующая страница