В статье будут рассмотрены несколько вопросов: как сделать HTML таблицу, как добавить строку и ячейку в таблицу, как объединить строки или ячейки в таблице.
Для создания таблицы необходимо использовать тег <table>. Внутри таблицы для создания строк используется тег <tr>, для столбцов - <td>. В итоге, HTML код таблиц выглядит примерно так:
<table border="1" cellspacing="1" cellpadding="1">
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
<tr>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
<td>Ячейка 9</td>
</tr>
</table>
Код из этого примера отобразит на странице следующую стаблицу:
|
Ячейка 1
|
Ячейка 2
|
Ячейка 3
|
|
Ячейка 4
|
Ячейка 5
|
Ячейка 6
|
|
Ячейка 7
|
Ячейка 8
|
Ячейка 9
|
Довольно часто для задания первых строчек таблицы используется не <td>...</td>, а <th>...</th>. В таком случае весь текст в ячейках первой строчки таблицы будет выделен жирным и выравнен по центру.
Разберём атрибуты, которые указаны в примере таблицы:
cellspacing
cellspacing="1" - этот атрибут определят расстояние между ячейками таблицы. Если его поставить, к примеру, равным 10, то таблица будет выглядеть так:
|
Ячейка 1
|
Ячейка 2
|
Ячейка 3
|
|
Ячейка 4
|
Ячейка 5
|
Ячейка 6
|
|
Ячейка 7
|
Ячейка 8
|
Ячейка 9
|
cellpadding
cellpadding="1" - значение этого атрибута атрибута задает отступ от текста внутри ячеек таблицы от стенок. Если поставить значение, к примеру, равным 10, то таблица будет выглядеть так:
|
Ячейка 1
|
Ячейка 2
|
Ячейка 3
|
|
Ячейка 4
|
Ячейка 5
|
Ячейка 6
|
|
Ячейка 7
|
Ячейка 8
|
Ячейка 9
|
border
border="1" - устанавливает толщину рамки таблицы в пикселях. Если поставить значение, к примеру, равным 10, то таблица будет выглядеть так
|
Ячейка 1
|
Ячейка 2
|
Ячейка 3
|
|
Ячейка 4
|
Ячейка 5
|
Ячейка 6
|
|
Ячейка 7
|
Ячейка 8
|
Ячейка 9
|
Рамки таблицы и ячеек можно скрыть совсем, если задать стиль style="border-collapse: collapse;". Читайте подробнее об этом в курсе по CSS.
Высота и ширина таблицы
У тега <table> есть атрибуты, которые задают ширину (width) и высоту (height) таблицы. Значения этих атрибутов задают ширину и высоту в пикселях.
Попробуем задать таблице из примеры ширину в 300 пикселей, с помощью указания атрибута width="300"
|
Ячейка 1
|
Ячейка 2
|
Ячейка 3
|
|
Ячейка 4
|
Ячейка 5
|
Ячейка 6
|
|
Ячейка 7
|
Ячейка 8
|
Ячейка 9
|
Значение width можно задать в процентах от ширины родительского элемента, в котором находится таблица. К примеру, width="50%"
Если задать height="300", то получится такой результат:
|
Ячейка 1
|
Ячейка 2
|
Ячейка 3
|
|
Ячейка 4
|
Ячейка 5
|
Ячейка 6
|
|
Ячейка 7
|
Ячейка 8
|
Ячейка 9
|
