Товаров: 0 (0р.)

Адаптивная таблица css красивая: Адаптивная таблица на чистом CSS

Содержание

Адаптивная таблица на чистом CSS

HTML/CSS 2 min

Привет! В этой статье расскажу, как можно адаптировать html-таблицу с помощью CSS

Введение

Не секрет для любого верстальщика, что таблицы — зло. Их сложно адаптировать, кастомизировать. Если на десктопной версии сайта еще довольно легко расписать таблицу, то когда начинается адаптивная верстка — все идет в тартарары.

Собственно, одним из действенных вариантов — создание горизонтальной прокрутки у таблицы. Делается несложно, но сегодняшний пост не об этом. Однако, покажу для Вас.

Первый способ адаптации

<div>
<table>
<thead>
<tr>
<th>Услуга</th>
<th>Описание</th>
<th>Цена</th>
<th>Скидка</th>
</tr>
</thead>
<tbody>
<tr>
<td>Мобильная верстка</td>
<td>Верстка под телефоны</td>
<td>$3000</td>
<td>50%</td>
</tr>
<tr>
<td>Посадка на CMS WordPress</td>
<td>Создание сайта с админ. панелью</td>
<td>$3000</td>
<td>30%</td>
</tr>
</tbody>
</table>
</div>

Стилизуем все это дело (главным образом нам нужно стилизовать .table-wrap).

.table-wrap {
text-align: center;
display: inline-block;
background-color: #fff;
padding: 2rem 2rem;
color: #000;
}
@media screen and (max-width: 600px) {
.table-wrap {
overflow-y: scroll;
}
}

В результате, на ширине ДО 600 пикселей таблица будет скроллиться, а сайт нет. Удобно, но сегодня я хотел бы поговорить о другом. Я нашел еще один интересный подход к адаптивности таблицы. Он заключается в использовании data-атрибутов и псевдоклассов. Сейчас все покажу.

Второй способ адаптации

Для начала поменяем разметку:

<div>
<table>
<thead>
<tr>
<th>Услуга</th>
<th>Описание</th>
<th>Цена</th>
<th>Скидка</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Услуга">Мобильная верстка</td>
<td data-label="Описание">Верстка под телефоны</td>
<td data-label="Цена">$3000</td>
<td data-label="Скидка">50%</td>
</tr>
<tr>
<td data-label="Услуга">Посадка на CMS WordPress</td>
<td data-label="Описание">Создание сайта с админ.  панелью</td>
<td data-label="Цена">$3000</td>
<td data-label="Скидка">30%</td>
</tr>
</tbody>
</table>
</div>

В принципе, вы можете с помощью js сделать тоже самое, пробежавшись по всем td.

Итак, раздали каждому столбцу атрибут data-label, который нам пригодится в будущем.

Задаем базовые стили:

body {
text-align: center;
padding-top: 10%;
font-family: sans-serif;
background-image: url('bg.jpg');
background-size: cover;
height: 100vh;
color: #fff;
}
.table-wrap {
text-align: center;
display: inline-block;
background-color: #fff;
padding: 2rem 2rem;
color: #000;
}
table {
border: 1px solid #ccc;
width: 100%;
margin:0;
padding:0;
border-collapse: collapse;
border-spacing: 0;
}
table tr {
border: 1px solid #ddd;
padding: 5px;
}
table th, table td {
padding: 10px;
text-align: center;
border-right: 1px solid #ddd;
}
table th {
color: #fff;
background-color: #444;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
}

Выглядит, как обычная таблица, естественно, сдвигая сайт на 320-420 пикселях, мы увидим горизонтальный скролл всего сайта. Не дело. Как это исправить? добавляем стили:

@media screen and (max-width: 600px) {
table {
border: 0;
}
table thead {
display: none;
}
table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
}
table td {
display: block;
text-align: right;
font-size: 13px;
border-bottom: 1px dotted #ccc;
border-right: 1px solid transparent;
}
table td:last-child {
border-bottom: 0;
}
table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}

