Пошаговое руководство по элементу таблицы CSS Bootstrap

Последнее обновление Июл 12, 2021

Содержание

CSS-таблица начальной загрузки

Примеры CSS для таблиц начальной загрузки

Адаптивная таблица начальной загрузки

Темный стол Bootstrap

Стол Bootstrap с цветной головкой

Стол Bootstrap с полосатыми рядами

Таблица начальной загрузки с Hoverable Rows

Таблица начальной загрузки с цветными строками

Таблица начальной загрузки с границами

Добавление таблиц на ваш Bootstrap-сайт

То, как вы организовываете контент на своем веб-сайте, очень важно.

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

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

В блогах HubSpot вы иногда можете увидеть таблицы, в которых суммируются основные выводы из сообщений блога. Посмотрите, например, таблицу в конце этого сообщения Wix vs. WordPress.

Хотя эта таблица была построена в HubSpot CMS, вы также можете создавать таблицы с помощью HTML и CSS.

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

CSS-таблица начальной загрузки

Создать таблицу в Bootstrap очень просто. Просто добавьте класс .table к любому элементу

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

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

Источник

Чтобы создать эту таблицу Bootstrap, вы должны использовать следующий HTML:

 
   <table class="table">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Name</th>
      <th scope="col">Symbol</th>
      <th scope="col">Atomic Weight</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Hydrogen</td>
      <td>H</td>
      <td>1.008</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Helium</td>
      <td>He</td>
      <td>4.003</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Lithium</td>
      <td>Li</td>
      <td>6.941</td>
    </tr>
  </tbody>
</table>

Обратите внимание, что этот фрагмент можно разделить на две основные части: разделы

и (то есть разделы заголовка и тела таблицы). Четыре столбца определены в разделе , а три строки – в разделе . Затем каждый из этих разделов помещается в родительский элемент

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

Примеры CSS для таблиц начальной загрузки

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

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

Адаптивная таблица начальной загрузки

Ориентация на мобильные устройства в Bootstrap – одна из наиболее веских причин использовать эту структуру для создания своего сайта, а не создавать его с нуля. Это значительно упрощает процесс создания адаптивных элементов, включая таблицы.

Чтобы создать таблицы, которые реагируют на все окна просмотра (то есть их можно легко прокручивать по горизонтали), вам просто нужно обернуть класс .table классом .table-responsive. Это означает, что вместо добавления «table-responsive» после класса .table вам нужно поместить весь элемент таблицы в элемент

, который модифицирован классом .table-responsive. Смотрите эффект ниже.

Источник

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

 
   <div class="table-responsive">
  <table class="table">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Name</th>
      <th scope="col">Symbol</th>
      <th scope="col">Atomic Weight</th>
      <th scope="col">-</th>
      <th scope="col">-</th>
      <th scope="col">-</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Hydrogen</td>
      <td>H</td>
      <td>1.008</td>
      <td>N/A</td>
      <td>N/A</td>
      <td>N/A</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Helium</td>
      <td>He</td>
      <td>4.003</td>
      <td>N/A</td>
      <td>N/A</td>
      <td>N/A</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Lithium</td>
      <td>Li</td>
      <td>6.941</td>
      <td>N/A</td>
      <td>N/A</td>
      <td>N/A</td>
    </tr>
  </tbody>
</table>
</div>

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

Например, если вы хотите, чтобы ваша таблица прокручивалась по горизонтали до 576 пикселей, вы должны использовать класс-модификатор .table-responsive-sm. 768px, 992px и 1120px – соответствующие контрольные точки максимальной ширины для .table-responseive {-md | -lg | -xl}.

Темный стол Bootstrap

Цвет по умолчанию для класса таблицы Bootstrap может не соответствовать вашей торговой марке или цветовой схеме. В этом случае вы можете использовать класс модификатора .table-dark, чтобы инвертировать цвета, чтобы цвет фона был темным, а текст – светлым. Это будет выглядеть примерно так:

Источник

Чтобы создать эту таблицу, просто добавьте «table-dark» после класса .table. Вы можете увидеть это добавление в первой строке кода, которое является единственной разницей между этой разметкой и базовой разметкой таблицы.

 
   <table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Name</th>
      <th scope="col">Symbol</th>
      <th scope="col">Atomic Weight</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Hydrogen</td>
      <td>H</td>
      <td>1.008</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Helium</td>
      <td>He</td>
      <td>4.003</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Lithium</td>
      <td>Li</td>
      <td>6.941</td>
    </tr>
  </tbody>
</table>

Стол Bootstrap с цветной головкой

Если вы хотите изменить цвет только заголовка таблицы и оставить тело как есть, вы можете использовать классы модификаторов .thead-dark или .thead-light. .Thead-dark сделает его темно-серым (как показано в примере ниже), а .thead-light сделает его светло-серым.

Источник

Тогда как в предыдущем примере вы применили класс-модификатор к элементу

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

 
    <table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Name</th>
      <th scope="col">Symbol</th>
      <th scope="col">Atomic Weight</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Hydrogen</td>
      <td>H</td>
      <td>1.008</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Helium</td>
      <td>He</td>
      <td>4.003</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Lithium</td>
      <td>Li</td>
      <td>6.941</td>
    </tr>
  </tbody>
</table>

Стол Bootstrap с полосатыми рядами

Допустим, вы хотите изменить стиль раздела тела таблицы, а не раздела заголовка. Используя класс-модификатор .table-striped, вы можете добавить цвет ко всем остальным строкам в разделе

. Это даст эффект «полосатой зебры», как показано ниже.

Источник

