Submodule 4.2: Displaying Content - Media - Alerting Users
Tables
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:
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:
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:
The above code will create a page displayed as:
