НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP ЯК ЗРОБИТИ W3.CSS JQUERY XML JAVA GO БІЛЬШЕ 🔍 ◑ КНИГИ ДОВІДНИКИ ВПРАВИ
W3CSS. W3Schools українською. Уроки для початківців

En

W3.CSS Таблиці

❮ Prev Next ❯
Ім’я Прізвище Вік
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-колір для відображення кольорового рядка:

Ім’я Прізвище Вік
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Приклад

<tr class="w3-red">
  <th>Ім’я</th>
  <th>Прізвище</th>
  <th>Вік</th>
</tr>
Спробуйте самі »

Кольорова таблиця

Використовуйте будь-який із класів w3-колір для відображення кольорової таблиці:

Ім’я Прізвище Вік
Jill Smith 50
Eve Jackson 94
Adam Johnson 67

Приклад

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

Чутлива (адаптивна) таблиця

Клас w3-responsive створює чутливу (адаптивну) таблицю. Таблиця буде прокручуватись горизонтально на маленьких екранах. При перегляді на великих екранах різниці немає.

Змініть розмір екрану, щоб побачити ефект в таблиці нижче:

Ім’я Прізвище Вік Вік Вік Вік Вік Вік Вік Вік Вік Вік Вік
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">
Спробуйте самі »
❮ Prev Next ❯