Здесь мы сделали строки таблицы блочными, удалили названия столбцов, а текст самих столбцов выровняли по правому краю. В свою очередь при помощи псевдокласса ::before мы присоединяем к левому краю наши data-атрибуты. И все получилось. Пример посмотрите в пене:

Как видно, мы превратили строки таблицы в небольшой блок, в котором заключена вся информация. Думаю, такой вариант адаптивности таблицы подойдет для небольших таблиц. Пользуйтесь, друзья!

Надеюсь, Вам было интересно читать данную информацию. До скорых встреч)

Об авторе блога

MaxGraph

Автор. Веб-разработчик. Фрилансер. Преподаватель в онлайн-университете.

Портфолио: https://maxgraph.ru/
Добавляйтесь в друзья VK! Каждому добавившемуся и написавшему в личку «хочу полезность» — подарю набор крутых ссылок для верстальщика.

Таблица в CSS — шпаргалка для начинающих

Внешний вид HTML-таблиц можно существенно усовершенствовать с помощью CSS:

Чтобы задать границы таблицы CSS , воспользуйтесь свойством border.

В примере ниже элементам <table>, <th> и <td> задается черная граница:

Пример

table, th, td {
   border: 1px solid black;
}

Обратите внимание, что у таблицы в приведенном выше примере двойная граница. Это из-за того, что и у <table>, и у <th> и <td> выставлены отдельные свойства границы.

Свойство border-collapse определяет, нужно ли объединять двойную границу в одну:

Пример

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

Если вам нужна простая контурная рамка вокруг всей красивой таблицы CSS, то свойство border нужно применять к элементу <table>:

Пример

table {
    border: 1px solid black;
}

Ширина и высота таблицы определяется свойствами width и height.

В приведенном ниже примере ширина таблицы выставлена на 100%, а высота элементов <th> на 50px:

Пример

table {
    width: 100%;
}

th {
    height: 50px;
}

Свойство text-align предназначено для горизонтального выравнивания (по левому и правому краю, по центру) содержимого элементов <th> и <td>.

По умолчанию, содержимое элементов <th> выравнивается по центру, а элементов <td> — по левому краю.

В приведенном ниже примере оформления таблицы CSS к содержимому элементов <th> применяется выравнивание по левому краю:

Пример

Свойство vertical-align предназначено для вертикального выравнивания (по верхней и нижней границе, а также посередине) содержимого внутри элементов <th> и <td>.

По умолчанию, содержимое <th> и <td> выравнивается посередине.

В приведенном ниже примере к содержимому элементов <td> применяется вертикальное выравнивание по нижней границе:

Пример

td {
    height: 50px;
    vertical-align: bottom;
}

Для регулирования расстояния между границей элемента и его содержимым воспользуйтесь свойством padding (для элементов <td> и <th>):

Пример

th, td {
    padding: 15px;
    text-align: left;
}

Можно использовать свойство border-bottom в элементах <th> и <td>, чтобы отделить строки CSS таблицы друг от друга горизонтальным разделителем:

Пример

th, td {
    border-bottom: 1px solid #ddd;
}

Воспользуйтесь селектором :hover в элементе <tr>, чтобы подсветить ячейки при наведении на них курсора мыши.

Пример

