Таблица

Оформление таблиц

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

Ширина таблицы

По умолчанию ширина таблицы устанавливается браузером самостоятельно, исходя из объёма в ней табличных данных. Если текста в ячейках много, тогда таблица будет занимать всю доступную ей ширину, а если мало, то ширина таблицы автоматически уменьшится. При наличии на странице нескольких таблиц их разная ширина выглядит порой небрежно. Так что лучше явно задать ширину таблицы в процентах, пикселях, em или любых других единицах CSS, как показано в примере 1.

Пример 1. Ширина таблицы в процентах

Исходно любая таблица располагается по левому краю окна браузера. Можно выровнять её по центру, если только таблица не занимает всю доступную область, другими словами, меньше 100%. Для этого к стилю таблицы следует добавить отступы через свойство margin со значением auto , как показано в примере 2.

Пример 2. Выравнивание таблицы с помощью margin

В данном примере для всех таблиц на странице задано выравнивание по центру.

Цвет фона

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору table . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с table задать цвет у селектора td или th , то он и будет установлен в качестве фона (пример 3).

Вид соединения	Поля допусков ширины шпоночного паза
	Вал	Втулка
Свободное	H9	D10
Нормальное	N9	Is9
Плотное	P9

Результат данного примера показан на рис. 1.

Рис. 1. Изменение цвета фона

Если нам требуется сделать зебру — так называется чередование строк разного цвета, то следует воспользоваться псевдоклассом :nth-child , добавляя его к селектору tr . Чтобы зебра распространялась только на тело таблицы, а не её заголовок, отделим их друг от друга с помощью элементов и (пример 4).

Интервалы размеров, мм	Допуск IT, мкм, для квалитетов
	5	6	7	8
До 3	4	6	10	14
Св. 3 до 6	5	8	12	18
Св. 6 до 10	6	9	15	22
Св. 10 до 18	8	11	18	27
Св. 18 до 30	9	13	21	33
Св. 30 до 50	11	16	25	39
Св. 50 до 80	13	19	30	46

Результат данного примера показан на рис. 2.

Значение even у селектора :nth-child применяет стиль ко всем чётным строкам и задаёт их цвет фона. Можно, также, поменять его на odd , тогда серым цветом будут выделяться нечётные строки.

Аналогичным образом цветом выделяются не строки, а колонки, для этого следует использовать селектор tbody td:nth-child(even) .

Поля внутри ячеек

Полем называется расстояние между границей ячейки и её содержимым. Без полей текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие, добавление же полей позволяет улучшить читабельность текста. Для этой цели применяется стилевое свойство padding , которое работает с селектором td или th , как показано выше в примерах 3 и 4. Обычно указывают одно значение, оно тогда задаёт пустое пространство вокруг содержимого ячейки сразу со всех сторон. Два значения пишутся, когда надо задать разные поля по вертикали (первое значение) и горизонтали (второе значение).

Расстояние между ячеек

Между ячеек имеется небольшое пустое расстояние, которое не видно, пока для ячеек не установить границу или фоновый цвет. Исходно это расстояние равно 2px и его можно изменить с помощью свойства border-spacing , добавляя его к селектору table (пример 5).

Пример 5. Использование border-spacing

Добавляя этот стиль к любой таблице получим результат продемонстрированный на рис. 3.

Рис. 3. Вид таблицы с расстоянием между ячеек

Если к table добавляется свойство border-collapse со значением collapse , то border-spacing игнорируется, потому как расстояния между ячеек уже нет.

Границы и рамки

Пример 6. Применение свойства border-collapse при создании рамок таблицы

O	X	X
O	O	X
X	X	O

Разница между границами таблицы при добавлении свойства border-collapse , а также без него, представлена на рис. 4.

а — свойство не установлено

Рис. 4. Вид таблицы при использовании border-collapse

На рис. 4а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 4б).

Пример 7. Линии между строк

Вид соединения	Поля допусков ширины шпоночного паза
	Вал	Втулка
Свободное	H9	D10
Нормальное	N9	Is9
Плотное	P9

Результат данного примера показан на рис. 5.

Рис. 5. Таблица с горизонтальными линиями

Выравнивание текста в ячейках

По умолчанию текст в ячейке таблицы выравнивается по левому краю и по центру высоты. Исключением служит элемент , он определяет ячейку заголовка, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 8).

Пример 8. Выравнивание содержимого ячеек по горизонтали

Заголовок 1	Ячейка 1	Ячейка 2
Заголовок 2	Ячейка 3	Ячейка 4

Рис. 6. Выравнивание текста в ячейках

Выравнивание по вертикали в ячейке всегда происходит по её центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align со значением top , как показано в примере 9.

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

Вид соединения	Поля допусков ширины шпоночного паза
	Вал	Втулка
Свободное	H9	D10
Нормальное	N9	Is9
Плотное	P9

В данном примере выравнивание текста происходит по верхнему краю. Результат примера показан на рис. 7.

Рис. 7. Выравнивание текста в ячейках

См. также

Источник

Css одна линия в таблице

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

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

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

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

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

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

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

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

Друзья!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Как добавить внутренние линии (границы) в таблицу с помощью 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, так как вы можете определить только ширину границы и иметь ее только вокруг всех ячеек таблицы или без нее.

Источник