Таблицы очень полезны для сайта.

Первое, что с помощью них можно сделать - это размещать, конечно, всевозможные отчеты. Практически любой отчет имеет шапку и сами данные, расположенные в ячейках таблицы.

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

Основные теги таблицы:

[table][/table] - тег TABLE - главный контейнер для таблицы, внутри которого содержатся другие элементы таблицы - столбики и ряды.

[tr][/tr] - тег TR – Ряды/Строки создаются с помощью этого тега. Они размещаются Внутри контейнера [table]……[/table]. Эти теги и определяют количество рядов/строк.

[td][/td] - тег TD – Столбики/Ячейки создаются с помощью этого тега. Внутри контейнеров [table][tr]……[/tr][/table] размещаются столбики/ячейки.

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

[table border="1"]
[tr][td]Строка 1 Ячейка 1[/td][td]Строка 1 Ячейка 2[/td][td]Строка 1 Ячейка 3[/td][/tr]
[tr][td]Строка 2 Ячейка 1[/td][td]Строка 2 Ячейка 2[/td][td]Строка 2 Ячейка 3[/td][/tr]
[/table]

Полезные атрибуты таблицы в HTML:

Границы таблицы в HTML – border, к тегу [table] применяется атрибут «border» равный 1 и тогда наша таблица получает видимую окантовку.

Объединение ячеек в таблице - атрибуты «colspan»и «rowspan» применяются к тегу [td].

* colspan — объединение ячеек по горизонтали;
* rowspan — объединение ячеек по вертикали.

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

[table border="1"]
[caption]Это демонстрация тега table[/caption]
[tr][td rowspan="2" bgcolor="white"]Строка 1 Ячейка 1[/td][td colspan="2" bgcolor="white"]Строка 1 Ячейка 3[/td][/tr]
[tr][td bgcolor="white"]Строка 2 Ячейка 2[/td][td bgcolor="white"]Строка 2 Ячейка 3[/td][/tr]
[/table]

Расстояние между ячейками таблицы:

* расстояние между текстом и границей ячейки - атрибут «cellpadding» применяется к тегу [table]

* расстояние между ячейками в таблице - атрибут «cellspacing» применяется к тегу [table]

Фон таблицы HTML - к тегу [table] и [td] применяются такие атрибуты:

* BGCOLOR – задает цвет фона всей таблицы или каждой ячейке по отдельности. Цвет задается кодом или словом.

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

Если Вы захотите вставить картинку в таблицу HTML, то между тегом [td]вставляться тег [img]. Например [td][img src="s1200.webp"][/td]

Для задания ширины и высоты таблицы HTML, используют к тегу [table] атрибут «width» и «height». Например [table border="1" width="800" height="600"]

* Width – ширина таблицы

* Height – высота таблицы

Чтобы выровнять содержимое в таблице HTML, используют атрибуты «align» и «valign», применяются они к тегу [td]:

ALIGN – горизонтальное выравнивание содержимого в таблице. (left - выравнивание к левой части; center – выравнивание по центру; right - выравнивание к правой части)

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

* Чтобы выровнять таблицу по центру, нужно обхватить таблицу тегом [center][/center]

Дополнительные теги к таблице

[thead] - Тег строк заголовка таблицы, [th] - Ячейка заголовка таблицы (должен использоваться внутри тега [thead])

[caption] - Описание или краткое содержание таблицы, должен размещаться сразу после тега [table]


Если Вам понравилась публикация, подписывайтесь на канал,

Ставьте лайки, тогда будем еще писать такой контент :)

Если есть вопросы или пожелания, то пишите, в комментариях.


*** Внимание: Угловые скобки в описании нельзя разместить - поэтому вместо них использованы квадратные [ ] !!! ***

#таблица #сайт #теги #строка #ячейка #столбик #ряд #дизайн #design #образование #технологии #html #table #row #tags #education #technology #урок #видеоурок #lesson

Подписывайтесь на наш канал в YouTube: [ Ссылка ]

Вступайте в нашу группу ВК: [ Ссылка ]

Задавайте вопросы – постараюсь ответить 😊
Удачи в таких классных начинаниях!

свернуть