tr:hover {background-color: #f5f5f5}

Чтобы получить CSS таблицы со строками разного цвета, используйте селектор nth-child(), и задайте всем четным и нечетным строкам разный цвет.

Пример

tr:nth-child(even) {background-color: #f2f2f2}

В приведенном ниже примере показано, как задавать цвет фона и текста для элементов <th>:

Пример

th {
    background-color: #4CAF50;
    color: white;
}

Адаптивная таблица CSS будет показывать горизонтальный скроллинг, если окажется слишком большой для страницы или экрана.

Добавьте <div> с заданным свойством overflow-x: auto для элемента <table>, чтобы сделать таблицу адаптивной.

Пример

<div>

<table>
... содержимое таблицы ...
</table>

</div>

В этом примере показано, как можно создать забавную таблицу с помощью каскадных таблиц стилей CSS.

В данном примере показано, как можно расположить подпись к таблице при помощи CSS.

СвойстваОписание
borderПозволяет одним выражением установить сразу все границы
border-collapseПозволяет объединять двойные границы в одну
border-spacingПозволяет указать расстояние между смежными ячейками
caption-sideОтвечает за положение подписи к таблице
empty-cellsПозволяет показать или скрыть границы для пустых ячеек в таблице
table-layoutПозволяет использовать в таблице шаблонный алгоритм

Данная публикация является переводом статьи «CSS Tables» , подготовленная редакцией проекта.

Таблицы · Bootstrap на русском

Из-за повсеместного использования таблицы через сторонние виджеты календарями и датами, мы разработали таблицы Для быть

отказ в. Просто добавьте базовый класс .table любой <table>, расширить пользовательские стили или различных классов включен модификатор.

Содержание

Примеры

Используя самые элементарные таблица наценки, вот как .table на основе таблицы смотри на Bootstrap.

#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Вы также можете инвертировать цвета—со светлым текстом на темном фоне—с . table-inverse.

#ИмяФамилияПользователь
1		MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Таблица параметры заголовка

Аналогично по умолчанию и обратные таблицы, использовать один из двух классов модификатор, чтобы сделать <thead> появляются светло-или темно-серый.

#Имя
Фамилия		Пользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton
@fat
3Larrythe Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

«Зебра»

Используйте . table-striped для добавления зебра-чередование любого таблица подряд в <tbody>.

#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Рамочная таблица

Добавить . table-bordered для границ со всех сторон таблица и клеток.

#ИмяФамилияПользователь
1MarkOtto@mdo
2MarkOtto@TwBootstrap
3JacobThornton@fat
4Larry the Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
#ИмяФамилияПользователь
1MarkOtto@mdo
2MarkOtto@TwBootstrap
3JacobThornton@fat
4Larry the Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Наведение строк

Добавить . table-hover для включения наведение состояние О таблица строк в <tbody>.

#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Небольшая таблица

Добавьте класс . table-sm, чтобы сделать таблицу более компактной, уменьшив наполовину внутренний отступ в ячейках.

#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
#ИмяФамилияПользователь
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Контекстные классы

Использовать контекстные классы для стиля строк таблицы или отдельных ячеек.

КлассОписание
.table-activeПрименяет цвет при наведении на конкретную строку или ячейку
.table-successУказывает на успешное или позитивное действие
.table-infoУказывает на нейтральные информативные изменения или действия
.table-warningУказывает на предупреждения, которые могут потребовать внимания
.table-dangerУказывает на опасное или потенциально негативное действие
#Заголовок столбцаЗаголовок столбцаЗаголовок столбца
1Column contentColumn contentColumn content
2Column contentColumn contentColumn content
3Column contentColumn contentColumn content
4Column contentColumn contentColumn content
5Column contentColumn contentColumn content
6Column contentColumn contentColumn content
7Column contentColumn contentColumn content
8Column contentColumn contentColumn content
9Column contentColumn contentColumn content
<!-- В строках -->
<tr>. ..</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>

<!-- В ячейках (`td` или `th`) -->
<tr>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>

Регулярное таблица вариантов предпосылки не доступно с обратным таблица, однако, вы можете использовать текст или фона утилит для достижения подобных стилей.

#Заголовок столбцаЗаголовок столбцаЗаголовок столбца
1Column contentColumn contentColumn content
2Column contentColumn contentColumn content
3Column contentColumn contentColumn content
4Column contentColumn contentColumn content
5Column contentColumn contentColumn content
6Column contentColumn contentColumn content
7Column contentColumn contentColumn content
8Column contentColumn contentColumn content
9Column contentColumn contentColumn content
<!-- В строках -->
<tr>...</tr>
<tr>. ..</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>

<!-- В ячейках (`td` или `th`) -->
<tr>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>
Передать смысл для ассистивных технологий

Используя цвет, чтобы добавить смысл только обеспечивает визуальную индикацию, которая не будет доведена до пользователей ассистивных технологий, таких как экранные дикторы. Убедитесь, что информация обозначается цвет либо очевидно из самого содержимого (например, текст), или включен с помощью альтернативных средств, таких как дополнительный текст, скрытый с .sr-only класс.

Адаптивные таблицы

Сделать таблицу адаптивной можно просто с помощью добавления класса .table-responsive к .table, благодаря этому у Вас появятся полосы прокрутки таблицы на устройствах с малыми дисплеями (менее 768px). При просмотре таблицы на устройстве с шириной экрана более чем 768px Вы даже не заметите разницы.

Вертикальной подрезки/усечения

Адаптивный таблицы использовать overflow-y: hidden, который загибается любое содержание, которое выходит за пределы нижней или верхней кромками таблица. В частности, это может клип выпадающие меню и другие сторонние виджеты.

Firefox и fieldsets

Firefox имеет какой-то несуразный набор полей для укладки участием width что мешает быть таблице адаптивной. Это не может быть изменено без Firefox на конкретные взломать, что мы не дают в Bootstrap:

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

Для получения дополнительной информации, прочитайте этот ответ на Stack Overflow.

#Таблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица Заголовок
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
#Таблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица Заголовок
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
<div>
  <table>
    . ..
  </table>
</div>

Обратный стиль

Превратите традиционную таблицу на их стороне с помощью table-reflow. При использовании обратного стиля, заголовок таблицы будет в первом столбце, первая строка таблицы становится второй колонкой, вторая строка становится третьей колонкой, и т. д.

Содержание заказа и сложных таблицы

Помните, что table-reflow изменения стиля визуальный порядок содержания. Убедитесь, что вы только применить этот стиль к хорошо сформированные и простые данные таблицы (и в частности, не использовать это для разметка таблицы) с соответствующими <th> таблица заголовков ячеек для каждой строки и столбца.

Кроме того, этот класс не будет работать за таблицы клеток, которые охватывают несколько строк или столбцов (с помощью rowspan или colspan атрибуты).

#Таблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица ЗаголовокТаблица Заголовок
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

Таблицы.

Содержание · Bootstrap. Версия v4.0.0

Документация и примеры стилизации таблиц с элементами ввода (с учетом их широкого применения в плагинах JavaScript).

Примеры

Из-за широкого распространения таблиц в сторонних виджетах, таких как календари и «напоминалки», мы сделали так, что таблицы подключаются по согласию пользователя. Просто добавьте базовый класс .table в любой <table>, затем расширьте стилизацию за счет наших обычных классов, либо классов-модификаторов.

Вот так таблицы, основанные на классе .table, выглядят в базовой разметке таблиц в Bootstrap. Все стили таблиц в BS4 наследуются, что означает, что вложенные таблицы будут стилизованы как родительские.

# Имя Фамилия Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Вы можете инвертировать цвета со светлых на темные классом . table-dark.

# Имя Фамилия Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Опции заголовка таблицы

По тому же принципу осветляйте или делайте серым заголовок таблицы <thead> с помощью классов .thead-light и .thead-dark.

# Имя Фамилия Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# Имя Фамилия Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Разделенные «полосами» ряды

Добавьте класс . table-striped к <tbody> для разделения «полосками зебры» рядов таблицы.

# Имя Фамилия Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Имя Фамилия Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

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

Добавьте класс . table-bordered в <table> для создания границ ячеек и таблицы со всех сторон.

# Имя Фамилия Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter 
<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Имя Фамилия Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter 
<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Ряды с :hover

Добавьте класс . table-hover в <tbody> для активации :hover у рядов таблицы.

# Имя Фамилия Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Имя Фамилия Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

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

Добавьте класс . table-sm чтобы сделать таблицы компактнее урезанием паддинга ячкейки на 50%.

# Имя Фамилия Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Имя Фамилия Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Контекстуальные классы

Используйте их для раскраски рядов или отдельных ячеек таблицы.

Type Заголовок колонки Заголовок колонки
Активный (Active) Ячейка Ячейка
По умолчанию (Default) Ячейка Ячейка
Главный (Primary) Ячейка Ячейка
Второстепенный (Secondary) Ячейка Ячейка
Успех (Success) Ячейка Ячейка
Опасность (Danger) Ячейка Ячейка
Предупреждение (Warning) Ячейка Ячейка
Предупреждение (Info) Ячейка Ячейка
Светлый (Light) Ячейка Ячейка
Темный (Dark) Ячейка Ячейка 
<!-- On rows -->
<tr>...</tr>

<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td>...</td>
  
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>. ..</td>
  <td>...</td>
  <td>...</td>
</tr>

Варианты бэкграудна обычных таблиц недоступны с темной таблицей, но мы можете использовать текстовые или бэкграундные утилиты для достижения подобных стилей.

# Заголовок колонки Заголовок колонки
1 Ячейка Ячейка
2 Ячейка Ячейка
3 Ячейка Ячейка
4 Ячейка Ячейка
5 Ячейка Ячейка
6 Ячейка Ячейка
7 Ячейка Ячейка
8 Ячейка Ячейка
9 Ячейка Ячейка 
<!-- On rows -->
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
</tr>
Добавление информативности для технологии для инвалидов

Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей ассистивных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.

Создавайте гибкие таблицы, обертывая любой .table с .table-responsive{-sm|-md|-lg|-xl}, заставляя таблицу прокручиваться горизонтально в каждой контрольной точке max-width получат ширину 575.99px, 767.99px, 991.99px и 1119.99 px, соответственно.

Обратите внимание, что поскольку браузеры в настоящее время не поддерживают запросы диапазона, мы используем ограничения минимальных min- и максимальных max- префиксов и видовых экранов с дробной шириной (что может произойти при определенных условиях на устройствах с высоким разрешением на дюйм, например), используя значения с более высоким точность для этих сравнений.

Надписи

Тэг <caption> — это нечто похожее на заголовок для таблицы. Он помогает пользователям программ для чтения с экрана обнаружить таблицу, оценить ее содержимое и ее ценность для чтения.

Список пользователей
# Имя Фамилия Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table>
  <caption>Список пользователей</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Имя</th>
      <th scope="col">Фамилия</th>
      <th scope="col">Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

«Отзывчивые» таблицы

«Отзывчивые» таблицы позволяют таблицам прокручиваться горизонтально. Сделайте любую таблицу таковой для всех экранов и девайсов, добавив класс .table-responsive в класс .table. Или укажите максимальный брейкпойнт, на котором появится данное свойство таблицы, добавив класс .table-responsive{-sm|-md|-lg|-xl}.

Вертикальное обрезание/сокращение

«Отзывчивые» таблицы используют overflow-y: hidden, что «обрезает» любой контент, который существует ниже конца верхних краев таблицы. В частности, это может «срезать» выпадающие меню и другие сторонние виджеты.

Всегда «отзывчиво»

Через каждую контрольную точку используйте .table-responsive для горизонтально прокручиваемых таблиц.

# Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
1 Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка
2 Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка
3 Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка Ячейка 
<div>
  <table>
    . ..
  </table>
</div>

Специфика брейкпойнтов

Используйте класс .table-responsive{-sm|-md|-lg|-xl} когда необходимо создать отзывчивые до необходимого брейкпойнта таблицы. От него и выше таблицы будут вести себя как обычные таблицы и не будут прокручиваться горизонтально.

# Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
1 Ячейка Ячейка Ячейка Ячейка Ячейка
2 Ячейка Ячейка Ячейка Ячейка Ячейка
3 Ячейка Ячейка Ячейка Ячейка Ячейка
# Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
1 Ячейка Ячейка Ячейка Ячейка Ячейка
2 Ячейка Ячейка Ячейка Ячейка Ячейка
3 Ячейка Ячейка Ячейка Ячейка Ячейка
# Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
1 Ячейка Ячейка Ячейка Ячейка Ячейка
2 Ячейка Ячейка Ячейка Ячейка Ячейка
3 Ячейка Ячейка Ячейка Ячейка Ячейка
# Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы Заголовок таблицы
1 Ячейка Ячейка Ячейка Ячейка Ячейка
2 Ячейка Ячейка Ячейка Ячейка Ячейка
3 Ячейка Ячейка Ячейка Ячейка Ячейка 
<div>
  <table>
    . 

 
Теги html таблицы
 


		
			
			
			

<p>Таблица html</p>
<table cellspacing="0" cellpadding="3" border="0">
<tr>
<th>Иванов</th>
<th>Петров</th>
<th>Сидоров</th>
<th>Лукашин</th>
</tr>
 
<tr>
<td>3</td>
<td>4</td>
<td>8</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>7</td>
</tr>
<tr>
<td>0</td>
<td>4</td>
<td>9</td>
<td>11</td>
</tr>
<tr>
<td>11</td>
<td>13</td>
<td>17</td>
<td>19</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>20</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>11</td>
<td>14</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>18</td>
<td>14</td>
</tr>
</table>

			
				

					
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

						
						
<p>Таблица html</p>
<table cellspacing="0" cellpadding="3" border="0">
<tr>
<th>Иванов</th>
<th>Петров</th>
<th>Сидоров</th>
<th>Лукашин</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>8</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>5</td>
<td>7</td>
</tr>
<tr>
<td>0</td>
<td>4</td>
<td>9</td>
<td>11</td>
</tr>
<tr>
<td>11</td>
<td>13</td>
<td>17</td>
<td>19</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>20</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>11</td>
<td>14</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>18</td>
<td>14</td>
</tr>
</table>

					

		


С помощью элемента table, который служит контейнером, создается таблица html. 

 
Таблица html с добавлением стилей
 

Что касается кода в html документе, на этом все. НаписАл название таблицы, задал количество столбиков и строчек, задал отступы и ширину. Теперь переходим в файл со стилями. Называется он (style.css) как указано в начале документа. Начнем с первого:


		
			
			
			

#main{
margin:0 auto 0 auto;
font-family:Tahoma; text-align:center;
}

			
				

					
				
						
#main{
margin:0 auto 0 auto;
font-family:Tahoma; text-align:center;
}

					

		


