Using CSS to Style Tables
Up to this point, as we haven’t applied any CSS styling to our tables, our example tables have not been too pleasing to the eye. CSS offers us several properties to customize how our tables appear on the page:
We’re already familiar with the color and text-align properties, but let’s see examples of the other styles in action.
Setting Table Width
We can set the overall width of a table by applying a class to the <table> element:
The width of the columns is automatically established by the browser to accommodate the cell contents, but we don’t have to accept this format.
Setting Column Width in Pixels
Setting Column Width in Percent
The border-collapse Property
Using CSS Border Shorthand
Adding Cell Padding
By setting the padding property, we can make sure there is at least that much white space around our cell contents. This keeps the actual cell contents from displaying too closely to the borders:
Different border and padding settings can be set for the top, bottom, left, and right sides of elements.