Bootstrap Tables

Before the advent of div tags, tables were the most commonly used elements for structuring your webpage. Now, when divs have been long in use, tables are not considered that much important. However, there still are many uses of tables, particularly when you want to style content in tabular form. Bootstrap tables come with a built-in style and format which can easily be tweaked via bootstrap classes. Let’s have a look at a very simple example of bootstrap tables.

If you open the above page in browser you should see that alternate rows have a light blue background. It is important to note here that when you apply additional styles to table you must also add the “table” class as well. For instance in the above code, two classes i.e. “table table-stripped” are styling the table. If you leave the “table” class here, you will see that default table properties are removed.

Table border and Table Hover

By default, table rows are separated via horizontal lines. There is no vertical border among columns. You can add border around the table and each and every cell using the “table-bordered” class. Similarly, you can also add hover affect on table rows which highlight the row when you hover the mouse over it. take a look at the following example.