Прогресс завершения курса:

Таблицы

Для добавления таблиц используется тег <table>.

Таблицы разделяются на строки/ряды при помощи тега <tr>.

Строки таблицы разделяются на столбцы при помощи тега <td>.

Ниже пример таблицы с одной строкой и тремя столбцами:

Теги <td> выступают в качестве контейнеров для содержимого таблицы.
В них можно заключать множество HTML-элементов: текст, изображения, списки, другие таблицы и прочее.

Атрибуты border и colspan

С помощью атрибута border можно заключить таблицу в рамку:

Значение толщины границы не обязательно явно указывать в px, пиксели используются по умолчанию.

Ячейка таблицы может охватывать два или более столбца при помощи атрибута colspan:

<table border="2">
<tr>
<td>1 ячейка</td>
<td>2 ячейка</td>
<td>3 ячейка</td>
</tr>
<tr>
<td><br></td>
<td colspan="2"></td>
</tr>
</table>

Результат:

Помимо атрибута colspan существует атрибут rowspan, делающий то же самое, но вместо столбцов ячейка будет занимать несколько рядов, иными словами – будет увеличиваться в высоту.

Например:

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

Результат:

⇐ Назад

В главное меню

Тест.
Основы HTML 2 ⇒