Добавление таблицы
В 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