Css для таблиц: Стилизация таблиц — Изучение веб-разработки

Содержание

CSS3 | Стилизация таблиц

Последнее обновление: 21.04.2016

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

border-collapse: устанавливает, как будет стилизоваться граница смежных ячеек
border-spacing: устанавливает промежутки между границами смежных ячеек
caption-side: устанавливает положение элемента caption
empty-cells: задает режим отрисовки для пустых ячеек
table-layout: определяет размеры таблицы

Установка таблицы

Ранее для установки границы в таблице широко использовался атрибут border, например:


<table border="2px" >

Сейчас же тенденция для стилизации использовать только стили CSS, поэтому граница также задается через CSS с помощью стандартного свойства border:


table {
	border: 1px solid #ccc;	 /* граница всей таблицы */
}
tr {
	border: 1px solid #ccc;	 /* границы между строками */
}
td, th {
	border: 1px solid #ccc;	 /* границы между столбцами */
}

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

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


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Стилизаци таблиц в CSS3</title>
        <style>
		table {
			border: 1px solid #ccc;
			border-spacing: 3px;
		}
		
		td, th{
            border: solid 1px #ccc;
        }
		.  collapsed{
			border-collapse: collapse;
		}
		.separated{
			border-collapse: separate;
		}
        </style>
    </head>
    <body>
		<h4>Collapse</h4>
		<table>
			<tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
			<tr><td>Lumia 950</td><td>Microsoft</td><td>29900</td></tr>
			<tr><td>iPhone 6S</td><td>Apple</td><td>52900</td></tr>
			<tr><td>Nexus 6P</td><td>Huawei</td><td>49000</td></tr>
		</table>
		<h4>Separate</h4>
		<table>
			<tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
			<tr><td>G 5</td><td>LG</td><td>44900</td></tr>
			<tr><td>HTC 10</td><td>HTC</td><td>49900</td></tr>
			<tr><td>Nexus 5X</td><td>Google/LG</td><td>25000</td></tr>
		</table>
	</body>
</html>

Пустые ячейки

Свойство empty-cells позволяет стилизовать пустые ячейки с помощью одного из следующих значений:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Стилизаци таблиц в CSS3</title>
        <style>
		table {
			border: 1px solid #ccc;
			border-spacing: 3px;
		}
		
		td, th{
            border: solid 1px #ccc;
        }
		.  hidden-empty-cells{
			empty-cells: hide;
		}
        </style>
    </head>
    <body>
		<h4>Show</h4>
		<table>
			<tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
			<tr><td>Lumia 950</td><td>Microsoft</td><td>29900</td></tr>
			<tr><td>iPhone 6S</td><td></td><td></td></tr>
			<tr><td>Nexus 6P</td><td>Huawei</td><td>49000</td></tr>
		</table>
		<h4>Hide</h4>
		<table>
			<tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
			<tr><td>G 5</td><td>LG</td><td>44900</td></tr>
			<tr><td>HTC 10</td><td></td><td></td></tr>
			<tr><td>Nexus 5X</td><td>Google/LG</td><td>25000</td></tr>
		</table>
	</body>
</html>

Позиционирование заголовка

Свойство caption-side управляет позицией заголовка и может принимать следующие значения:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Стилизаци таблиц в CSS3</title>
        <style>
		table {
			border: 1px solid #ccc;
			border-spacing: 3px;
		}
		
		caption {
		
			font-weight: bold;
		}
		
		td, th{
            border: solid 1px #ccc;
        }
		.  captionBottom{
			caption-side: bottom;
		}
        </style>
    </head>
    <body>
		<h4>Top</h4>
		<table>
			<caption>Флагманы 2015 года</caption>
			<tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
			<tr><td>Lumia 950</td><td>Microsoft</td><td>29900</td></tr>
			<tr><td>iPhone 6S</td><td>Apple</td><td>52900</td></tr>
			<tr><td>Nexus 6P</td><td>Huawei</td><td>49000</td></tr>
		</table>
		<h4>Bottom</h4>
		<table>
			<caption>Новинки 2016 года</caption>
			<tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
			<tr><td>G 5</td><td>LG</td><td>44900</td></tr>
			<tr><td>HTC 10</td><td>HTC</td><td>49900</td></tr>
			<tr><td>iPhone SE</td><td>Apple</td><td>37000</td></tr>
		</table>
	</body>
