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