HTML-теги таблицы.


Рассмотрим html-теги таблицы используются не только для построения таблицы с данным внутри документа, но и для «табличной» верстки страниц, которая, правда, сегодня уступает по возможностям блочной верстке с использованием тегов div. В данной статье мы рассмотрим формирование именно таблицы с данными внутри документа. Вы также можете почитать про другие основные html-теги.

Главные теги любой таблицы:

<table> — начало описания таблицы
</table> — конец описания таблицы
<tr> — начало строки
</tr> — конец строки
<td> — начало ячейки
</td> — конец ячейки

Таблица также может включать в себя первую строку, которая содержит заголовки колонок. В этом случае, первая строка заключается в теги <thead></thead>, а все остальные строки формируют ‘тело’ таблицы и заключаются в тег <tbody></tbody>.

Атрибут border задает толщину границ таблицы.

Давайте рассмотрим пример:

Имя Возраст Город
Иван 19 Москва
Игорь 25 Екатеринбург

Код таблицы:

1
2
3
4
5
6
7
8
9

<table border='1'>
<thead> 
<tr><td>Имя</td><td>Возраст</td><td>Город</td></tr>
</thead>
<tbody>
<tr><td>Иван</td><td>19</td><td>Москва</td></tr>
<tr><td>Игорь</td><td>25</td><td>Екатеринбург</td></tr>
</tbody>
</table>

Если мы хотим, чтобы какие-то данные занимали две ячейки, то мы можем использовать для тега td атрибут colspan.

1

<td colspan='2'></td>
Имя Возраст Город
Иван 19
Игорь 25 Екатеринбург 
1
2
3
4
5
6
7
8
9

<table border='1'>
<thead> 
<tr><td>Имя</td><td>Возраст</td><td>Город</td></tr>
</thead>
<tbody>
<tr><td>Иван</td><td colspan ='2'>19</td></tr>
<tr><td>Игорь</td><td>25</td><td>Екатеринбург</td></tr>
</tbody>
</table>

Для вертикального объединения ячеек существует атрибут rowspan:

1
2
3
4
5
6
7
8
9

<table border='1'>
<thead> 
<tr><td>Имя</td><td>Возраст</td><td>Город</td></tr>
</thead>
<tbody>
<tr><td rowspan ='2'>Иван</td><td>19</td><td>Москва</td></tr>
<tr><td>25</td><td>Екатеринбург</td></tr>
</tbody>
</table>

Мы можем задавать размеры нашей таблицы по горизонтали:

1
2
3

<table width='500' border='1'>
<tr><td></td><td></td></tr>
</table>

В данном случае, это 500 пикселей. Размер также может быть указан в процентах:

1

<table width = "70%">

Атрибут cellpadding позволяет задать отступы между содержимым ячеек и их границами.

1
2
3

<table width='500' cellpadding='5' border='1'>
<tr><td>Игорь</td><td>Сергей</td></tr>
</table>
Игорь Сергей

Использование css позволяет сделать таблицы более красивыми и аккуратными.

Другие посты

Категория: HTML

Оставить комментарий