</html>

Управление размером таблицы

С помощью свойства table-layout можно управлять размером таблицы. По умолчанию это свойство имеет значение auto, при котором браузер устанавливает ширину столбцов таблицы автоматически, исходя из ширины самой широкой ячейки в столбце. А из ширины отдельных столбцов складывается ширина всей таблицы.

Однако с помощью другого значения — fixed можно установить фиксированную ширину:


table {
	border: 1px solid #ccc;
	border-spacing: 3px;
	table-layout: fixed;
	width:350px; 
}

Вертикальное выравнивание ячеек

Как правило, содержимое ячеек таблицы выравнивается по центру ячейки. Но с помощью свойства vertical-align это поведение можно переопределить. Это свойство принимает следующие значения:

top: выравнивание содержимого по верху ячейки
baseline: выравнивание первой строки текста по верху ячейки
middle: выравнивание по центру (значение по умолчанию)
bottom: выравнивание по низу

Свойство vertical-align применяется только к элементам <th> и <td>:


td, th{
    border: solid 1px #ccc;
	vertical-align: bottom;
	height: 30px;
}

НазадСодержаниеВперед

Стили таблиц

Внешний вид HTML таблиц можно при помощи CSS значительно улучшить.

Компания	Контакт	Страна
Alfreds Futterkiste	Maria Anders	Германия
Berglunds snabbköp	Christina Berglund	Швеция
Centro comercial Moctezuma	Francisco Chang	Мексика
Ernst Handel	Roland Mendel	Австрия

Рамка таблицы

Чтобы при помощи CSS определить у таблицы рамку, используется свойство border.

В следующем примере определяется сплошная рамка для элементов <table>, <th> и <td>:

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

Результат:

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Таблица на всю ширину

Таблица из предыдущего примера в некоторых случаях смотрится слишком маленькой. Если же вам нужна таблица, которая должна занимать всю ширину экрана, то добавьте свойства width: 100%; к элементу <table>:

table {
  width: 100%;
}

Результат:

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Обратите внимание, что у таблиц из предыдущих примеров двойная рамка.

Чтобы убрать двойные рамки, смотрите пример далее.

Объединение рамок таблиц

Свойство border-collapse определяет, должны ли рамки таблицы объединиться в одну общую рамку.

Свойство border-collapse может принимать следующие значения:

separate — Значение по умолчанию. Каждая ячейка таблицы будет иметь собственную рамку.
collapse — Ячейки таблицы будут иметь общую рамку.
initial — Устанавливает значение по умолчанию.

inherit — Значение наследуется от родительского элемента.

В следующем примере рамки таблицы объединяются в одну единую рамку:

table {
  border-collapse: collapse;
}

Результат:

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Если вы хотите, чтобы рамка была только у самой таблицы, а не у ее ячеек, определите свойство border только для элемента <table>:

table {
  border: 1px solid black;
}

Результат:

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Ширина и высота таблицы

Ширина и высота таблицы определяется при помощи свойств width и height.

В следующем примере устанавливается ширина таблицы 100% и высота элемента <th> 70px:

table {
  width: 100%;
}
th {
  height: 70px;
}

Результат:

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Чтобы таблица занимала только половину страницы, используйте значение width: 50%:

table {
  width: 50%;
}

Результат:

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Выравнивание по горизонтали

При помощи свойства text-align можно определить выравнивание по горизонтали содержимого ячеек <th> или <td>.

По умолчанию содержимое элемента <th> горизонтально выравнивается по центру, а элемента <td> по левому краю.

Чтобы содержимое элемента <td> также выравнивалось по центру, используйте свойство text-align: center:

td {
  text-align: center;
}

Результат:

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Чтобы выровнять содержимое элемента <th> по левому краю, используйте свойство text-align: left:

th {
  text-align: left;
}

Результат:

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Выравнивание по вертикали

При помощи свойства vertical-align можно определить выравнивание по вертикали содержимого ячеек <th> или <td>.

По умолчанию содержимое обоих элементов <th> и <td> выравнивается по середине.

В следующем примере содержимое элемента <td> по вертикали выравнивалось по нижнему краю:

td {
  height: 50px;
  vertical-align: bottom;
}

Результат:

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Отступы в ячейках таблицы

Чтобы контролировать размер отступов между границей ячейки таблицы и ее содержимым, используется свойство padding для элементов <td> и <th>:

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Пример:

th, td {
  padding: 15px;
  text-align: left;
}

Горизонтальные разделители

Чтобы создать горизонтальные разделители между строками таблицы, добавьте свойство border-bottom к элементам <th> и <td>:

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Пример:

th, td {
  border-bottom: 1px solid #ddd;
}

Таблица с эффектом при наведении курсора мыши

Если определить селектор :hover для элемента <tr>, то можно создать эффект подсвечивания при наведении курсора мыши на строку таблицы:

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Пример:

tr:hover {
  background-color: coral;
}

Полосатые таблицы

Чтобы создать полосатую таблицу, используется селектор nth-child(even) для четных строк таблицы или nth-child(odd) для нечетных строк таблицы со свойством background-color:

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Пример:

tr:nth-child(even) {
  background-color: #f2f2f2;
}

Все CSS свойства определения стилей таблиц

Свойство	Описание
border	Короткое свойство, определяющее все атрибуты рамки за одну декларацию
border-collapse	Определяет, какую модель рамки вокруг ячеек таблицы следует использовать
border-spacing	Определяет расстояние между рамками соседних ячеек таблицы
caption-side	Определяет, где будет отображаться заголовок таблицы
empty-cells	Определяет отображение границ и фона в ячейке таблицы, если она пустая
table-layout	Определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом

43 CSS-таблицы

Коллекция бесплатных HTML и CSS-таблиц примеров кода: простых, адаптивных, ценовых, периодических и т. д. Обновление майской коллекции 2020 года. 6 новый пункт.

Столы
Периодические таблицы
Таблицы цен

Таблицы начальной загрузки

О коде

Стол для зигзага

Таблица в зигзагообразном диагональном формате.

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

Адаптивный стол с Flexbox

Идея заключалась в том, чтобы создать красивый рабочий стол, который будет работать и на небольших экранах.
Сделано Матис
6 апреля 2017 г.

скачать демо и код

адаптивный макет таблицы с помощью CSS

Использование CSS для адаптивного макета таблицы вместо плавающих элементов. Отзывчивый (все сводится к одному ряду) тоже.
Сделано Люком Питерсом
21 февраля 2017 г.

скачать демо и код

фиксированный заголовок таблицы

фиксированный заголовок таблицы с простым кодом jQuery.
Сделано Нихилом Кришнаном
3 ноября 2016 г.

скачать демо и код

адаптивная таблица

приемы CSS-методов адаптивной таблицы.
Сделано Алико
11 апреля 2016 г.

скачать демо и код

Pure CSS Table Highlight

Простой (и неприятный) трюк для вертикальной и горизонтальной подсветки при наведении на таблицы, созданные с помощью чистого CSS.
Сделано Александром Эрландссоном
22 марта 2016 г.

скачать демо и код

О коде

Sticky Table Headers by

position: sticky;

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

Адаптивная таблица

Адаптивная таблица с шаблонами rwd-table.
Сделано SitePoint
15 апреля 2015 г.

скачать демо и код

Адаптивная таблица CSS и подробный просмотр

Пример сценария таблицы и подробного просмотра.
Сделано Хизер Бучел
29 июня 2014 г.

скачать демо и код

О коде

Стол CSS

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

Адаптивная таблица

Таблица сворачивается в «список» на маленьких экранах. Заголовки извлекаются из атрибутов данных.
Сделано Джеффом Юэном
25 марта 2014 г.

О коде

Периодическая таблица элементов

Отзывчивая и анимированная периодическая таблица элементов в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

HTML и CSS периодическая таблица .

О коде

Таблицы цен

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Pure CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Таблица цен на Pure CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Таблица цен с HTML и CSS.
Сделано Матиасом Мартином
7 апреля 2016 г.

скачать демо и код

Таблицы цен на материалы

Таблицы цен на материалы в формате HTML и CSS.
Сделано Кресо Галичем
14 января 2016 г.

скачать демо и код

Таблица цен

Таблица цен с HTML и CSS.
Сделано Майком Торосяном
25 февраля 2015 г.

скачать демо и код

Таблица цен на адаптивные флипы

Таблица цен на адаптивные флипы для просмотра цен за месяц или год.
Сделано Шейном Хейнсом
12 января 2015 г.

скачать демо и код

