Table layout has never been an easy task for a developer. In addition to not having the simplest structure of rows and columns, there is also the problem of adapting the tables to different resolutions. And the more information is in the table, the more difficult it is to display on small screens.
Unlike many tags, Bootstrap does not override table styles by default. It is due to the widespread use of this element within other plugins, such as calendars, forms, and boards.
As an example for this lesson, let us make a small table describing the professions on Hexlet.
It is not the most user-friendly table to read. The lack of indentation and cell separation makes it harder to read. Since Bootstrap does not affect the styles of this table, you need to plug them in. We add the .table class to the <table> tag to take advantage of Bootstrap. See at example.
This class alone made the table more accessible. There is now internal cell indentation, and all rows have a separator in the form of a border. When you learn the utilities, you can control the indentation and the form borders. We will come to these utilities in one of the lessons.
If you do not 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 well-described in the documentation. The main ones are also:
.table-darkmakes the table dark and the text white.table-hover— change the background when we move the mouse over it.table-striped— makes the table stripy, so several backgrounds will alternate with each other
If you apply all the classes, you will end up with the following table.
We also added the <caption> tag to create the table title in the example. By default, Bootstrap displays this header below the table in gray font because tables often come after the HTML header, and adding another header is unnecessary.
Adaptability
Adaptability and tables are a layout from the nightmare. Browsers do not 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 tables must be tables in terms of semantics. This way, visually impaired people will interpret your data correctly. If you use blocks instead of a table, screen readers cannot recognize rows and columns correctly.
Bootstrap uses the overflow-x property to adapt tables. You will get horizontal scrolling if the table does not fit within its parent block. It is a rare situation where horizontal scrolling does not hinder but helps the user.
We use the .table-responsive class to create an adaptive table. When set up on a screen resolution, the class will adapt tables when we have got not enough space. In addition, there are Bootstrap prefixes for this class, which we use for adaptivity:
-sm-md-lg-xl
See at example.
Setting up tables with SASS
As with text, we can change many standard table styles in Bootstrap with SASS. We store the settings in the file \_variables.scss. Here are just a few of them:
$table-cell-padding-xand$table-cell-padding-yare for internal cell indents (the default value is.5rem)$table-cell-vertical-alignis an alignment of content within cells (the default value istop)$table-th-font-weight— sets thefont-weightvalue for<th>
These settings help you flexibly adapt Bootstrap to the project without redefining styles using selectors.
Table accessibility
This section is not directly related to Bootstrap, but it is 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.
A scope attribute allows you to associate table headers with rows. The basic version 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 link table headers and their values explicitly:
<table class="table">
<thead>
<tr>
<th>№</th>
<th>Profession name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Front-end programmer</td>
<td>JavaScript is a front-end programming language. Programmers can use it to make sites dynamic and alive. It is the most popular and easiest language for beginners.</td>
</tr>
</tbody>
</table>
When using the scope attribute, we can discard unnecessary columns. They’re not needed when reading the table contents using speech engines.
In the current example, the first column will be the row header when using a screen reader. That is the number 1. Once we are in the column with the job description and enable the Read Cell Name function, we’ll get the response that the item is in the column named Descriptionand the row1`. If the table is small, there’s nothing wrong with that, but imagine the user is in a table with a dozen different headers, subtables, and merged cells.
In this case, reading the row and column headers will not give you complete information about the kind of data in the cell. By setting the scope="row" attribute on a cell within a row, we say we want to use that name as the row header. Let us rework the above example a bit. 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">Front-end Programmer</td>
<td>JavaScript is a front-end programming language. Programmers can use it to make sites dynamic and alive. It is 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 column title is Occupation Name.
Recommended materials
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.