В данном блоке указаны все свойства и значения этих свойств для #main. id="main" я прописал ранее для самой таблицы (table).Свойства для параграфа с названием таблицы:


		
			
			
			

p{
padding:7px 30px 7px 30px;
margin:0 auto 15px auto;
background-color:#9400D3; color:CCFF00;
width:350px;
text-align:center;
font-size:30px;
border-radius: 13px;
}

			
				

					
				
						
p{
padding:7px 30px 7px 30px;
margin:0 auto 15px auto;
background-color:#9400D3; color:CCFF00;
width:350px;
text-align:center;
font-size:30px;
border-radius: 13px;
}

					

		




padding:7px 30px 7px 30px; — отступы внутри ячейки от границ.


margin:0 auto 15px auto; — отступы от внешних элементов.


background-color:#9400D3; color:CCFF00; — задал цвет для блока и цвет для текста.


width:350px; — ширина.


text-align:center; — выровнял текст по центру.


font-size:30px; — задал размер шрифта.


border-radius: 13px; — округлил углы данного блока. Так же само я сделал для всех блоков.




		
			
			
			

th{
border-radius: 13px;
background-color:#FA8072; color:#FFFAFA;
font-size:18px;
padding:7px 30px 7px 30px;
}

			
				

					
				
						
th{
border-radius: 13px;
background-color:#FA8072; color:#FFFAFA;
font-size:18px;
padding:7px 30px 7px 30px;
}

					

		




