Как добавить пространство между столбцами, не затрагивая строки в таблице HTML?
Свойства padding left и right используются для добавления интервала между столбцами, не влияя на общий макет таблицы. Это свойство позволяет разработчикам добавлять дополнительный интервал, и этот интервал не влияет на строки.
Выполните следующие шаги:
Шаг 1: Создайте структуру таблицы
Предположим, что в HTML-файле есть таблица, содержащая четыре строки и три столбца:
< стол >
< тр >
< й > Имя < / й >
< й > Сорт < / й >
< й > Город < / й >
< / тр >
< тр >
< тд > Джон < / тд >
< тд > бакалавр химии < / тд >
< тд > Лондон < / тд >
< / тр >
< тр >
< тд > Александр < / тд >
< тд > бакалавр математики < / тд >
< тд > Токио < / тд >
< / тр >
< тр >
< тд > Джозеф < / тд >
< тд > БС КС < / тд >
< тд > Нью-Йорк < / тд >
< / тр >
< / стол >
После выполнения приведенного выше кода веб-страница выглядит так:
Вывод подтверждает, что структура таблицы создана.
Шаг 2: Применение горизонтального отступа
Чтобы добавить интервал между столбцами с левой стороны, используйте « padding-left Свойство CSS. После применения этого свойства данные выглядят как правильное выравнивание. Причина в том, что заполнение применяется только с левой стороны.
Теперь выберите элемент «td» в части стилей CSS, которые можно применить с помощью встроенного метода. Затем добавьте отступ « 50 пикселей », чтобы добавить интервал и добавить свойство границы для лучшей визуализации:
тд {отступ слева: 50px;
граница : 2 пикселя сплошного красного цвета;
}
После выполнения кода веб-страница выглядит так:
Вывод показывает, что пространство добавлено между столбцами таблицы.
Теперь, чтобы установить отступ с правой стороны, « padding-right «Использовано имущество. Таким же образом, но теперь данные ячейки выглядят « выровнено по левому краю ». Код:
тд {отступ слева: 50px;
граница : 2 пикселя сплошного красного цвета;
}
После выполнения приведенного выше кода веб-страница выглядит так:
Вывод подтверждает, что пространство между столбцами увеличено за счет применения отступов с правой стороны.
Шаг 3: Комбинация заполнения слева и справа
Как и в предыдущем шаге, данные не выровнены по центру в обоих случаях, что делает данные непрофессиональными. Чтобы сделать его заметным, не нарушая смысла дизайна. Оба свойства можно использовать одновременно, как показано ниже:
тд {отступ справа: 60px;
отступ слева: 60px;
граница : 2 пикселя сплошного красного цвета;
}
После выполнения приведенного выше кода веб-страница выглядит так:
Вывод подтверждает, что между столбцами добавлено пространство, а данные также выровнены по центру.
Заключение
Пространство между столбцами таблицы можно добавить с помощью свойств padding left и right. Эти свойства добавляют к ячейке дополнительное пространство справа и слева. Оба свойства можно использовать одновременно или по отдельности. В этой статье успешно продемонстрировано, как добавить интервал между столбцами таблицы, не затрагивая строки.