Using Bootstrap we can easily style tables a basic bootstrap table has a light padding in horizontal
dividers as shown in this example in the HDMI code.
You can see that all we need to do is set the table class to table
in order to apply this style in order for bootstrap to correctly apply formatting to the header of the
table.
We also need to specify the table head and table body using the T head and T body tags.
You'll notice in this example that the headings are slightly more bold than the rest of the content
when applying the T head tag.
Make sure that each column begins with T H only for the contents within the table head is shown here.
So you'll notice that each heading is enclosed in the t h the open and close to types.
Now we can add the table straight to class to set each other wrote to a slightly darker colored
so I'll just save the file and refresh and we can see that each other rows is now light grey so it adds
that distinction between rows
the table bordered class
this adds a borders on all sides of the table and sells
the table cover class
and this creates a mouse over effect on the table rows so you can see it's slight it changes to a light
grey color when you have your mouse over
the table condensed class that will remove some of the padding around the text and so it's a more condensed.
Table
we can add contextual classes to table rows or table columns and we'll just do a quick example.
I'll add a few classes to each row that you will start in the table body instead
so we've added added some of the contextual classes.
Now I'm going to refresh the page and you can see that the first row has the success class.
Second row has the danger class in the third row has the info.
Class.