W3.CSS- таблицы
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
| Бо | Нильссон | 50 |
| Майк | Росс | 35 |
Классы таблиц W3.CSS
W3.CSS предоставляет следующие классы для таблиц:
| Класс | Определяет |
|---|---|
| w3-таблица | Контейнер для таблицы HTML |
| w3-полосатый | Полосатый стол |
| w3-граница | Таблица с рамкой |
| w3-окаймленный | Линии с границами |
| w3 по центру | Содержимое таблицы по центру |
| w3-hoverable | Парящий стол |
| w3-таблица-все | Все свойства установлены |
Базовая таблица
Класс w3-table используется для отображения базовой таблицы:
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
Пример
<table class="w3-table">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
Полосатый стол
Класс w3-striped используется для добавления полос в таблицу:
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
Пример
<table class="w3-table w3-striped">
Стол с рамкой
Класс w3-bordered добавляет нижнюю границу к каждой строке таблицы:
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
Пример
<table class="w3-table w3-bordered">
Полосатый стол с окантовкой
Объедините класс w3-striped и класс w3-bordered, чтобы создать полосатую таблицу с границами:
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
Пример
<table class="w3-table w3-striped w3-bordered">
Граница вокруг стола
Класс w3-border используется для отображения границы вокруг таблицы:
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
Пример
<table class="w3-table w3-striped w3-border">
Совет: класс w3-border предназначен не только для таблиц. Его можно использовать с любым элементом HTML!
Отображение всего
Класс w3-table-all объединяет все вышеперечисленные классы:
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
Пример
<table class="w3-table-all">
Переворачивание полос
Чтобы перевернуть полосы (начните со светло-серого цвета), добавьте элемент <thead> вокруг строки заголовка таблицы. Вы также должны определить цвет, который будет использоваться для строки заголовка таблицы:
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
| Бо | Нильсон | 35 |
Пример
<thead>
<tr class="w3-light-grey">
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
Центрирование всего содержимого
Класс w3-centered центрирует содержимое таблицы:
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
Пример
<table class="w3-table-all w3-centered">
Центрирование одного столбца
Класс w3-center центрирует содержимое столбца:
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
Пример
<table class="w3-table-all">
<tr>
<th>First
Name</th>
<th>Last Name</th>
<th class="w3-center">Points</th>
</tr>
Выровнять по правому краю один столбец
Класс w3-right-align выравнивает содержимое столбца по правому краю:
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
Пример
<table class="w3-table-all">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="w3-right-align">Points</th>
</tr>
Парящий стол
Класс w3-hoverable добавляет серый цвет фона при наведении курсора мыши:
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
Пример
<table class="w3-table-all
w3-hoverable">
Цвета при наведении
Если вам нужен определенный цвет при наведении, добавьте любой из классов w3- hover- color к каждому элементу <tr>:
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
Пример
<tr class="w3-hover-green">
Объединение классов W3.CSS
Многие классы W3.CSS можно использовать для всех элементов HTML.
Например: классы границ, классы цветов, классы шрифтов, классы карточек и многое другое.
Цветной заголовок таблицы
Используйте любой из классов w3 - color для отображения цветной строки:
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
Пример
<tr class="w3-red">
<th>First Name</th>
<th>Last
Name</th>
<th>Points</th>
</tr>
Цветной стол
Используйте любой из классов w3 - color для отображения цветной таблицы:
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
Пример
<table class="w3-table w3-blue">
Адаптивная таблица
Класс w3-responsive создает адаптивную таблицу. Затем таблица будет прокручиваться горизонтально на маленьких экранах. При просмотре на больших экранах разницы нет.
Измените размер экрана, чтобы увидеть результат в таблице ниже:
| Имя | Фамилия | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки | Точки |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Джилл | Смит | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 | 5000 |
| канун | Джексон | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 | 9400 |
| Адам | Джонсон | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 | 6700 |
Пример
<div class="w3-responsive">
<table class="w3-table-all">
... table content ...
</table>
</div>
Стол как карта
Используйте класс w3-card для отображения таблицы в виде карты:
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
Пример
<table class="w3-table-all w3-card-4">
Крошечный стол
Используйте класс w3-tiny для отображения крошечной таблицы:
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
Пример
<table class="w3-table-all w3-tiny">
Маленький стол
Используйте класс w3-small для отображения небольшой таблицы:
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
Пример
<table class="w3-table-all w3-small">
Большой стол
Используйте класс w3-large для отображения большой таблицы:
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
Пример
<table class="w3-table-all w3-large">
Большой стол
Используйте класс w3-xlarge для отображения таблицы xlarge:
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
Пример
<table class="w3-table-all w3-xlarge">
XXL большая таблица
Используйте класс w3-xxlarge для отображения таблицы xxlarge:
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
Пример
<table class="w3-table-all w3-xxlarge">
XXXбольшой стол
Используйте класс w3-xxxlarge для отображения таблицы xxxlarge:
| Имя | Фамилия | Точки |
|---|---|---|
| Джилл | Смит | 50 |
| канун | Джексон | 94 |
| Адам | Джонсон | 67 |
Пример
<table class="w3-table-all w3-xxxlarge">
Гигантский стол
Use the w3-jumbo class to display a jumbo large table:
| First Name | Last Name |
|---|---|
| Jill | Smith |
| Eve | Jackson |
| Adam | Johnson |
Example
<table class="w3-table-all w3-jumbo">