Tables — Bootstrap 5: Layout basics

Table layout has never been an easy task for a developer. In addition to not having the simplest structure of rows and columns, there’s also the problem of adapting the tables to different screen resolutions. And the more information there is in the table, the more difficult it is to display it on small resolutions.

Unlike many tags, Bootstrap doesn’t override table styles by default. This is due to the widespread use of this element within other plugins, such as calendars, forms, boards.

As an example for this lesson, let’s make a small table describing the professions on Hexlet.

It’s not the most user-friendly table to read. The lack of indentation and cell separation make it harder to read. Since Bootstrap has no effect on the styles of this table, you need to plug them in. To take advantage of Bootstrap, you need to add the .table class to the <table> tag.

This class alone made the table more accessible. There’s now internal cell indentation, and all rows have a separator in the form of a border. When you learn the utilities, you will be able to control the indentation and borders of the form yourself. We’ll come to these utilities in one of the next lessons.

If you don’t need borders inside the table, you can add a .table-borderless, class that removes all borders while leaving internal indents inside the cells. Most classes are intuitive and can be found in the documentation. The main classes are also:

.table-dark — makes the table dark. The text will become white.
.table-hover — change the background when the mouse is moved over it.
.table-striped — makes the table stripy. Several backgrounds will alternate with each other.

If you apply all the classes, you’ll end up with the following table:

In the example, the <caption>, tag was also added to create the table title. By default in Bootstrap, this header is displayed below the table in gray font. The reason for this is that tables often come after the HTML header, and adding another header is unnecessary.

Adaptability

Adaptability and tables are a layout designer’s nightmare. Browsers don’t have built-in tools to create adaptive tables. For this reason, developers use either third-party plugins or abandon tables completely. The second option is not good practice because in terms of semantics, tables must be tables. This will allow your data to be interpreted correctly for people with visual impairments. If you use blocks instead of a table, screen readers won’t be able to recognize rows and columns correctly.

Bootstrap uses the overflow-x property to adapt tables. If the table doesn’t fit within its parent block, you’ll get horizontal scrolling. This is a rare situation where horizontal scrolling doesn’t hinder, but rather helps the user.

The .table-responsive class is used to create an adaptive table. When set up on any screen resolution, the class will adapt tables when there isn’t enough space. In addition, there are Bootstrap prefixes for this class, which are used for adaptivity:

-sm
-md
-lg
-xl

Setting up tables with SASS

As with text, many of the standard table styles in Bootstrap can be changed with SASS. The settings are stored in the file \_variables.scss. Here are just a few of them:

$table-cell-padding-x and $table-cell-padding-y are for internal cell indents. The default value is .5rem
$table-cell-vertical-align — alignment of content within cells. The default value is top
$table-th-font-weight — sets the font-weight value for <th>

These, as well other settings, help you to flexibly adapt Bootstrap to the project without having to redefine styles using selectors.

Table accessibility

This section isn’t directly related to Bootstrap, but it’s useful to know about this technique if you want to adapt your site for the visually impaired. The WCAG specification, which describes HTML capabilities for accessibility, mentions working with tables.

There is a special attribute, scope, which allows you to directly associate table headers with rows. In the basic version of the attribute takes one of two values: col and row. The value col specifies the table headers, and row specifies the row header.

Screen readers will then be able to explicitly link table headers and their value.

<table class="table">
  <thead>
    <tr>
      <th>№</th>
      <th>Profession name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Frontend programmer</td>
      <td>JavaScript is a programming language for frontend development. Programmers can use it to make sites dynamic and alive. It's the most popular and easiest language for beginners.</td>
    </tr>
  </tbody>
</table>

When using the scope attribute, it is possible to throw out unnecessary columns. They’re not needed when reading the table’s content using speech engines. In the current example, when using a screen reader, the first column will be the row header. I.e., the number 1. Once we are in the column with the occupation description and enable the read cell name function, we’ll get the answer that the item is located in the column named “Description” and the row named “1”. If the table is small, then there’s nothing wrong with this, but imagine if the user was in a table with a dozen different headers, sub-tables, and merged cells.

In this case, reading out the header of the row and column won’t give full information about what kind of data is in the cell. By setting the attribute scope="row" for a cell within a row, we’re saying we want to use that name as the row header. Reworking the above example a little, the result is as follows:

<table class="table">
  <thead>
    <tr>
      <th scope="col">№</th>
      <th scope="col">Name of profession</th>
      <th scope="col">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td scope="row">Frontend Programmer</td>
      <td>JavaScript is a programming language for frontend development. Programmers can use it to make sites dynamic and alive. It's the most popular and easiest language for beginners.</td>
    </tr>
  </tbody>
</table>

Now, when reading a cell with a profession description, the screen reader will indicate that the row header is “Frontend Programmer”, and the title of the column is “Occupation Name”

Recommended materials

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

Article “How to Learn and Cope with Negative Thoughts“
Article “Learning Traps“
Article “Complex and simple programming tasks“

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access

130

courses

1000

exercises

2000+

hours of theory

3200

tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

130 courses, 2000+ hours of theory
1000 practical tasks in a browser
360 000 students

Our graduates work in companies:

Suggested learning programs

Profession

Under development beginner

Layout Designer

Layout with the latest CSS standards

start anytime 5 months

Use Hexlet to the fullest extent!

Ask questions about the lesson
Test your knowledge in quizzes
Practice in your browser
Track your progress

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.