Bootstrap 5 Table: Create Responsive and Stylish Tables

Bootstrap 5 предлагает обновленный компонент "Table" для создания таблиц на веб-странице. Он предоставляет мощные инструменты для создания гибких и отзывчивых таблиц с минимальным количеством кода.

Пример кода для создания простой таблицы с использованием Bootstrap 5:

  

    

      
#
      
First Name
      
Last Name
      
Email
    
  
  

    

      
1
      
John
      
Doe
      
john@example.com
    
    

      
2
      
Jane
      
Smith
      
jane@example.com
    
    

      
3
      
Mark
      
Johnson
      
mark@example.com
    
  

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

Также Bootstrap 5 предоставляет возможность добавлять дополнительные классы к таблицам для изменения их внешнего вида и функциональности. Например, классы "table-striped" добавляют полосы разных цветов к каждой строке таблицы:

  ...

Другие классы, такие как "table-bordered", "table-hover", "table-responsive", "table-dark" и другие, также могут использоваться для настройки таблиц в Bootstrap 5.

Таким образом, с помощью Bootstrap 5 вы можете легко создавать стильные и адаптивные таблицы на веб-странице с минимальными усилиями.