Введение в теги HTML таблицы

Таблица HTML предоставляет способ получения или определения данных, таких как текст, изображения, ссылки и т. Д., В виде строк и столбцов ячеек. Таблицы HTML могут быть созданы с помощью

тег. По умолчанию данные таблицы выровнены. В этой теме мы узнаем о тегах HTML-таблиц.

Таблица может быть создана с помощью

теги.

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

Данные таблицы могут быть структурированы в

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

    Синтаксис














    Заголовок таблицы 1Заголовок таблицы 2
    Ячейка данных 1Ячейка данных 2
    Ячейка данных 3Ячейка данных 4

    Примеры тегов таблицы HTML

    Вот примеры тегов таблицы HTML, приведенные ниже

    1. Базовое использование таблицы



    HTML Table Tag Usage


















    имяСтрана
    ДониИндия
    Дэвид МиллерЮжная Африка
    Джо РутАнглия

    Сохраните код с расширением .html и откройте его в браузере. Он будет отображать следующий вывод:

    2. Заголовок таблицы

    Заголовок таблицы можно указать с помощью тега < caption > .

    пример



    HTML Table Tag Usage


    Это заголовок таблицы
















    имяСтрана
    ДониИндия
    Дэвид МиллерЮжная Африка
    Джо РутАнглия

    Приведенный выше код будет отображать следующий вывод:

    3. Интервал между ячейками таблицы

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

    пример



    HTML Table Tag Usage


















    имяСтрана
    ДониИндия
    Дэвид МиллерЮжная Африка
    Джо РутАнглия

    Приведенный выше код будет отображать следующий вывод:

    4. Заполнение ячейки таблицы

    Заполнение ячеек таблицы может быть определено с помощью атрибута cellpadding. Атрибут cellpadding - расстояние между границей ячейки таблицы и данными.

    пример



    HTML Table Tag Usage


















    имяСтрана
    ДониИндия
    Дэвид МиллерЮжная Африка
    Джо РутАнглия

    Приведенный выше код будет отображать следующий вывод:

    5. Атрибуты столбцов и строк

    Две или более строки таблицы можно объединить в одну строку с помощью атрибута rowspan, а столбцы таблицы можно объединить в один столбец с помощью атрибута colspan.

    пример



    HTML Table Tag Usage



















    Первый столбецКолонка втораяКолонка третья
    Первый рядВторой рядРяд три
    Ряд четвертыйПятый ряд
    Шестой ряд

    Код будет отображать следующий вывод:

    6. Фон для таблицы

    Фон таблицы может быть создан с помощью атрибута bgcolor. Границу ячейки таблицы можно указать с помощью атрибута border-color.

    пример



    HTML Table Tag Usage


















    имяСтрана
    ДониИндия
    Дэвид МиллерЮжная Африка
    Джо РутАнглия

    Выполните приведенный выше код, и он отобразит следующий вывод:

    7. Высота и ширина стола

    Высота и ширина таблицы могут быть установлены с помощью атрибутов width и height.

    пример



    HTML Table Tag Usage


















    имяСтрана
    ДониИндия
    Дэвид МиллерЮжная Африка
    Джо РутАнглия

    Приведенный выше код будет отображать следующий вывод:

    8. Укладка ячеек стола

    пример



    HTML Table Tag Usage

    table, th, td (
    border: 1px solid red;
    border-collapse: collapse;
    )
    th, td (
    padding: 15px;
    )
    table#mytable tr:nth-child(even) (
    background-color: #FAD7A0;
    )
    table#mytable tr:nth-child(odd) (
    background-color: #E67E22;
    )
    table#mytable th (
    color: white;
    background-color: teal;
    )


















    имяСтрана
    ДониИндия
    Дэвид МиллерЮжная Африка
    Джо РутАнглия

    Выполните приведенный выше код, вы получите следующий вывод:

    8. Вложенные таблицы

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

    Давайте рассмотрим приведенный ниже пример для вложенной таблицы:

    пример



    HTML Table Tag Usage























    имяСтрана
    ДониИндия
    Дэвид МиллерЮжная Африка
    Джо РутАнглия

    Приведенный выше код будет отображать следующий вывод:

    Атрибуты таблицы

    • align: этот атрибут обеспечивает выравнивание содержимого внутри элемента.
    • bgcolor: этот атрибут определяет цвет фона для таблицы.
    • border: Этот атрибут определяет границу для ячеек таблицы.
    • cellpadding: этот атрибут отображает заполнение между ячейками таблицы и содержимым таблицы.
    • cellspacing: этот атрибут отображает пространство между ячейками таблицы.
    • frame: указывает, какие части внешних границ видны.
    • rules: указывает, какие части внутренних границ видны.
    • сортируемый: этот атрибут сообщает, что таблица сортируемая.
    • Summary: предоставляет тип содержимого таблицы.
    • ширина: этот атрибут сообщает ширину таблицы.
    • высота: этот атрибут определяет высоту таблицы.

    Вывод

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

    Рекомендуемые статьи

    Это руководство по тегам таблиц HTML. Здесь мы обсуждаем примеры тегов таблицы HTML с синтаксисом и атрибутами таблицы. Вы также можете взглянуть на следующие статьи, чтобы узнать больше -

    1. Элементы формы HTML
    2. Создать таблицы в HTML
    3. HTML-теги изображений
    4. Что такое HTML
    5. HTML-фреймы
    6. HTML блоки
    7. Установить цвет фона в HTML с примером

    Категория:

    Инструменты веб-разработки