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

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

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

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

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

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

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

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

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

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

Источник

Чтобы создать эту таблицу 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 вам нужно поместить весь элемент таблицы в элемент

 
   <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>
 

 
   <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>

 
    <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 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>