ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

W3.CSS Учебник

W3.CSS Учебник W3.CSS Введение W3.CSS Цвета W3.CSS Контейнеры W3.CSS Панели W3.CSS Границы W3.CSS Открытки W3.CSS Шрифты W3.CSS Текст W3.CSS Округлости W3.CSS Внутренние отступы W3.CSS Внешние отступы W3.CSS Отображение W3.CSS Кнопки W3.CSS Примечания W3.CSS Цитаты W3.CSS Оповещения W3.CSS Таблицы W3.CSS Списки W3.CSS Изображения W3.CSS Вводы W3.CSS Значки W3.CSS Ярлыки W3.CSS Иконки W3.CSS Адаптив W3.CSS Макеты W3.CSS Анимация W3.CSS Эффекты W3.CSS Панели W3.CSS Выпадающие W3.CSS Аккордионы W3.CSS Навигация W3.CSS Сайдбар W3.CSS Вкладки W3.CSS Пагинация W3.CSS Прогресс-бары W3.CSS Слайдшоу W3.CSS Модальные окна W3.CSS Всплывающие подсказки W3.CSS Сетка W3.CSS Код W3.CSS Фильтры W3.CSS Тренды W3.CSS Кейс W3.CSS Material-дизайн W3.CSS Валидация W3.CSS Версии W3.CSS Мобильность

W3.CSS Цвета

W3.CSS Классы цветов W3.CSS Цвет Material W3.CSS Цвет Flat UI W3.CSS Цвет Metro UI W3.CSS Цвет Win8 W3.CSS Цвет iOS W3.CSS Библиотеки цветов W3.CSS Цветовые схемы W3.CSS Цветовые темы W3.CSS Генератор цветов

Примеры

W3.CSS Примеры W3.CSS Демо W3.CSS Шаблоны

Справочники

W3.CSS Справочник W3.CSS Загрузки

W3.CSS Уроки для начинающих

W3.CSS Таблицы


Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilsson 50
Mike Ross 35

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

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

Класс Определяет
w3-table Контейнер для HTML таблицы
w3-striped Полосатая таблица
w3-border Таблица с границами
w3-bordered Граничные линии
w3-centered Центрирование содержимого таблицы
w3-hoverable Таблица при наведении
w3-table-all Установка всех свойств

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

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

<table class="w3-table">
<tr>
  <th>Имя</th>
  <th>Фамилия</th>
  <th>Возраст</th>
</tr>
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
</tr>
</table>
Попробуйте сами »

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

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

<table class="w3-table w3-striped">
Попробуйте сами »

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

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

<table class="w3-table w3-bordered">
Попробуйте сами »

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

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

<table class="w3-table w3-striped w3-bordered">
Попробуйте сами »

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

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

<table class="w3-table w3-striped w3-border">
Попробуйте сами »

Примечание: Класс w3-border не только для таблиц. Он может использоваться на любом элементе HTML!


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

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

<table class="w3-table-all">
Попробуйте сами »

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

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67
Bo Nilson 35

Пример

<thead>
  <tr class="w3-light-grey">
    <th>Имя</th>
    <th>Фамилия</th>
    <th>Возраст</th>
  </tr>
</thead>
Попробуйте сами »

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

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

<table class="w3-table-all w3-centered">
Попробуйте сами »

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

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

<table class="w3-table-all">
<tr>
  <th>Имя</th>
  <th>Фамилия</th>
  <th class="w3-center">Возраст</th>
</tr>
Попробуйте сами »

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

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

<table class="w3-table-all">
<tr>
  <th>Имя</th>
  <th>Фамилия</th>
  <th class="w3-right-align">Возраст</th>
</tr>

Попробуйте сами »

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

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

<table class="w3-table-all w3-hoverable">
Попробуйте сами »

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

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

<tr class="w3-hover-green">
Попробуйте сами »

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

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

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


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

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

<tr class="w3-red">
  <th>Имя</th>
  <th>Last Name</th>
  <th>Возраст</th>
</tr>
Попробуйте сами »

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

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

<table class="w3-table w3-blue">
Попробуйте сами »

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

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

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

Имя Фамилия Возраст Возраст Возраст Возраст Возраст Возраст Возраст Возраст Возраст Возраст Возраст
Jill Smith 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000
Eve Jackson 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400
Adam Johnson 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700

Пример

<div class="w3-responsive">
  <table class="w3-table-all">
    ... Содержимое таблицы ...
  </table>
</div>
Попробуйте сами »

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

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

<table class="w3-table-all w3-card-4">
Попробуйте сами »

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

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

<table class="w3-table-all w3-tiny">
Попробуйте сами »

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

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

<table class="w3-table-all w3-small">
Попробуйте сами »

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

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

<table class="w3-table-all w3-large">
Попробуйте сами »

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

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

<table class="w3-table-all w3-xlarge">
Попробуйте сами »

XXLarge Таблица

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

<table class="w3-table-all w3-xxlarge">
Попробуйте сами »

XXXLarge таблица

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

Имя Фамилия Возраст
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Пример

<table class="w3-table-all w3-xxxlarge">
Попробуйте сами »

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

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

Имя Фамилия
Jill Smith
Eve Jackson
Adam Johnson

Пример

<table class="w3-table-all w3-jumbo">
Попробуйте сами »