Как сделать таблицу в HTML | Уроки HTML, CSS

Таблицы очень полезны для сайта. Первое, что с помощью них можно сделать - это размещать, конечно, всевозможные отчеты. Практически любой отчет имеет шапку и сами данные, расположенные в ячейках таблицы. Второе – если у таблицы сделать бордюр прозрачный, то есть он должен быть равен нулю пикселей, то тогда такую таблицу можно использовать на сайте для позиционирования элементов. Основные теги таблицы: [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=““][/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: Вступайте в нашу группу ВК: Задавайте вопросы – постараюсь ответить 😊 Удачи в таких классных начинаниях!