Таблицы цен

Простые таблицы цен.
Сделано Джозефом Виктори
15 февраля 2014 г.

скачать демо и код

Таблица цен

Игра с таблицами.
Сделано Даниэлем Римером
13 сентября 2013 г.

скачать демо и код

Стили таблиц CSS — Темы масштабирования

Обзор

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

Scope

В этой статье, основанной на CSS Table Style, мы в основном обсудим следующие моменты:

Что такое CSS Table Style и зачем он нужен.
Различные свойства стиля таблицы.
Несколько быстрых и важных советов по стилизации столов.
Практическое использование таблиц и сброс стиля таблицы CSS по умолчанию в нашу пользу.

Что такое стиль таблицы в CSS?

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

И, как вы можете видеть, столбцы не очень хорошо выровнены, нет границ для определения размера столбцов, и они не очень читабельны. Так что, конечно, это не то, что вы хотели бы видеть при открытии веб-страницы, верно?

Теперь давайте добавим немного стилей таблиц CSS и посмотрим, какое преобразование у нас получилось.

С небольшой рамкой, выравниванием по центру и небольшим количеством цвета фона та же таблица выглядит намного лучше, не так ли?

Что ж, это что-то вроде стиля таблицы CSS. Благодаря этому ваши простые HTML-таблицы выглядят намного лучше и читабельнее. И, если это то, что вы хотите сделать со своими собственными HTML-таблицами, то оставайтесь и переходите к следующему разделу этой статьи 🤓!

Как стилизовать таблицу в CSS?

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

HTML-код для создания таблицы:

  
    <таблица>
        Таблица штатов Индии и их столиц
        
            
                Sl №
                Штат
                Капитал
            
        
        <тело>
            
                <тд>1
                Западная Бенгалия
                Калькутта
            
            
                2
                Мадхья-Прадеш
                Бхопал
            
            
                <тд>3
                Карнатака
                Бангалуру

Приведенный выше HTML-код создает таблицу с 3 столбцами с именем Серийный номер. (номер Sl), государственный и столичный . Затем мы добавляем к нему 3 записи таблицы. Заголовок таблицы установлен на «Таблица индийских штатов и их столиц».

Вывод , показывающий очень простую таблицу HTML без каких-либо стилей CSS:

Теперь давайте посмотрим, что означают различные элементы HTML.

Значение каждого тега таблицы HTML

Теги таблицы HTML

Значение тегов таблицы HTML

Сама таблица целиком

Заголовок таблицы

Тело таблицы, состоящее из основных данных

Нижний колонтитул таблицы

Строки таблицы

Ячейка, содержащая данные стиль для этих элементов и сделать их привлекательными, а также повысить их читабельность.

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

Теперь давайте добавим некоторые стили таблицы CSS к таблице, которую мы только что создали.

Код CSS для добавления некоторых стилей таблицы:

  td, th {
    граница: 1px сплошная #777;
    набивка: 0,5 бэр;
    выравнивание текста: по центру;
}
 
стол {
    граница коллапса: коллапс;
}
 
tbody tr:nth-child(нечетный) {
    фон: #еее;
}
подпись {
    размер шрифта: 0.8rem;
}

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

Давайте теперь посмотрим на нашу стилизованную таблицу CSS:

Это все о том, как стилизовать таблицу в CSS. В следующем разделе мы обсудим различные доступные нам свойства таблицы CSS.

Свойства таблицы CSS

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

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

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

Это линии, разделяющие каждую ячейку таблицы. По умолчанию расстояние между границами двух ячеек составляет 2 пикселя. Мы применяем границу таблицы только к элементам

, так как именно они формируют ячейки.

Синтаксис:

  td, th{
    граница: <измерение> <тип границы> <цвет границы>;
}

Пример: Давайте применим некоторую границу к нашей простой HTML-таблице.

Код CSS:

  тд, т {
    граница: 1px сплошная #777;
}

Приведенный выше код CSS помещает сплошную рамку толщиной 1 пиксель вокруг всех ячеек с шестнадцатеричным кодом #777 (слегка темно-серым).

Вывод:

CSS Table Border-Spacing

Теперь, как мы видим, расстояние между границами двух ячеек по умолчанию составляет 2 пикселя. Это можно настроить с помощью свойства border-spacing. Мы применяем это свойство к элементу

