Таблицы в Tailwind CSS

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

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

Далее мы подробно расскажем, как использовать Tailwind CSS для создания и настройки таблиц.

Базовые стили таблиц

Tailwind CSS предоставляет некоторые базовые классы для управления внешним видом и макетом таблиц. К часто используемым утилитарным классам относятся table-auto и table-fixed, которые используются для задания макета таблицы.

  • table-auto: Макет по умолчанию, ширины столбцов таблицы автоматически определяются содержимым.
  • table-fixed: Ширины столбцов таблицы фиксированы. Ширина всех столбцов равномерно делится исходя из общей ширины таблицы; подходит для таблиц с одинаковой шириной столбцов.

Использование table-auto позволяет таблице автоматически подстраивать ширину столбцов под содержимое ячеек.

Пример

<table class="table-auto">
  <thead>
    <tr>
      <th>Песня</th>
      <th>Исполнитель</th>
      <th>Год</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
      <td>Malcolm Lockyer</td>
      <td>1961</td>
    </tr>
    <tr>
      <td>Witchy Woman</td>
      <td>The Eagles</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>Shining Star</td>
      <td>Earth, Wind, and Fire</td>
      <td>1975</td>
    </tr>
  </tbody>
</table>

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

Использование table-fixed позволяет таблице игнорировать содержимое и использовать фиксированную ширину столбцов. Ширина первой строки задаёт ширину столбцов для всей таблицы.

Пример

<table class="table-fixed">
  <thead>
    <tr>
      <th>Песня</th>
      <th>Исполнитель</th>
      <th>Год</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td>
      <td>Malcolm Lockyer</td>
      <td>1961</td>
    </tr>
    <tr>
      <td>Witchy Woman</td>
      <td>The Eagles</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>Shining Star</td>
      <td>Earth, Wind, and Fire</td>
      <td>1975</td>
    </tr>
  </tbody>
</table>

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

Границы и отступы

Tailwind предоставляет множество утилитарных классов для управления границами таблицы, внутренними и внешними отступами и другими деталями макета.

Вы можете использовать такие классы, как border, border-collapse, border-spacing, для управления стилем границ таблицы.

  • border: Добавляет границы к таблице.
  • border-collapse: Управляет тем, схлопываются ли границы ячеек таблицы.
  • border-spacing: Задаёт расстояние между ячейками.

Пример

<table class="table-auto border-collapse w-full">
  <thead>
    <tr>
      <th class="border px-4 py-2">Заголовок 1</th>
      <th class="border px-4 py-2">Заголовок 2</th>
      <th class="border px-4 py-2">Заголовок 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-4 py-2">Строка 1, Столбец 1</td>
      <td class="border px-4 py-2">Строка 1, Столбец 2</td>
      <td class="border px-4 py-2">Строка 1, Столбец 3</td>
    </tr>
    <tr>
      <td class="border px-4 py-2">Строка 2, Столбец 1</td>
      <td class="border px-4 py-2">Строка 2, Столбец 2</td>
      <td class="border px-4 py-2">Строка 2, Столбец 3</td>
    </tr>
  </tbody>
</table>

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

Padding и Margin

Вы можете использовать классы px-* и py-* для установки внутренних отступов ячеек таблицы, а классы m-* и p-* — для установки внешних отступов таблицы.

Пример

<!-- Установка внутренних отступов ячеек таблицы -->
<table class="table-auto w-full border-collapse">
  <thead>
    <tr>
      <th class="border px-6 py-4">Заголовок 1</th>
      <th class="border px-6 py-4">Заголовок 2</th>
      <th class="border px-6 py-4">Заголовок 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-6 py-4">Строка 1, Столбец 1</td>
      <td class="border px-6 py-4">Строка 1, Столбец 2</td>
      <td class="border px-6 py-4">Строка 1, Столбец 3</td>
    </tr>
  </tbody>
</table>

<!-- Установка внешних отступов таблицы -->
<table class="table-auto w-full border-collapse mt-8">
  <thead>
    <tr>
      <th class="border px-4 py-2">Заголовок 1</th>
      <th class="border px-4 py-2">Заголовок 2</th>
      <th class="border px-4 py-2">Заголовок 3</th>
    </tr>
  </thead>
</table>

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

Выравнивание и стили текста

Tailwind предоставляет классы для управления выравниванием и стилем шрифта содержимого ячеек таблицы, например:

  • text-left, text-center, text-right: Управляет выравниванием текста.
  • font-semibold, font-bold: Управляет насыщенностью шрифта.
  • uppercase, lowercase, capitalize: Управляет регистром текста.

Пример

<!-- Установить выравнивание текста по центру -->
<table class="table-auto border-collapse w-full">
  <thead>
    <tr>
      <th class="border px-4 py-2 text-center font-bold">Заголовок 1</th>
      <th class="border px-4 py-2 text-center font-bold">Заголовок 2</th>
      <th class="border px-4 py-2 text-center font-bold">Заголовок 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-4 py-2 text-center">Строка 1, Столбец 1</td>
      <td class="border px-4 py-2 text-center">Строка 1, Столбец 2</td>
      <td class="border px-4 py-2 text-center">Строка 1, Столбец 3</td>
    </tr>
  </tbody>
</table>

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

Объединение ячеек

Tailwind CSS поддерживает настройку объединённых ячеек через HTML-атрибуты, такие какcolspanиrowspan。

Пример

<!-- Объединить столбцы -->
<table class="table-auto w-full border-collapse">
  <thead>
    <tr>
      <th class="border px-4 py-2" colspan="2">Заголовок 1 & 2</th>
     <th class="border px-4 py-2">Заголовок 3</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <td class="border px-4 py-2" colspan="2">Строка 1, Столбец 1 & 2</td>
     <td class="border px-4 py-2">Строка 1, Столбец 3</td>
   </tr>
 </tbody>
</table>

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

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

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

Например, используйте префиксы sm:, md:, lg: для настройки поведения отображения на разных экранах.

Пример

<!-- Скрыть столбцы на маленьких экранах -->
<table class="table-auto w-full border-collapse">
  <thead>
    <tr>
      <th class="border px-4 py-2">Заголовок 1</th>
      <th class="border px-4 py-2 hidden md:table-cell">Заголовок 2</th>
      <th class="border px-4 py-2">Заголовок 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-4 py-2">Строка 1, Столбец 1</td>
      <td class="border px-4 py-2 hidden md:table-cell">Строка 1, Столбец 2</td>
      <td class="border px-4 py-2">Строка 1, Столбец 3</td>
    </tr>
  </tbody>
</table>

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

Подпись таблицы

Используйтеcaption-topРазместите элемент caption в верхней части таблицы.

Пример

<table>
  <caption class="caption-top">
    Таблица 3.1: Профессиональные рестлеры и их коронные приёмы.
  </caption>
  <thead>
    <tr>
      <th>Рестлер</th>
      <th>Коронный приём(ы)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>«Стоун Колд» Стив Остин</td>
      <td>Стоун Колд Станнер, Пресс Лу Теса</td>
    </tr>
    <tr>
      <td>Брет «Хитман» Харт</td>
      <td >Шарпшутер</td>
    </tr>
    <tr>
      <td>Рейзор Рамон</td>
      <td>Грань Рейзора, Фоллавэй слэм</td>
    </tr>
  </tbody>
</table>

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

Используйтеcaption-bottom, чтобы разместить элемент caption внизу таблицы.

Пример

<table>
  <caption class="caption-bottom">
    Таблица 3.1: Профессиональные рестлеры и их коронные приёмы.
  </caption>
  <thead>
    <tr>
      <th>Рестлер</th>
      <th>Коронный приём(ы)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>«Стоун Колд» Стив Остин</td>
      <td>Стоун Колд Станнер, Пресс Лу Теса</td>
    </tr>
    <tr>
      <td>Брет «Хитман» Харт</td>
      <td >Шарпшутер</td>
    </tr>
    <tr>
      <td>Рейзор Рамон</td>
      <td>Грань Рейзора, Фоллавэй слэм</td>
    </tr>
  </tbody>
</table>

Попробуйте сами »
Другие расширения