Чтобы создать эту таблицу, просто добавьте «table-striped» после класса .table. Это практически тот же процесс, что и для создания темной таблицы. Вот код:

 
    <table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Name</th>
      <th scope="col">Symbol</th>
      <th scope="col">Atomic Weight</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Hydrogen</td>
      <td>H</td>
      <td>1.008</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Helium</td>
      <td>He</td>
      <td>4.003</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Lithium</td>
      <td>Li</td>
      <td>6.941</td>
    </tr>
  </tbody>
</table>

Таблица начальной загрузки с Hoverable Rows

Теперь предположим, что вы хотите, чтобы стиль строк изменялся только тогда, когда посетитель наводит на них курсор. Используя класс-модификатор .table-hover, вы можете включить состояние наведения курсора на строки таблицы в разделе

. Вы можете увидеть эффект в демонстрации ниже.

Источник

Чтобы создать эту таблицу, просто добавьте «table-hover» после класса .table. Это практически тот же процесс, что и для создания темной или полосатой таблицы. Вот код:

 
    <table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Name</th>
      <th scope="col">Symbol</th>
      <th scope="col">Atomic Weight</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Hydrogen</td>
      <td>H</td>
      <td>1.008</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Helium</td>
      <td>He</td>
      <td>4.003</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Lithium</td>
      <td>Li</td>
      <td>6.941</td>
    </tr>
  </tbody>
</table>

Таблица начальной загрузки с цветными строками

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

(строкам) или

(отдельным ячейкам): Стол первичный Стол вторичный Стол-успех Таблица опасностей Таблица-предупреждение Таблица-информация Настольная лампа Стол-темный Я могу применить любой из вышеперечисленных классов к разным строкам, чтобы моя таблица выглядела примерно так: Источник Вот код для создания этой разноцветной таблицы. <table class="table"> <thead> <tr> <th scope="col">No.</th> <th scope="col">Name</th> <th scope="col">Symbol</th> <th scope="col">Atomic Weight</th> </tr> </thead> <tbody> <tr class="table-primary"> <th scope="row">1</th> <td>Hydrogen</td> <td>H</td> <td>1.008</td> </tr> <tr class="table-danger"> <th scope="row">2</th> <td>Helium</td> <td>He</td> <td>4.003</td> </tr> <tr class="table-success"> <th scope="row">3</th> <td>Lithium</td> <td>Li</td> <td>6.941</td> </tr> </tbody> </table> Таблица начальной загрузки с границами Если вы хотите иметь границы со всех сторон таблицы, а не только горизонтальные разделители, вы можете использовать класс модификаторов .table-bordered. Источник Чтобы создать эту таблицу, просто добавьте «table-Bordered» после класса .table. Это практически тот же процесс, что и для создания темной таблицы, полосатой таблицы или таблицы с перемещаемыми строками. Вот код: <table class="table table-bordered"> <thead> <tr> <th scope="col">No.</th> <th scope="col">Name</th> <th scope="col">Symbol</th> <th scope="col">Atomic Weight</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Hydrogen</td> <td>H</td> <td>1.008</td> </tr> <tr> <th scope="row">2</th> <td>Helium</td> <td>He</td> <td>4.003</td> </tr> <tr> <th scope="row">3</th> <td>Lithium</td> <td>Li</td> <td>6.941</td> </tr> </tbody> </table> Если вы хотите удалить все границы, вы можете использовать класс модификаторов .table-borderless. Добавление таблиц на ваш Bootstrap-сайт Таблицы могут помочь организовать большие объемы данных на вашем сайте таким образом, чтобы их было легко читать и усваивать посетителям. Любой из примеров таблиц, описанных выше, можно добавить и настроить для вашего уникального сайта Bootstrap. Для начала вам просто понадобится некоторое знакомство с HTML и CSS. Источник записи: https://blog.hubspot.com

(отдельным ячейкам):

Стол первичный
Стол вторичный
Стол-успех
Таблица опасностей
Таблица-предупреждение
Таблица-информация
Настольная лампа
Стол-темный

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

Источник

Вот код для создания этой разноцветной таблицы.

 
    <table class="table">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Name</th>
      <th scope="col">Symbol</th>
      <th scope="col">Atomic Weight</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-primary">
      <th scope="row">1</th>
      <td>Hydrogen</td>
      <td>H</td>
      <td>1.008</td>
    </tr>
    <tr class="table-danger">
      <th scope="row">2</th>
      <td>Helium</td>
      <td>He</td>
      <td>4.003</td>
    </tr>
    <tr class="table-success">
      <th scope="row">3</th>
      <td>Lithium</td>
      <td>Li</td>
      <td>6.941</td>
    </tr>
  </tbody>
</table>

Таблица начальной загрузки с границами

Если вы хотите иметь границы со всех сторон таблицы, а не только горизонтальные разделители, вы можете использовать класс модификаторов .table-bordered.

Источник

Чтобы создать эту таблицу, просто добавьте «table-Bordered» после класса .table. Это практически тот же процесс, что и для создания темной таблицы, полосатой таблицы или таблицы с перемещаемыми строками. Вот код:

 
    <table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Name</th>
      <th scope="col">Symbol</th>
      <th scope="col">Atomic Weight</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Hydrogen</td>
      <td>H</td>
      <td>1.008</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Helium</td>
      <td>He</td>
      <td>4.003</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Lithium</td>
      <td>Li</td>
      <td>6.941</td>
    </tr>
  </tbody>
</table>

Если вы хотите удалить все границы, вы можете использовать класс модификаторов .table-borderless.

Добавление таблиц на ваш Bootstrap-сайт

Таблицы могут помочь организовать большие объемы данных на вашем сайте таким образом, чтобы их было легко читать и усваивать посетителям. Любой из примеров таблиц, описанных выше, можно добавить и настроить для вашего уникального сайта Bootstrap. Для начала вам просто понадобится некоторое знакомство с HTML и CSS.

Источник записи: https://blog.hubspot.com