W3.CSS Таблицы

W3.CSS Классы таблицы

W3.CSS предоставляет следующие классы для таблиц:

Базовая таблица

Класс w3-table используется для отображения базовой таблицы:

Полосатая таблица

Класс w3-striped используется для добавления эффекта зебры в таблицу:

Таблица с границами

Класс w3-bordered добавляет нижнюю границу к каждой строке таблицы:

Полосатая таблица с границами

Объедините класс w3-striped и класс w3-bordered, чтобы создать полосатую таблицу с границами:

Граница вокруг таблицы

Класс w3-border используется для отображения границы вокруг таблицы:

Отображение всего сразу

Класс w3-table-all комбинирует все выше перечисленные классы:

Перевёрнутые полосы

Чтобы перевернуть полосы (начать со светло-серого цвета), добавьте элемент <thead> вокруг строки заголовка таблицы. Вы также должны определить цвет, который будет использоваться для строки заголовка таблицы:

Центрирование всего содержимого

Класс w3-centered центрирует содержимое таблицы:

Центрирование одного столбца

Класс w3-center центрирует содержимое столбца:

Выравнивание по правому краю содержимого одного столбца

Класс w3-right-align выравнивает по правому краю содержимое столбца:

Таблица при наведении

Класс w3-hoverable добавляет серый цвет фона при наведении мыши:

Цвета при наведении

Если вам нужен определенный цвет при наведении, добавьте любой из классов w3-hover-цвет к каждому элементу <tr>:

Комбинирование W3.CSS классов

Многие классы W3.CSS могут быть использованы для всех элементов HTML.

Например: классы границ, классы цветов, классы шрифтов, классы карт и многое другое.

Цветной заголовок таблицы

Используйте любой из классов w3-color для отображения цветной строки:

Цветная таблица

Используйте любой из классов w3-color для отображения цветной таблицы:

Отзывчивая (адпативная) таблица

Класс w3-responseive создает адаптивную таблицу. Таблица будет прокручиваться горизонтально на маленьких экранах. При просмотре на больших экранах разницы нет.

Измените размер экрана, чтобы увидеть эффект в таблице ниже:

Таблица как карточка

Используйте класс w3-card чтобы отобразить таблицу как карточку:

Крошечная (уменьшенная) таблица

Используйте класс w3-tiny, чтобы отобразить крошечную таблицу:

Маленькая таблица

Используйте класс w3-small, чтобы отобразить маленькую таблицу:

Большая таблица

Используйте класс w3-large, чтобы отобразить большую таблицу:

Более крупная (XLarge) таблица

Используйте класс w3-xlarge, чтобы отобразить более крупную (xlarge) таблицу:

XXLarge Таблица

Используйте класс w3-xxlarge, чтобы отобразить xxlarge таблицу:

XXXLarge таблица

Используйте класс w3-xxxlarge, чтобы отобразить xxxlarge таблицу:

Гигантская (jumbo) таблица

Используйте класс w3-jumbo, чтобы отобразить гигантскую (jumbo) таблицу: