Отображение таблицы
Имя | Фамилия | Точки |
---|
Джил | кузнец | 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 |
Полосатый Таблица
Имя | Фамилия | Точки |
---|
Джил | кузнец | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Граничит Полосатый Таблица
Имя | Фамилия | Точки |
---|
Джил | кузнец | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Граница вокруг полосатом таблицы
Имя | Фамилия | Точки |
---|
Джил | кузнец | 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 |
Hoverable Таблица
W3-hoverable класс добавляет серый цвет фона курсора мыши над:
Имя | Фамилия | Точки |
---|
Джил | кузнец | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
пример
<table class="w3-table w3-bordered w3-striped w3-border
w3-hoverable">
Попробуй сам " Если вы хотите определенный цвет парения, добавить любой из W3-классов при наведении на каждый <TR> элемента:
Имя | Фамилия | Точки |
---|
Джил | кузнец | 50 |
Ева | Джексон | 94 |
Адам | Джонсон | 67 |
Таблица как карты
Имя | Фамилия | Точки |
---|
Джил | кузнец | 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">
Попробуй сам "