Таблица Pure.CSS
Как вы все знаете, таблица HTML выглядит очень скучно, и в настоящее время никто не использует ее непосредственно на веб-сайтах без стилизации. В чистом CSS стилизация таблиц очень проста и дает пользователю возможность изменять стиль таблицы. Есть много предопределенных классов, которые предоставляют пользователям большое разнообразие. Взгляните на классы ниже -
Имя класса | Описание |
---|---|
pure-table | Это самый простой класс, который дает некоторые отступы и границы. |
pure-table-bordered | Рисует таблицу с рамкой. |
pure-table-horizontal | Он рисует таблицу только с горизонтальными линиями. |
pure-table-odd | Рисует раздетую таблицу. |
Давайте посмотрим, как каждый класс использует один за другим.
Таблица по умолчанию
pure-table
Класс добавляет отступы и границы для таблицы элементов, а также стиль заголовка.
См. Изменения, внесенные в таблицу этим классом, в выходных данных, показанных ниже.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pure.CSS Default table </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
</head>
<style>
table{
margin:10px;
}
</style>
<body>
<table class="pure-table">
<thead>
<tr>
<th>#</th>
<th>Brand</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Samsung</td>
<td>Galaxy S10 Plus</td>
<td>2019</td>
</tr>
<tr>
<td>2</td>
<td>OnePlus</td>
<td>7 Pro</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Xiaomi</td>
<td>MIX 3</td>
<td>2018</td>
</tr>
</tbody>
</table>
</body>
</html>
Выход
# | Марка | Модель | Год |
---|---|---|---|
1 | Samsung | Galaxy S10 Plus | 2019 г. |
2 | OnePlus | 7 Pro | 2019 г. |
3 | Xiaomi | СМЕСЬ 3 | 2018 г. |
Таблица с границами Pure.CSS
Таблица с рамками - это таблица, в которой каждая ячейка ограничена со всех сторон.
Итак, чтобы сделать таблицу с рамкой, вы должны использовать класс
pure-table-bordered
.
Он добавит горизонтальные и вертикальные границы ко всем ячейкам.
Посмотрите результат и сравните его с выводом выше.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pure.CSS Bordered table </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
</head>
<style>
table{
margin:10px;
}
</style>
<body>
<table class="pure-table pure-table-bordered">
<thead>
<tr>
<th>#</th>
<th>Smartphone</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Samsung</td>
<td>A80</td>
<td>2019</td>
</tr>
<tr>
<td>2</td>
<td>Realme</td>
<td>X</td>
<td>2019</td>
</tr>
<tr>
<td>3</td>
<td>Oppo</td>
<td>Reno 10X Zoom</td>
<td>2019</td>
</tr>
</tbody>
</table>
</body>
</html>
Выход
# | Смартфон | Модель | Год |
---|---|---|---|
1 | Samsung | A80 | 2019 г. |
2 | Настоящий я | Икс | 2019 г. |
3 | Оппо | Reno 10-кратный зум | 2019 г. |
Таблица Pure.CSS с горизонтальными границами
В таблицах такого типа видны только горизонтальные линии, а вертикальные линии исчезают.
Класс
pure-table-horizontal
используется для создания таблицы, состоящей только из горизонтальных линий.
Примечание: не забудьте использовать все классы вместе с классом по умолчанию
pure-table
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pure.CSS Horizontal Table </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
</head>
<style>
table{
margin:10px;
}
</style>
<body>
<table class="pure-table pure-table-horizontal">
<thead>
<tr>
<th>#</th>
<th>Laptop</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Dell</td>
<td>XPS 13</td>
<td>2019</td>
</tr>
<tr>
<td>2</td>
<td>Asus</td>
<td>Zenbook</td>
<td>2018</td>
</tr>
<tr>
<td>3</td>
<td>Microsoft</td>
<td>Surface Pro</td>
<td>2019</td>
</tr>
</tbody>
</table>
</body>
</html>
Выход
# | Ноутбук | Модель | Год |
---|---|---|---|
1 | Dell | XPS 13 | 2019 г. |
2 | Asus | Zenbook | 2018 г. |
3 | Microsoft | Surface Pro | 2019 г. |
Стриптизированные таблицы Pure.CSS
Разрезанная таблица выглядит как фон в стиле зебры, она окрашивает каждую вторую строку в таблице.
Класс
pure-table-odd
используется для создания разделенной таблицы.
Опять же, не забудьте использовать весь класс вместе с классом по умолчанию
pure-table
.
pure-table-striped
класса может быть добавлено к
<table>
элементу, и чередование в стиле зебры произойдет автоматически.
Этот подход не будет работать в Internet Explorer 8 или более ранней версии.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Pure.CSS Triped Table </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
</head>
<style>
table{
margin:10px;
}
</style>
<body>
<table class="pure-table">
<thead>
<tr>
<th>#</th>
<th>Website</th>
<th>Services</th>
<th>Paid/Free</th>
</tr>
</thead>
<tbody>
<tr class="pure-table-odd">
<td>1</td>
<td>CodeRepublics</td>
<td>Free Web Tutorials Educations</td>
<td>Free</td>
</tr>
<tr>
<td>2</td>
<td>Facebook</td>
<td>Social Service</td>
<td>Free</td>
</tr>
<tr class="pure-table-odd">
<td>3</td>
<td>YouTube</td>
<td>Entertainment</td>
<td>Free</td>
</tr>
</tbody>
</table>
</body>
</html>
Выход
# | Веб-сайт | Услуги | Платно / бесплатно |
---|---|---|---|
1 | CodeRepublics | Бесплатные обучающие материалы в Интернете | Бесплатно |
2 | Социальная служба | Бесплатно | |
3 | YouTube | Развлечение | Бесплатно |