Примечание : это свойство не следует путать со свойством поля в CSS.

Синтаксис:

  таблица {
  border-spacing: <измерение>;
}

Пример: Давайте попробуем установить для свойства border-spacing простой HTML-таблицы значение 15 пикселей.

Код CSS :

  td, th {
    граница: 1px сплошная #777;
}
 
стол {
     интервал между границами: 15 пикселей;
}

Приведенный выше код CSS добавляет сплошную рамку шириной 1 пиксель вокруг всех ячеек и устанавливает интервал между границами равным 15 пикселей.

Вывод:

CSS Table Border-Collapse

Мы можем объединить границы двух соседних ячеек, т.е. полностью удалить зазор между соседними границами. Это чаще всего делается, и для этого нам нужно свойство border-collapse. Мы применяем это свойство к элементу

. Это свойство имеет два значения: отдельные и свернуть. отдельно установлено по умолчанию.

Синтаксис:

  таблица {
    граница-коллапс: <отдельный | коллапс>;
}

Пример: Давайте применим свойство border-collapse: Collapse к простой HTML-таблице.

Код CSS:

  тд, т {
    граница: 1px сплошная #777;
}
 
стол {
    граница коллапса: коллапс;
}

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

Вывод:

CSS Table Padding

Мы можем добавить немного пространства между границами таблицы и содержимым таблицы. Он очень похож на раздел заполнения блочной модели. Это применяется к элементам

, или мы можем добавить отдельный класс или идентификатор и применить цвет конкретной ячейки).

Синтаксис:

  tbody{
    цвет: <имя_цвета | код_цвета>;
}

Пример: Сделаем цвет шрифта в приведенной выше таблице белым, чтобы тексты были читабельными.

Код CSS:

  tbody{
    белый цвет;
}

Приведенный выше код CSS изменяет цвет шрифта на белый для всех текстов в теле таблицы.

Вывод:

Теперь у нас есть красивая таблица в стиле CSS!

Высота и ширина таблицы CSS

Свойство высоты и ширины позволяет нам изменять высоту и ширину всей таблицы, а также отдельных строк и столбцов. Мы можем изменить высоту и ширину элементов HTML, таких как

Примечание : Свойство padding изменяет расстояние между содержимым ячейки и границей ячейки, с другой стороны, свойство border-spacing изменяет расстояние между двумя соседними границами ячейки.

Синтаксис:

  td, th{
    заполнение: <измерение>;
}

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

Нам нужно добавить следующий код CSS после того, как мы добавили границы, чтобы получить наилучший эффект.

Код CSS:

  тд, т {
    набивка: 0,5 бэр;
}

Приведенный выше код CSS применяет к ячейкам заполнение 0,5 rem.

Вывод:

Таблица CSS Текстовое выравнивание

Как видно из приведенного выше вывода, все содержимое, за исключением ячеек заголовков, выровнено по левому краю. Используя свойство text-align, мы можем изменить выравнивание по центру или по правому краю. Мы применяем это свойство к элементу

Синтаксис:

  td{
    выравнивание текста: <влево | центр| справа>;
}

Пример: Давайте выровняем тексты в таблице по центру после того, как мы добавили отступы и границы.

Код CSS:

  тд{
    выравнивание текста: по центру;
}

Приведенный выше центр кода CSS выравнивает текст во всех ячейках.

Код CSS для выравнивания по левому и правому краю:

  td{
    выравнивание текста: по левому краю;
}

  тд{
    выравнивание текста: вправо;
}

Вывод для выравнивания по центру (это будет аналогично для выравнивания по левому и правому краям):

CSS Table Background-color

Теперь, когда у нас есть достаточно хорошо выглядящая таблица после добавления свойств рамки, отступов и выравнивания текста, мы можем добавить немного цвета фона, чтобы улучшить читаемость. Создание таблицы в полоску «зебра» обычно является хорошей привычкой.

Синтаксис:

  тело{
фон: ;
}

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

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

Код CSS:

  tbody tr:nth-child(нечетный) {
     фон: #202932;
}
tbody tr:nth-child(even) {
     фон: #2c3844;
}

Приведенный выше код CSS окрашивает нечетные строки, начиная с первой строки в теле таблицы (заголовок здесь исключен), одним цветом, а четные строки — другим контрастным цветом.

Вывод:

