Таблицы являются наиболее распространенным и эффективным инструментом для организованного представления данных. Раньше, до CSS, <таблица> элемент был использован для создания богатых макетов дизайна. Но в настоящее время макеты создаются с использованием нескольких других свойств CSS. В частности, элемент HTML «
» используется для создания веб-таблицы, стиль которой может быть изменен путем применения различных свойств CSS.
Это исследование посвящено стилизации таблиц с помощью CSS.
Как стилизовать таблицу с помощью CSS?
Чтобы применить стили к таблице, мы выполним ряд шагов, указанных ниже.
Для создания таблицы в HTML используются следующие элементы HTML:
“ <таблица> Элемент используется для создания таблицы в HTML.
“ <заголовок> » используется для добавления подписи к таблице.
“ ” используется для указания заголовка таблицы, который обычно содержит заголовки.
“
” используется для добавления строки.
“ <й> » укажите содержание заголовка.
“ <тело> ” определяет основную часть таблицы.
Созданная таблица в настоящее время выглядит так:
Давайте двигаться дальше, чтобы увидеть, как стилизовать эту таблицу.
Шаг 2: Стиль элемента «тело»
тело { семейство шрифтов: Verdana, Geneva, Tahoma, без засечек; задний план- цвет : RGB ( 233 , 233 , 233 ) ; }
Элемент
применяется со следующими свойствами стиля CSS:
“ семейство шрифтов ” свойство со значением “ Вердана, Женева, Тахома, без засечек ” используется для применения шрифта, поддерживаемого браузером. Если браузер не поддерживает первый стиль шрифта, будет использоваться другой.
“ фоновый цвет » устанавливает цвет фона элемента.
Шаг 3: Стиль элемента «caption»
подпись { шрифт- размер : 25 пикселей; текст- выровнять : центр; задний план- цвет : #1C6758; цвет : кукурузные рыльца; }
Элемент
оформлен следующим образом:
“ размер шрифта ” используется для установки размера шрифта.
“ выравнивание текста ” задает выравнивание текста элемента.
“ цвет ” относится к цвету шрифта элемента.
Вот вывод приведенного выше кода:
Шаг 4: Добавьте границу к таблице “ граница ” используется для добавления границы вокруг элемента. Это сокращенное свойство, которое указывает ширину границы, стиль границы и цвет границы.
Давайте применим границу вместе с отступом и полем к таблице:
стол, т, тд { граница : 2 пикселя сплошной цвет # 1C6758; отступ: 1px 6px; маржа: авто; }
Здесь:
“ граница » регулирует границу вокруг таблицы, указывая ширину границы, стиль границы и цвет границы.
“ набивка ” указывает пространство вокруг содержимого элемента, где первое значение определяет пространство сверху вниз, а второе значение добавляет пространство справа и слева от содержимого.
“ прибыль ” свойство со значением “ авто ” добавляет равное пространство вокруг элемента.
Вывод
Запись : Если нам не нужны пробелы между границами таблицы, используйте свойство border-collapse.
Шаг 5: Свернуть интервал между границами из таблицы Пробелы между границами таблицы можно удалить, используя « обрушение границ ” со значением “collapse”:
граница коллапса: коллапс;
Шаг 6: Настройте размер таблицы Давайте посмотрим, как настроить размер таблицы:
Ад-й { ширина : 160 пикселей; }
Добавленный « ширина ” с элементом
автоматически подстроит размер таблицы в соответствии с ним::
Мы также можем применять стили к определенной ячейке таблицы. Давайте обсудим их!
Шаг 7: Стили определенных ячеек таблицы Чтобы стилизовать конкретную ячейку таблицы, укажите имя класса этой конкретной ячейки. Например, приведенный ниже код показывает, что третьей ячейке второй строки присвоено имя класса « выделять ”:
< тд учебный класс знак равно 'выделять' > 99 < / тд >
Теперь получите доступ к ячейке, используя имя класса в файле CSS:
.выделять { задний план- цвет : #0f90d5; }
“ .выделять ” относится к подсветке класса элемента
. Этот элемент применяется с « фоновый цвет », чтобы указать цвет фона.
Как мы видим, указанная ячейка таблицы успешно стилизована:
Шаг 8: Установите семейство шрифтов и размер таблицы
Таблица { семейство шрифтов: скоропись; шрифт- размер : 18 пикселей; текст- выровнять : центр; }
К элементу таблицы применяются следующие свойства CSS:
“ семейство шрифтов » задает стиль шрифта элемента.
“ размер шрифта ” используется для настройки шрифта элемента.
“ выравнивание текста ” используется для настройки выравнивания текста.
Вот результат:
Шаг 9: Цветные ряды в последовательности Также разрешено применять стили к определенным строкам или столбцам. Например, четные строки оформлены в следующем формате:
\ tbody tr:nth-ребенок ( даже ) { задний план- цвет : #FFB200; }
Здесь:
“ : n-й ребенок (четный) Псевдоселектор используется для получения одного аргумента, указывающего шаблон, к которому должен применяться стиль.
“ фоновый цвет ” используется для установки цвета фона элемента.
Можно заметить, что цвет фона успешно применен к четным рядам:
Это было все о стилях таблиц с помощью CSS.
Заключение
Таблицы являются важным инструментом для организации данных. Таблицу можно создать с помощью HTML-элементов
,
,
и других. Для стилизации таблицы используются несколько свойств CSS, таких как граница, свойство background-color, свойство font-family и многие другие. Для лучшего понимания в этой статье объясняется пошаговая процедура стилизации таблицы с помощью CSS.
