Создание таблиц в html

Автор: | 27 сентября, 2020

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

Раньше шаблоны сайтов имели табличную структуру, хотя в последнее время набирает популярность структура сайтов на дивах (div и CSS ). 

Для создания таблицы используются следующие элементы:

TABLE – важный элемент для создания таблицы. В основном используется с атрибутом BORDER который задает толщину рамки html таблицы, так как по умолчанию рамка отсутствует.

TR (Table Row) – отвечает за ряды в таблице.

TD (Table Data) – отвечает за начало и конец каждой ячейки ряда html таблицы.

Например, так будет выглядеть таблица из трех рядов и двух столбцов:

<table border=”1″>
<tr>
<td>ряд 1 ячейка 1</td> <td>ряд 1 ячейка 2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
<tr>
<td>ряд 3 ячейка 1</td> <td>ряд 3 ячейка 2</td>
</tr>
</table>

Вот результат:

ряд 1 ячейка 1 ряд 1 ячейка 2
ряд 2 ячейка 1 ряд 2 ячейка 2
ряд 3 ячейка 1 ряд 3 ячейка 2

Таким образом, таблица состоит с <table>, затем идёт <tr>, который указывает на начало нового ряда. В ряду  две ячейки: <td>ряд 1 ячейка 1</td> и <td>ряд 1 ячейка 2</td>. Затем идет закрывающийся тег </tr> и т. д. В самом конце – закрывающийся тег </table>

Также существуют атрибуты, необходимые для объединения ячеек:

COLSPAN – используется, если необходимо объединить ячейки по горизонтали. 

ROWSPAN – используется, если необходимо объединить ячейки по вертикали.

Например:

<table border=”2″>
<tr>
<td colspan=”2″>ряд 1 ячейка 1+2</td> <td>ряд 1 ячейка 3</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td> <td>ряд 2 ячейка 3</td>
</tr>
</table>

В браузере увидим:

ряд 1 ячейка 1+2 ряд 1 ячейка 3
ряд 2 ячейка 1 ряд 2 ячейка 2 ряд 2 ячейка 3

Другой пример:

<table border=”2″>
<tr>
<td rowspan=”2″>Ячейка 1, ряд 1+2</td> <td>ряд 1 ячейка 3</td>
<td>ряд 1 ячейка 2</td>
</tr>
<tr>
<td>ряд 2 ячейка 2</td> <td>ряд 2 ячейка 3</td>
</tr>
</table>

Результат:

Ячейка 1, ряд 1+2 ряд 1 ячейка 2 ряд 1 ячейка 3
ряд 2 ячейка 2 ряд 2 ячейка 3

Дополнительные атрибуты:

CELLPADDING – применяется для изменения расстояния между рамкой каждой ячейки html таблицы и содержащемся в ней материалом.

CELLSPACING – для изменения расстояния между границами соседних ячеек таблицы html.

WIDTH – для изменения ширины таблицы html. Ширину можно задать в пикселах или в процентном соотношении к ширине страницы.

HEIGHT – для изменения высоты таблицы.

Например:

<table border=”1″ cellpadding=”10″>
<tr>
<td>ряд 1 ячейка 1</td><td>ряд 1 ячейка 2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>

Получится:

таблица с атрибутом cellpadding

Еще пример:

<table border=”1″ cellspacing=”10″>
<tr>
<td>ряд 1 ячейка 1</td><td>ряд 1 ячейка 2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>

Увидим:

Таблица с атрибутом cellspacing

Последние атрибуты:

ALIGN – необходим для выравнивания таблицы ячеек по горизонтали значениями left, center, right.

VALIGN – для выравнивания таблицы или ячеек с помощью значений top (прижимает к верху), bottom (к низу), middle (располагает посередине).

BGCOLOR – для изменения фона ячеек в таблице.

BACKGROUND – можно сделать фоном таблицы изображения, указав указав url-путь к нему.

Примечание: задать фон или изображение можно для любой ячейки;
но если необходимо задать фон или изображение во всей таблице – прописываем атрибуты в элементе TABLE.

Например:

<!– зададим ширину, высоту, толщину рамки и фоновый цвет всей таблицы–>
<table width=”450″ height=”120″ border=”2″ bgcolor=”#B09AE9″>
<tr>
<!– эту ячейку менять не будем–>
<td>ряд 1 ячейка 1</td>
<!– содержимое выравниваем по центру и располагаем вверху ячейки–>
<td align=”center” valign=”top”>ряд 1 ячейка 2</td>
</tr>
<tr>
<!– тоже выравниваем по центру, но располагаем внизу ячейки–>
<td align=”center” valign=”bottom”>ряд 2 ячейка 1</td>
<!– содержимое выравниваем по правому краю, вертикально – посередине, и задаем фон–>
<td align=”right” valign=”middle” bgcolor=”yellow”>ряд 2 ячейка 2</td>
</tr>
</table>

Посмотрим, что получилось:

Таблица пример

Предыдущаяцвет фона и текста

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *