Содержание

table-layout ⚡️ HTML и CSS с примерами кода

Свойство table-layout определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на её содержимом.

Демо

Колонки и таблицы
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • border-collapse
  • border-spacing
  • caption-side
  • empty-cells
  • table-layout
  • vertical-align

Синтаксис

/* Keyword values */
table-layout: auto;
table-layout: fixed;
/* Global values */
table-layout: inherit;
table-layout: initial;
table-layout: revert;
table-layout: revert-layer;
table-layout: unset;

Значения

auto
Браузер загружает всю таблицу, анализирует её для определения размеров ячеек и только после этого отображает.
fixed
Ширина колонок в этом случае определяется либо с помощью тега <col>, либо вычисляется на основе первой строки. Если данные о форматировании первой строки таблицы по каким-либо причинам получить невозможно, в этом случае таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. Это зависит от используемого браузера, но в любом случае ширина ячейки меняться не будет. Для корректной работы этого значения обязательно должна быть задана ширина таблицы.

Значение по-умолчанию: auto

Применяется к тегу <table>

или к элементу, у которого значение display установлено как table или inline-table.

Спецификации

  • Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
  • CSS Level 2 (Revision 1)

Поддержка браузерами

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>table-layout</title>
    <style>
      table {
        table-layout: fixed; /* Фиксированная ширина ячеек */
        width: 100%; /* Ширина таблицы */
      }
      . col1 {
        width: 160px;
      }
      .coln {
        width: 60px;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <col />
      <col span="9" />
      <tr>
        <td></td>
        <td>2012</td>
        <td>2013</td>
        <td>2014</td>
        <td>2015</td>
        <td>2016</td>
        <td>2017</td>
        <td>2018</td>
        <td>2019</td>
        <td>2020</td>
      </tr>
      <tr>
        <td>Нефть</td>
        <td>5</td>
        <td>7</td>
        <td>2</td>
        <td>8</td>
        <td>3</td>
        <td>34</td>
        <td>62</td>
        <td>74</td>
        <td>57</td>
      </tr>
      <tr>
        <td>Золото</td>
        <td>3</td>
        <td>6</td>
        <td>4</td>
        <td>6</td>
        <td>4</td>
        <td>69</td>
        <td>72</td>
        <td>56</td>
        <td>47</td>
      </tr>
      <tr>
        <td>Дерево</td>
        <td>5</td>
        <td>8</td>
        <td>3</td>
        <td>4</td>
        <td>7</td>
        <td>73</td>
        <td>79</td>
        <td>34</td>
        <td>86</td>
      </tr>
    </table>
  </body>
</html>

Границы таблиц — Учебник CSS — schoolsw3.

com

❮ Назад Далее ❯

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

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

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

Границы таблицы

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

Приведенный ниже пример задает сплошную границу для элементов <table>, <th> и <td>:

Фамилия Имя
Щипунов Андрей
Щипунова Кристина

Пример

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

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

Таблица во всю ширину

Приведенная выше таблица в некоторых случаях может показаться небольшой. Если вам нужна таблица, которая должна занимать весь экран (во всю ширину), добавьте width: 100% к элементу <таблица>:

Фамилия Имя
Щипунов Андрей
Щипунова Кристина

Пример

table {
  width: 100%;
}

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

Двойные границы

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

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

Свернуть границы таблицы

Свойство border-collapse задает, следует ли сворачивать границы таблицы в единую границу:

Фамилия Имя
Щипунов Андрей
Щипунова Кристина

Пример

table {
  border-collapse: collapse;
}

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

Если вам нужна только граница вокруг таблицы, укажите только свойство

border для <table>:

Фамилия Имя
Щипунов Андрей
Щипунова Кристина

Пример

table {
  border: 1px solid;
}

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

❮ Назад Далее ❯


Таблицы W3.

CSS

❮ Назад Следующий ❯

Имя Фамилия Очки
Джилл Смит 50
Ева Джексон 94
Адам		 Джонсон 67
Бо Нильссон 50
Майк Росс 35

Классы таблиц W3.CSS

W3.CSS предоставляет следующие классы для таблиц:

Класс Определяет
w3-таблица Контейнер для таблицы HTML
w3 полосатый Полосатый стол
w3-граница Стол с окантовкой
с рамкой w3 Линии с границами
w3 по центру Содержимое таблицы по центру
w3-hoverable Подвижный стол
w3-таблица-все Набор всех свойств

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

Класс w3-table используется для отображения базовой таблицы:

Имя Фамилия Очки
Джилл Смит 50
Ева Джексон 94
Адам Джонсон 67

Пример



 

 


 
 
 

Имя Фамилия Очки
Джилл Смит 50

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

Полосатая таблица

Класс w3-striped используется для добавления полос в таблицу:

90 006
Имя Фамилия Очки
Джилл Смит 50
Ева Джексон 94
Адам Джонсон 67

Пример


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

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

Класс w3-bordered добавляет нижнюю границу к каждой строке таблицы: 9 0003

Имя Фамилия Очки
Джилл Смит 50
Ева Джексон 94
Адам Джонсон 67

Пример

<стол>

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

Полосатый стол с каймой

Объедините класс w3-striped и класс w3-bordered для создания таблицы с полосатой границей:

Имя Фамилия Очки
Джилл Смит 50
Ева Джексон 94
Адам Джонсон 67

Пример


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

Граница вокруг стола

Класс w3-border используется для отображения границы вокруг таблицы:

Имя Фамилия Очки
Джилл Смит 50
Ева Джексон 94
Адам Джонсон 67

Пример

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

Совет: Класс w3-border предназначен не только для таблиц. Его можно использовать с любым элементом HTML!

Отображение всего

Класс w3-table-all объединяет все классы выше:

Имя Фамилия Очки
Джилл Смит 50
Ева Джексон 94
Адам Джонсон 67

Пример

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

Переворот полос

Чтобы перевернуть полосы (начните со светло-серого цвета), добавьте элемент

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

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

Пример


 
   Имя
Фамилия
   Очки
 

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

Центрирование всего содержимого

Класс w3-centered центры содержание таблицы:

Имя Фамилия Очки
Джилл Смит 50
Ева Джексон 94
Адам Джонсон 67

Пример


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

Центрирование одного столбца

Класс w3-center центрирует содержимое столбца: 900 03

Имя Фамилия Очки
Джилл Смит 50
Ева Джексон 94
Адам Джонсон 67

Пример

<таблица>

  Первый Имя
  Фамилия
Points

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

Выравнивание по правому краю одного столбца

Класс w3-right-align выравнивает по правому краю содержимое столбец:

Имя Фамилия Очки
Джилл Смит 50
Ева Джексон 94
Адам Джонсон 67

Пример



 

 

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

Hoverable Table

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

Имя Фамилия Очки
Имя Фамилия Очки
Джилл Смит 50
Ева Джексон 94
Адам Джонсон 67

Пример

<таблица>

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

Цвета при наведении

Если вам нужен определенный цвет при наведении, добавьте любой из w3-hover- цвет 906 94 классов каждому элементу:

Имя Фамилия Очки
Джилл Смит 50
Ева Джексон 94
Адам Джонсон 67

Пример

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

Объединение классов W3.

CSS

Многие классы W3.CSS можно использовать для всех элементов HTML.

Например: классы границ, классы цветов, классы шрифтов, классы карт и более.

Цветной заголовок таблицы

Используйте любой из w3- color классы для отображения цветной строки:

Имя Фамилия Очки
Джилл Смит 50
Ева Джексон 94
Адам Джонсон 67

Пример


  Имя
  Фамилия Имя
  Points

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

Цветная таблица

Используйте любой из классов w3- color для отображения цветной таблицы: 9000 3

Имя Фамилия Очки
Джилл Смит 50
Ева Джексон 94
Адам Джонсон 67

Пример


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

Адаптивная таблица

Класс w3-responsive создает адаптивную таблицу. Затем таблица будет прокручиваться горизонтально на маленьких экранах. При просмотре на большом экраны, разницы нет.

Измените размер экрана, чтобы увидеть результат в таблице ниже:

Имя Фамилия Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки
Джилл Смит 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000 5000
Ева Джексон 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400 9400
Адам Джонсон 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700 6700

Пример


 
. .. содержимое таблицы …
 

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

Таблица как карточка

Используйте класс w3-card для отображения таблицы в виде карточки:

Имя Фамилия Очки
Джилл Смит 50
Ева Джексон 94
Адам Джонсон 67

Пример


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

Tiny Table

Используйте класс w3-tiny для отображения крошечной таблицы: 9000 3

Имя Фамилия Очки
Джилл Смит 50
Ева Джексон 94
Адам Джонсон 67

Пример


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

Small Table

Используйте класс w3-small для отображения небольшой таблицы: 9000 3

Имя Фамилия Очки
Джилл Смит 50
Ева Джексон 94
Адам Джонсон 67

Пример


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

Большая таблица

Используйте класс w3-large для отображения большой таблицы:

Имя Фамилия Очки
Джилл Смит 50
Ева Джексон 94
Адам Джонсон 67

Пример


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

Таблица XLarge

Используйте класс w3-xlarge для отображения таблицы xlarge: 9 0003

Пример:

Имя Фамилия Очки
Джилл Смит 50
Ева Джексон 94
Адам Джонсон 67
Имя Фамилия Очки
Джилл Смит 50
Ева Джексон 94
Адам Джонсон 67

Пример


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

Таблица XXXLarge

Используйте класс w3-xxxlarge для отображения таблицы xxxlarge:

Имя Фамилия Очки
Джилл Смит 50
Ева Джексон 94
Адам Джонсон 67

Пример

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

Jumbo Table

Используйте класс w3-jumbo для отображения гигантской большой таблицы:

Имя Фамилия
Джилл Смит
Ева Джексон
Адам Джонсон

Пример

<таблица>

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

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


Таблицы CSS Tailwind — бесплатные примеры и руководство

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

Базовый пример

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

# Первый Последний Ручка
1 Марка Отто @mdo
2 Джейкоб Торнтон @толстый
3 Ларри Дикий @twitter
            
      <дел>
        <дел>
          <дел>
            <дел>
              <таблица>
                
                  
                    #
                    Первый
                    Последний
                    Дескриптор
                  
                
                
                  
                    <тд>1
                    Отметить
                    Отто
                    @mdo
                  
                  
                    <тд>2
                    Джейкоб
                    Торнтон
                    @толстый
                  
                  
                    <тд>3
                    Ларри
                    Дикий
                    @твиттер