Таблица

Как добавить внутренние линии (границы) в таблицу с помощью CSS

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

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

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

CSS Table Borders

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

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

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

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

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

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

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

таблица border-collapse: collapse; 
> 

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

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

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

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

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

td: first-child, th: first-child border-left: none; 
> 

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

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

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

tr: last-child border-bottom: нет; 
> 

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

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

Например, если вы хотите настроить таргетинг только на второй столбец в каждой строке, вы можете использовать nth-child (2), чтобы применить CSS только ко второму элементу в каждой строке.

td: nth-child (2), th: nth-child (2) Граница слева: сплошная 2px красная; 
> 

То же самое относится и к строкам. Вы можете настроить таргетинг на конкретную строку, используя nth-child .

tr: nth-child (4) border-bottom: сплошной 2px зеленый; 
> 

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

Хотя вы, безусловно, можете использовать псевдоклассы для нацеливания на отдельные ячейки, самый простой способ справиться с такой ситуацией – это CSS-класс. Чтобы добавить линии вокруг отдельных ячеек, вы добавляете класс в ячейки, вокруг которых хотите создать рамку:

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

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

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

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

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

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

Источник

Сетка таблицы

Для создания таблицы показанной на рис. 1 потребуется всего ничего: установить стилевое свойство border для каждой ячейки и воспользоваться свойством border-collapse .

Рис. 1. Вид таблицы с сеткой

При добавлении свойства border к селектору TD или TH между ячейками возникают двойные линии, которые образуются за счет соприкосновения рамок вокруг ячеек. Чтобы этого не произошло, для селектора TABLE указывается свойство border-collapse со значением collapse , как показано в примере 1.

        
 
 
2004
2005
2006
 
 
Рубины
43
51
79
 
 
Изумруды
28
34
48
 
 
Сапфиры
29
57
36
 
 
  

В данном примере также устанавливается цвет фона для ячеек заголовка (тег ) через свойство background .

Как вариант, можно вообще убрать рамку вокруг таблицы, оставив только линии внутри нее (рис. 2).

Рис. 2. Сетка внутри таблицы

При этом удобнее всего будет не убрать рамку, а спрятать ее, задав ей цвет, совпадающий с цветом фона веб-страницы. Так, в примере 2 фон страницы задан белым и такого же цвета используется граница, которая добавляется к селектору TABLE .

Пример 2. Таблица без внешней рамки

        
 
 
2004
2005
2006
 
 
Рубины
43
51
79
 
 
Изумруды
28
34
48
 
 
Сапфиры
29
57
36
 
 
  

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

Источник

HTML Table Borders

HTML tables can have borders of different styles and shapes.

How To Add a Border

To add a border, use the CSS border property on table , th , and td elements:

Example

Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS border-collapse property to collapse .

This will make the borders collapse into a single border:

Example

Style Table Borders

If you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:

Example

table, th, td <
border: 1px solid white;
border-collapse: collapse;
>
th, td <
background-color: #96D4D4;
>

Round Table Borders

With the border-radius property, the borders get rounded corners:

Example

Skip the border around the table by leaving out table from the css selector:

Example

Dotted Table Borders

With the border-style property, you can set the appearance of the border.

The following values are allowed:

Example

Border Color

With the border-color property, you can set the color of the border.

Example

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Css table border только внутри таблицы

Возьмем для примера совсем простую структуру таблицы 2 строки + 2 столбца.

Для того, чтобы мы смогли увидеть границы таблицы их нужно как-то обозначить!

Граница таблицы обозначается атрибутом «border». У которого должно быть свойство — толщина и цвет.

1. Если используется такая конструкция как в ниже идущей таблице — цвет указывать необязательно -по умолчанию это черный + начертание -по умолчанию линия.
2. Если требуется изменить цвет, то следует добавить свойство цвета.

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

Что мы здесь можем наблюдать!? Что таблица имеет двойные границы.

Видео как сделать границу таблицы

Видео сделано еще на старом оборудовании и качество не очень, если смотреть в разрешении 1920×1080, но как говорится, что есть, то есть. дл общего понимания вполне годится!

Друзья!

Как сделать одинарную границу у таблицы!?

Вообще — такая двойная линия границы смотрится, по-моему мнению очень некрасиво, давайте попытаемся сделать её в одну линию.

Добавляем в таблицу border-collapse:collapse;

В таблице надо прописать класс:

Результат будет в двух случаях аналогичный:

Привет	Привет
Текст	Текст

Как сделать границу таблицы точками?

Для того, чтобы сделать границу таблицы точками вместо solid ставим dotted.

Сделать границу таблицы пунктирной линией.

Далее я не буду показывать код, наверное понятно, как это работает, мы приведем ещё несколько вариантов границ таблиц.

Для того, чтобы сделать границу таблицы пунктирной линией заменяем solid на dashed

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

Скрыть наружную границу таблицы html

Ну и напоследок. бывает такая ситуация, что требуется скрыть наружные границы таблицы — как это сделать!?

Источник