Использование CSS для добавления внутренних границ в таблицу HTML

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

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

Границы таблицы CSS

Когда вы используете CSS для добавления границ в таблицы, он только добавляет границу вокруг внешней стороны таблицы. Если вы хотите добавить внутренние строки в отдельные ячейки этой таблицы, вам нужно добавить границы к внутренним элементам CSS. Вы можете использовать тег HR для добавления строк внутри отдельных ячеек.

Чтобы применить стили, описанные в этом уроке, вам нужна таблица на веб-странице. Затем вы создаете таблицу стилей как внутреннюю таблицу стилей в заголовке вашего документа (если вы имеете дело только с одной страницей) или прикрепляетесь к документу как внешняя таблица стилей (если сайт имеет несколько страниц). Вы добавляете стили для добавления внутренних линий в таблицу стилей.

Прежде чем ты начнешь

Определите, где вы хотите, чтобы строки отображались в таблице. У вас есть несколько вариантов, в том числе:

• Окружать все ячейки, чтобы сформировать сетку
• Позиционирование линий между столбцами
• Только между рядами
• Между конкретными столбцами или строками.

Вы также можете расположить линии вокруг отдельных ячеек или внутри отдельных ячеек.

Как добавить строки вокруг всех ячеек таблицы

Чтобы добавить строки вокруг всех ячеек в таблице, создав эффект сетки, добавьте следующее в таблицу стилей:

td, th {граница: сплошной 1px черный;}

Как добавить строки между столбцами в таблице

Чтобы добавить строки между столбцами для создания вертикальных строк, которые выполняются сверху вниз в столбцах таблицы, добавьте следующее в таблицу стилей:

td, th {border-left: solid 1px black;}

Если вы не хотите, чтобы вертикальные линии отображались в первом столбце, вы добавляете класс в го а также тд клетки. В этом примере предположим, что класс без границ на этих ячейках и удалить границу с помощью правила CSS. Класс HTML, который вы используете:

не класс = «нет границы»>

Затем добавьте следующий стиль в таблицу стилей:

.без границ {border-left: none;}

Как добавить строки между строками в таблице

Как и при добавлении строк между столбцами, вы можете добавить горизонтальные линии между строками с одним простым стилем, добавленным в таблицу стилей, следующим образом:

tr {border-bottom: solid 1px black;}

Чтобы удалить границу со дна таблицы, вы еще раз добавите класс к этому

тег:

не класс = «нет границы»>

Добавьте следующий стиль в таблицу стилей:

.без границ {border-bottom: none;}

Как добавить строки между конкретными столбцами или строками в таблице

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

класс = «боковой границы»>

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

класс = «границы снизу»>

Затем добавьте CSS в таблицу стилей:

.border-side {border-left: solid 1px black;}.border-bottom {border-bottom: solid 1px black;}

Как добавить строки вокруг отдельных ячеек в таблице

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

класс = «границы»>

Затем добавьте следующий CSS в таблицу стилей:

.border {граница: сплошной 1px черный;}

Как добавить строки внутри отдельных ячеек в таблице

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

Полезные советы

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

Таблица {пограничный крах: сбой;}

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