Submodule 4.2: Displaying Content - Media - Alerting Users

In this submodule, we will examine tables and Bootstrap classes for styling tables. We will be modifying the aboutus.html page to add a table.

Let us get started by opening aboutus.html page in the code editor. we will add a new row of content after the Corporate Leadership row in the page. We first start by adding a row and columns to the page as follows: 

Adding a row and columns

The above code will create a page displayed as:

Inside the first column of this row, after the <h2> tag, insert the table as follows: 

Table source:

Note the use of table-responsive class to create a responsive table, and the table-hover and thead-dark classes for styling the table.

The above code will create a page displayed as:

To change the default colors for dark  and hover table add this code to the styles.css file:

Table CSS source:

The above code will create a page displayed as: