Создание таблицы в HTML

Добавление таблицы

В HTML для добавления таблицы используется парный тег <table> </table>. Таблицы состоят из строчек и колонок. Для этого используются парные теги <tr> и <td>.

Рамка таблицы

Ширину рамки таблицы можно настраивать аттрибутом border. Например <table border='1'> означает что у таблицы будет ширина рамки равная 1 пиксел.

Пример таблицы из двух строк и двух столбцов:

код html

<table border='1'>
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>
</table>

Результат:

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

Иногда бывает нужно объединять ячейки таблицы. Для этого используется аттрибуты для ячейки:

colspan — объединение ячеек в строке;

rowspan — объединение ячеек в колонке.

Пример:

html код:

< table border='1' >
< tr>
< td colspan='2'>Первая и вторая ячейки< /td>< td>Третья ячейка< /td>
< /tr>
< tr>
< td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td>
< /tr>
< /table>

результат в браузере:

Пример объединения по вертикали:

код в html

< table border='1 cellpadding='10'>
< tr>
< td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td rowspan="2">Третья и шестая ячейки< /td>
< /tr>
< tr>
< td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>
< /tr>
< /table>

в результате в браузере получим

Добавление заголовка в таблицу

Иногда бывает, нужно добавить заголовка к таблице. Это можно сделать  парным тегом < caption>

пример

код html

<table border='1'>

<caption> Таблица Html </caption>
<tr>
<td>Первая ячейка</td>
<td>Вторая ячейка</td>
</tr>

</table>

в результате получим

Задание размера таблицы

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

width — ширина таблицы, столбца, ячейки;

height — высота таблицы, строки, ячейки.
Размеры можно задать либо в пикселах, либо в процентах.

Пример кода html

< table border='1' height='60px'>
< tr>
< td>Первая ячейка< /td>< td width='45%'>Вторая ячейка< /td>< td>Третья ячейка< /td>
< /tr>
< tr>
< td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td>
< /tr>
< /table>

Результат в браузере

На этом закончим тему о таблицах в html

Язык HTML. Содержание