CSS - Таблицы

Добро пожаловать,野心勃勃 веб-разработчики! Сегодня мы окунаемся в мир таблиц CSS. Как ваш доброжелательный соседский преподаватель информатики, я рад помочь вам в этом путешествии. Таблицы могут показаться старомодными, но相信我, они по-прежнему incredibly полезны в современном веб-дизайне. Итак, натянем рукава и начнем!

CSS Таблицы - Объединение границ

Представьте, что вы строите забор вокруг своего двора. Вы хотите, чтобы столбы забора касались друг друга, правильно? Именно это делает border-collapse для границ таблиц. Он определяет, должны ли границы ячеек быть разделены или объединены в одну границу.

table {
border-collapse: collapse;
}

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

CSS Таблицы - Расстояние между границами

А что, если вы хотите немного места между вашими таблицами ячеек? Вот где comes в handy border-spacing. Это как социальное дистанцирование для ваших таблиц ячеек!

table {
border-spacing: 5px;
}

Это добавит 5-пиксельный зазор между вашими ячейками. Вы даже можете установить разные горизонтальные и вертикальные расстояния:

table {
border-spacing: 5px 10px;
}

Здесь у нас 5 пикселей горизонтального расстояния и 10 пикселей вертикального расстояния. Это как дать вашим таблицам ячеек немного личного пространства!

CSS Таблицы - Страница подписи

Таблицы могут иметь подписи, и вы можете контролировать, где эти подписи appear используя caption-side. Это как решить, ставить ли заголовок книги сверху или снизу обложки.

caption {
caption-side: bottom;
}

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

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

Когда-нибудь задумывались, что happens к пустым ячейкам в вашей таблице? Свойство empty-cells позволяет вам решить, показывать их или нет.

table {
empty-cells: hide;
}

Это сделает пустые ячейки невидимыми. Это как играть в прятки с вашими таблицами ячеек!

CSS Таблицы - Разметка таблицы

Свойство table-layout определяет, как ячейки, строки и столбцы таблицы разметаются. Это как выбрать между strict seating chart и free-for-all на dinner party.

table {
table-layout: fixed;
}

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

CSS Таблица - с фиксированным Разметкой

С фиксированным макетом, ширина таблицы определяется первой строкой или указанными ширинами. Это как иметь назначенные места на свадь reception.

table {
table-layout: fixed;
width: 100%;
}

th, td {
width: 25%;
}

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

CSS Таблица - с автоматической Разметкой

Автоматическая разметка корректирует宽度 столбцов в зависимости от их содержимого. Это как позволить гостям выбирать свои места на casual dinner party.

table {
table-layout: auto;
width: 100%;
}

Здесь браузер будет корректировать ширину столбцов в зависимости от их содержимого.

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

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

table {
width: 100%;
}

td {
height: 50px;
}

Это устанавливает ширину таблицы на 100% ее контейнера и высоту каждой ячейки на 50 пикселей.

CSS Таблицы - Выравнивание таблицы

Выравнивание содержимого в ячейках таблицы важно для читаемости. Это как arranging food на тарелке - presentation matters!

td {
text-align: center;
vertical-align: middle;
}

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

CSS Таблицы - Границы

Границы могут сделать вашу таблицу более визуально привлекательной и легкой для чтения. Это как drawing lines на листе бумаги для organizate информации.

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

Это добавляет 1-пиксельную сплошную черную границу к таблице и всем ее ячейкам.

CSS Таблицы - Цвет фона

Добавление цветов фона может сделать вашу таблицу более визуально привлекательной и помочь различать разные части таблицы. Это как painting rooms в вашем доме разными цветами.

table {
background-color: #f2f2f2;
}

th {
background-color: #4CAF50;
color: white;
}

Это устанавливает светло-серый фон для таблицы и зеленый фон с белым текстом для ячеек заголовка.

CSS Таблицы - Стилизация шрифта

Стилизация текста в вашей таблице может greatly улучшить читаемость. Это как choosing the right font для книги - это может сделать все difference в опыте чтения.

table {
font-family: Arial, sans-serif;
}

th {
font-weight: bold;
}

td {
font-size: 14px;
}

Этот устанавливает Arial как шрифт для всей таблицы, делает текст заголовка жирным и устанавливает размер текста ячеек на 14 пикселей.

CSS Таблицы - Другие стили

Есть много других стилей, которые вы можете применить к таблицам. Вот быстрый обзор:

Свойство	Описание	Пример
padding	Пространство внутри ячеек	td { padding: 10px; }
border-radius	Закругленные углы	table { border-radius: 5px; }
box-shadow	Эффект тени	table { box-shadow: 2px 2px 5px grey; }
opacity	Прозрачность	table { opacity: 0.8; }

CSS Таблицы - Margins

Margins могут дать вашей таблице немного места для дыхания от других элементов на странице. Это как leaving some space вокруг рамки картины на стене.

table {
margin: 20px auto;
}

Это добавляет 20-пиксельный отступ к верху и низу таблицы и выравнивает ее по горизонтали.

CSS Таблицы - Разделители (вертикальные / горизонтальные)

Вы можете добавить разделители к вашей таблице, чтобы отделить столбцы или строки. Это как используя ruler для drawing straight lines в тетради.

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

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

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

CSS Таблицы - Полосатая таблица

Полосатые таблицы могут make easier для чтения строк данных. Это как highlighting every other line в книге, чтобы сохранить ваше место.

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

Это создает чередующиеся белые и светло-серые строки в вашей таблице.

CSS Таблицы - Адаптивная таблица

Создание адаптивных таблиц ensures они хорошо выглядят на всех устройствах. Это как having a dining table, который может расширяться или сжиматься в зависимости от количества гостей.

@media screen and (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}

thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

tr { border: 1px solid #ccc; }

td {
border: none;
position: relative;
padding-left: 50%;
}

td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
content: attr(data-label);
}
}

Этот код transform таблицу в list-like формат на малых экранах, делая его easier для чтения на мобильных устройствах.

CSS Таблицы - Связанные свойства

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

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

И вот и все! Вы теперь bien equiped для создания и стилизации таблиц в CSS. Помните, что практика makes perfect, так что не бойтесь экспериментировать с этими свойствами. Счастливого кодирования!

Credits: Image by storyset