border-radius: 13px; — округляем углы. 

 
Генератор html таблиц
 

Если вы не понимаете, что и как делается, не знаете тегов и не хотите тратить время, можно воспользоваться онлайн генераторами, с помощью которых быстро создаются таблицы. Вот несколько таких генераторов html таблиц, часто их еще называют онлайн конструкторы:


  • apsolyamov.ru
    • 

  • daruse.ru
    • 

  • dezzi.ru
    • 

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




 


Генератор или онлайн конструктор сделает все за вас. После нажатия кнопки Create table, на мониторе появится готовый результат такой таблицы и уже готовый код для вставки на страницу. Таким образом, даже без знаний html кода, у вас получится готовая таблица буквально на несколько секунд.


Легко и быстро можно создать абсолютно любое количество ячеек. Иногда бывает просто необходимая вещь, которой всегда можно воспользоваться. Если вы знаете получше генераторы, поделитесь названием в комментариях.


Результат самой таблицы вы уже видели выше. Вы можете добавить еще свои свойства. Если у вас остались вопросы, я с радостью на них отвечу. Буду благодарен за комментарий или репост в социальных сетях.


Евгений Несмелов

 
Таблицы CSS
 
Коллекция бесплатных примеров кода таблиц HTML и CSS: простой, отзывчивый, ценовой, периодический и т. Д.

 


  1. Bootstrap Таблицы 
    2. 


   
О коде
 
   
Зигзагообразный стол
 
  
Таблица с зигзагообразной диагональю.

  
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  
Responsive: yes

  
Зависимости: -


  
   
О коде
 
   
Таблица с закрепленным заголовком таблицы и левым столбцом
 
  
  
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  
Responsive: no

  
Зависимости: -


    
    
    
       
Сделано с
 
      
  • HTML
    • 
        
  • CSS/SCSS
    • 
        
  • JavaScript (jquery. js)
    • 
      

  
   
О коде
 
   
Сортировка строк таблицы по заголовкам
 
  
Сортировка строк таблицы по заголовкам таблицы - по возрастанию и убыванию.


   
О коде
 
   
Адаптивные таблицы с использованием LI
 
 
  
   
О коде
 
   
Только HTML и CSS адаптивной таблицы
 
  
Таблица HTML сделана адаптивной только с помощью CSS. На мобильных устройствах строка заголовка фиксируется слева, а содержимое прокручивается по горизонтали.

  
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  
Responsive: yes

  
Зависимости: -

 
Адаптивный стол с Flexbox
 

Идея заключалась в том, чтобы создать красивый рабочий стол, который будет работать и на небольших экранах. 


 
Макет адаптивной таблицы CSS
 

Использование CSS для адаптивных макетов таблиц вместо плавающих. Адаптивный (все сводится к одной строке) тоже. 


 
Фиксированный заголовок таблицы
 
 

 
Отзывчивая таблица
 

