Таблица с помощью HTML-кода

Таблица задаётся тегом «table», который обозначает начало и конец. Внутрь этого тега можно вставить атрибуты, которые будут влиять на всю таблицу целиком. Строчки определяются при помощи «tr», а столбцы – «td». В реальности код выглядит так:

<table>
<tr>
<td>Первая строчка, первый столбец</td>
<td>Первая строчка, второй столбец</td>
</tr>
<tr>
<td>Вторая строчка, первый столбец</td>
<td>Вторая строчка, второй столбец</td>
</tr>
</table>

В таблице применяется несколько атрибутов:

1. «Border» меняет толщину сетки. В норме толщина сетки минимальна (равна 1 пикселю), для жирной сетки нужно использовать числа от 2 (только целые положительные). Чтобы удалить сетку, нужно поставить «0».

2. «Width» меняет ширину таблицы или столбцов. При этом нужно помнить, что данные элемент не может использоваться в теге «tr», потому что это банально нелогично. Вставляется он внутрь тега «td» или для всей таблицы – в «table».

3. «Height» подобен предыдущему атрибуту, но меняет высоту. Соответственно, он не применяется в столбцах («td»). Применяется в тегах «tr» или целиком для таблицы – в «table».

Интересный момент, что если изменить размер только одной ячейки, то другие не станут меньше, а просто разъедутся в стороны. Возникает вопрос: как в html объединить ячейки в таблице? Если просто удалить одну из ячеек, то ничего не получится (можете попробовать). Для этого нужно использовать следующие атрибуты:
1. Элементом «colspan» указывается число столбцов (слева направо), которое занимает ячейка.
2. Элементом «rowspan» определяется количество строк (сверху вниз), которое занимает ячейка.

Применим эти знания на практике:

<table border="3" width="400" height="400">
<tr>
<td>Строка №1, колонка №1</td>
<td>Строка №1, колонка №2</td>
<td>Строка №1, колонка №3</td>
<td rowspan="3">Строка 1, колонка 4</td>
</tr>
<tr>
<td>Строка №2, колонка №2</td>
<td colspan="2" rowspan="2">Строка №2, колонка №1</td>
</tr>
<tr>
<td>Строка №3, колонка №1</td>
</tr>
<tr>
<td colspan="4">Строка №4, колонка №1</td>
</tr>
</table>

Результат:

Строка №1, колонка №1 Строка №1, колонка №2 Строка №1, колонка №3 Строка 1, колонка 4
Строка №2, колонка №2 Строка №2, колонка №1
Строка №3, колонка №1
Строка №4, колонка №1

Вот так можно делать ячейки в таблице, которые будут занимать несколько столбцов и строк.


Просмотры: 118
 Обсуждения: 0 Обсудить

Мы используем файлы cookie и данные о IP-адресе для улучшения работы ресурса. Продолжая использовать сайт, вы соглашаетесь с условиями использования данных технологий.