Но, как мы видим, черный цвет шрифта не делает текст очень читабельным, не так ли?

Для этого у нас есть свойство цвета таблицы CSS.

Цвет таблицы CSS

Это свойство используется для настройки цвета шрифта содержимого таблицы (мы можем сделать это для всей таблицы, применив его к тегу

, и

(т. е. всех элементов, которые имеют свойства высоты и ширины). Синтаксис:

  <элемент таблицы HTML>{
ширина: <измерение>;
}

<Элемент HTML-таблицы>{
высота: <измерение>;
}

Пример: Давайте попробуем изменить высоту строки заголовка в нашей таблице на 80 пикселей, а высоту элементов данных таблицы на 50 пикселей. Сделаем так же всю ширину таблицы 50% от всего окна просмотра.

Код CSS:

  {
    высота: 80 пикселей;
}
 
тд {
    высота: 50 пикселей;
}
 
стол {
    ширина: 50%;
}

Приведенный выше код CSS изменяет высоту элемента заголовка таблицы

на 80 пикселей, высоту элемента данных таблицы

на 50 пикселей и ширину всей таблицы , установлен на 50% окна просмотра.

Вывод:

Пустая ячейка таблицы CSS

Это свойство позволяет удалить границу пустых ячеек. У значения есть два свойства: показать и скрыть. Значение по умолчанию — показать. Мы применяем это свойство к HTML-элементу

ВАЖНО: Это свойство не даст никакого эффекта при использовании вместе с border-collapse: свернуть.

Синтаксис:

  таблица{
    пустые ячейки: <скрыть | показать>;
}

Пример: Рассмотрим следующую таблицу:

Последние две ячейки в третьем столбце пусты. И границы тоже видны. Теперь давайте применим свойство empty-cells: hide.

Код CSS:

  таблица {
    пустые ячейки: скрыть;
}

Приведенный выше код CSS применяет свойство empty-cells: hide к элементу

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

Вывод:

Таблица CSS Table-Tayout

Это свойство определяет способ отображения макета таблицы в браузере . У этого свойства есть два значения: автоматическое и фиксированное. Значение по умолчанию — авто. Мы применяем это свойство к HTML-элементу

Примечание : Макет — это способ расположения всех визуальных элементов на веб-сайте.

авто: Таблица изменит ширину столбца, чтобы уместить все содержимое в этом конкретном столбце. Таким образом, перед установкой ширины столбца необходимо проверить все ячейки в столбце. По этой причине рендеринг таблицы с table-layout: auto происходит медленно.
исправлено: Ширина столбца определяется на основе ширины таблицы или указанной ширины столбца. Ширина столбца определяется на основе ширины элемента первой строки этого столбца. Поскольку ширину всего столбца можно определить, взглянув только на первую строку, рендеринг выполняется быстрее по сравнению с автоматическим режимом.

Синтаксис:

  <таблица>{
    макет таблицы: <авто | исправлено>;
}

Пример: Сделаем таблицу с тремя столбцами и тремя строками. Ширина первого столбца первой строки установлена нами равной 400 px (мы увидим, что при изменении макета таблицы с автоматического на фиксированный этот столбец остается неизменным). А остальные записи не имеют заданной ширины. Вся таблица имеет ширину 100%.

Код HTML:

  <тело>
    <таблица>

<таблица> <тело>

Приведенный выше HTML-код создает необходимую таблицу. Теперь давайте добавим к нему немного CSS. Код CSS:

  заголовок {
    размер шрифта: 1.8rem;
}
стол {
    ширина: 100%;
    размер шрифта: 1.2rem;
    поле: 20px авто;
}
 
tbody tr:nth-child(нечетный) {
    фон: #202932;
}
 
tbody tr:nth-child(even) {
    фон: #2c3844;
}
 
тело {
    белый цвет;
}
 
стол, тд, й {
    граница коллапса: коллапс;
}
 
й, тд {
    отступ: 10 пикселей;
    граница: 1px сплошная #777;
    выравнивание текста: по центру;
}
 
.firstRowFirstColumn {
    ширина: 400 пикселей;
}

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

Вывод: макет таблицы: авто

Теперь добавим свойство table-layout: fixed и посмотрим, как визуально изменится таблица.

Код CSS:

  <таблица>{
    макет таблицы: фиксированный;
}

В приведенном выше коде CSS для свойства table-layout установлено фиксированное значение.

Вывод: макет таблицы: фиксированный

Как мы видим, ширина первого столбца остается фиксированной и составляет 400 пикселей независимо от значения макета таблицы. Это потому, что мы явно упомянули об этом в нашем коде CSS. В то время как другие столбцы настроены так, чтобы иметь одинаковую ширину.

Советы по стилю таблиц

Выравнивание текста внутри ячеек
- Горизонтальное выравнивание содержимого ячейки: текст можно выровнять по горизонтали (т. е. слева, по центру или справа от ячейки) с помощью свойства text-align. У этого свойства есть три значения: слева, по центру и справа. Оставлено значение по умолчанию.

Вертикальное выравнивание содержимого ячейки: Текст можно выровнять по вертикали (т. е. по нижнему, среднему или верхнему краю ячейки) с помощью свойства вертикального выравнивания. У этого свойства есть три значения: нижнее, среднее и верхнее. Значение по умолчанию — среднее.

На приведенном выше изображении значение стороны заголовка установлено наверх.

На изображении выше показано, когда значение стороны заголовка установлено внизу.

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

Код CSS:

  tbody tr:nth-child(нечетный) {
    фон: ;
}

tbody tr:nth-child(even) {
    фон: ;
}

Создание адаптивной таблицы: Чтобы сделать таблицу адаптивной, нам нужно установить ширину таблицы, используя относительные единицы, такие как %. Таким образом, при изменении размера окна просмотра таблица будет соответственно уменьшаться.

Далее нам нужно установить для свойства overflow-x элемента

Пример фиксированного макета
Заголовок 1	Длинный текст в качестве заголовка 2, например, для отображения фиксированного макета	Заголовок 3
Длинный текст в качестве образца данных таблицы, например, для демонстрации фиксированного макета	Пример данных таблицы	Пример данных таблицы
Пример данных таблицы	Пример данных таблицы	Пример данных таблицы

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

Пример: Давайте создадим таблицу с большим количеством столбцов и сделаем ее отзывчивой, используя относительные единицы и свойство overflow-x.

Код HTML для создания таблицы:

  <дел>
    <таблица>

Содержимое таблицы записывается внутри элемента

Код CSS:

  стол {
    ширина: 100%;
}

Приведенный выше код CSS делает ширину таблицы адаптивной и устанавливает ее равной 100% ширины окна просмотра.

Вывод:

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

Обработка пустых ячеек: Пустые ячейки можно обрабатывать с помощью свойства empty-cells: hide.

Когда использовать таблицы?

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

Практические примеры использования таблиц:

Образец 1:

Образец 2:

Когда не следует использовать таблицы?

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

У вас могут возникнуть вопросы, например, будет ли это видно зрителю? Ну, ответ на это НЕТ. Но поток вашей веб-страницы будет совершенно другим. Вы можете получить четкое представление об искаженном потоке, когда используете программу чтения страниц. Он будет рассматривать весь макет веб-страницы, разработанный с элементами таблицы, как таблицу. Часто он может считывать начало таблицы, что будет звучать совершенно неправильно!

или.

;

Атрибут	Элемент(ы), к которым это может быть применено	Что он делает	Синтаксис
8 colspant d>	Заставляет ячейку расширяться до ширины 2 или более ячеек, т. е. одна ячейка будет иметь ширину 2 или более ячеек.		>; <число> определяет ширину текущей ячейки в несколько столбцов.»
rowspan		,		Заставляет ячейку расширяться до высоты 2 или более ячеек, т. е. одна ячейка будет иметь высоту 2 или более ячеек.	>; <число> определяет, сколько строк должно быть в высоту текущей ячейки.»
span
Он определяет, сколько столбцов должен занимать HTML-элемент

Устаревшие атрибуты

Устаревшие атрибуты — это атрибуты, которые больше не используются. Это не значит, что вы не можете их использовать! Вы можете использовать их в своем коде, но есть и более новые способы сделать то же самое! При использовании STRICT DOCTYPE эти устаревшие атрибуты могут быть объявлены недействительными.

ПРИМЕЧАНИЕ: Просто чтобы устранить путаницу между свойствами и атрибутами, мы используем атрибуты следующим образом:

  <таблица bgcolor="F57A0A">

Но мы используем свойства в нашем CSS или внутри тегов