CSS трюки метод адаптивной таблицы. 


 
Выделение таблицы на чистом CSS
 

Простой (и неприятный) трюк для вертикального и горизонтального выделения при наведении на таблицы Сделано с чистым CSS. 



  
   
О коде
 
   
Закрепить заголовки таблицы по 
 position: sticky;  
  
Попытка сделать красивую таблицу с липкими заголовками таблиц, если их таблица находится в области просмотра (например, имена списков имен iOS начинаются с заглавной буквы).

  
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  
Responsive: no

  
Зависимости: -

 
Отзывчивая таблица
 

Адаптивная таблица с шаблонами rwd-table-patterns.


 
Адаптивная таблица CSS и подробный просмотр
 

Пример сценария таблицы и подробного представления. 


 
Отзывчивая таблица
 

На маленьких экранах таблица сворачивается в «список». Заголовки извлекаются из атрибутов данных. 



   
О коде
 
   
Адаптивная и доступная таблица данных
 
  
Ориентированная на мобильные устройства и доступная таблица данных.  В более узких портах обзора значок скрывается, строки превращаются в карточки с метками, отображаемыми с помощью атрибута  data- * .

 
Таблица в HTML и CSS
 
 

 

   
О коде
 
   
Периодическая таблица CSS Grid
 
  
Периодическая таблица элементов с CSS Grid.

  
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  
Responsive: no

  
Зависимости: -


  
   
О коде
 
   
CSS Grid: Периодическая таблица
 
  
  
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  
Responsive: no

  
Зависимости: simple-line-icons.css


  
   
О коде
 
   
Периодическая таблица элементов
 
  
Адаптивная и анимированная периодическая таблица элементов в HTML и CSS.

  
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  
Responsive: yes

  
Зависимости: -


  
   
О коде
 
   
Периодическая таблица типа CSS Grid
 
  
  
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

  
Responsive: no

  
Зависимости: -


   
О коде
 
   
Периодическая таблица
 
  
Периодическая таблица в HTML и JavaScript.


Css для таблиц html – Тарифы на сотовую связь

 							
  
							
						
						




  


и 
.