Последние учебники веб-разработки
 

W3.CSS таблицы

❮ Предыдущая Следующая Глава ❯

Отображение таблицы

Имя Фамилия Точки
Джил кузнец 50
Ева Джексон 94
Адам Джонсон 67
филиал Nilsson 50
Майк Росс 35

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

Имя Фамилия Точки
Джил кузнец 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>
Попробуй сам "

Выложенные Таблица

Имя Фамилия Точки
Джил кузнец 50
Ева Джексон 94
Адам Джонсон 67

пример

<table class="w3-table w3-border">
Попробуй сам "

Полосатый Таблица

Имя Фамилия Точки
Джил кузнец 50
Ева Джексон 94
Адам Джонсон 67

пример

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

Граничит Полосатый Таблица

Имя Фамилия Точки
Джил кузнец 50
Ева Джексон 94
Адам Джонсон 67

пример

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

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

Имя Фамилия Точки
Джил кузнец 50
Ева Джексон 94
Адам Джонсон 67

пример

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

Подавать Полоски

Имя Фамилия Точки
Джил кузнец 50
Ева Джексон 94
Адам Джонсон 67

Чтобы перевернуть полосы, просто добавьте <THEAD> вокруг заголовка таблицы:

пример

<thead>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
Попробуй сам "

Таблица с цветной Heading

Имя Фамилия Точки
Джил кузнец 50
Ева Джексон 94
Адам Джонсон 67

пример

<thead>
  <tr class="w3-red">
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
</thead>
Попробуй сам "

Таблица цветов

Имя Фамилия Точки
Джил кузнец 50
Ева Джексон 94
Адам Джонсон 67

пример

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

Hoverable Таблица

W3-hoverable класс добавляет серый цвет фона курсора мыши над:

Имя Фамилия Точки
Джил кузнец 50
Ева Джексон 94
Адам Джонсон 67

пример

<table class="w3-table w3-bordered w3-striped w3-border w3-hoverable">
Попробуй сам "

Если вы хотите определенный цвет парения, добавить любой из W3-классов при наведении на каждый <TR> элемента:

Имя Фамилия Точки
Джил кузнец 50
Ева Джексон 94
Адам Джонсон 67

пример

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

Таблица как карты

Имя Фамилия Точки
Джил кузнец 50
Ева Джексон 94
Адам Джонсон 67

пример

<table class="w3-table w3-bordered w3-striped w3-card-4">
Попробуй сам "

Отзывчивый Таблица

Чуткий таблица будет отображать горизонтальную полосу прокрутки, если экран слишком мал, чтобы отобразить полное содержание.

Попробуйте изменить размер экрана, чтобы увидеть эффект.

Имя Фамилия Точки Точки Точки Точки Точки Точки Точки Точки Точки Точки Точки Точки Точки
Джил кузнец 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000
Ева Джексон 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400
Адам Джонсон 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700

пример

<div class="w3-responsive">

<table class="w3-table w3-bordered w3-striped">
... table content ...
</table>

</div>
Попробуй сам "

Крошечный Таблица

Имя Фамилия Точки
Джил кузнец 50
Ева Джексон 94
Адам Джонсон 67

пример

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

Маленький стол

Имя Фамилия Точки
Джил кузнец 50
Ева Джексон 94
Адам Джонсон 67

пример

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

Большой стол

Имя Фамилия Точки
Джил кузнец 50
Ева Джексон 94
Адам Джонсон 67

пример

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

XLarge Таблица

Имя Фамилия Точки
Джил кузнец 50
Ева Джексон 94
Адам Джонсон 67

пример

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

Таблица XXLarge

имя Точки
Джилл Смит 50
Ева Джексон 94
Адам Джонсон 67
Бо Нильсон 35

пример

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

Таблица XXXLarge

имя Точки
кузнец 50
Джексон 94
Джонсон 67
Nilson 35

пример

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

Jumbo Таблица

имя Точки
кузнец 50
Джексон 94
Джонсон 67
Nilson 35

пример

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

❮ Предыдущая Следующая Глава ❯