CSS table – 3 Examples to Style HTML Tables With CSS

How to Style the tables by using CSS?

HTML tables can be styled with the power of CSS. You can use CSS border, padding and other properties to look table more stand out and beautiful.

This tutorial shows how to style HTML tables by CSS properties.

CSS table with border and padding

The example shows how to use table CSS properties to style a table. The table style includes setting the border, heading and table data where borders are given different specifications.

In normal HTML tables, borders are separate or detached. The border-collapse property is used to make it collapse into a single border. Also, the CSS table padding is used for table data (td) as shown below.

Experience this example online

Setting table width and height example

This example sets the height and width of the table with CSS. The table headings <th> and table data <td> height and width specified separately by using table properties in CSS.

CSS table styling

Experience this example online

As you can see, by using CSS, the table width and height are applied.

Using display property to make CSS table hidden and visible with jQuery

The example below shows how to hide table with display: none property value. As you click on the button “Show table”, the table will be shown by using the jQuery. The table is basically hidden at design time by using the display property.

Experience this example online

You can learn more about jQuery show method in its chapter.


Also see: CSS box shadow