CSS Table

Tables are typically used to display tabular data, such as financial reports.

But when we create an HTML table without any styles or attributes, browsers display them without any border. With CSS we can easily improve the appearance of our tables.

CSS provides several properties that allow us to control the layout and presentation of the table elements. In the following section we will see how we can create elegant and consistent tables.

Input:-

Output:-

Table Border

This property is the best way to define the borders for the tables. We can set border for the table, th and td tags using the CSS border property.

Input:-

Output:-

Table Border Collapse

By default, browser draws a border around the table, as well as around all the cells, with some space in-between, which results in double border. To get rid of this double border, we can simply collapse the adjoining table cell borders and create clean single line borders.

There are two distinct ways for setting borders on table cells in CSS: separate and collapse.

Input:-

Output:-

In the separate border model, which is the default, each table cell has its own distinct borders, whereas in the collapsed border model, adjacent table cells share a common border.

Note: We can also remove the space between the table cell borders through setting the value of CSS border-spacing property to 0. However, it only removes the space but do not merge the borders like border-collapse to collapse.

Table Padding

By default, the browser creates the table cells just large enough to contain the data in the cells.

To add more space between the table cell contents and the cell borders, we can simply use the CSS padding property.

Input:-

Output:-

We can also adjust the spacing between the borders of the cells using the CSS border-spacing property, if the borders of our table are separated (which is default). The following style rules apply the spacing of 10 pixels between all borders within a table.

Setting Table Width and Height

By default, a table will always maintain as wide and tall enough to contain all of its contents. However, we can also set the width and height of the table as well as its cells explicitly using the width and height CSS property. The style rules in the following example will sets the width of the table to 100%, and the height of the table header cells to 40px

Input:-

Output:-

Controlling the Table Layout

A table default behaviour is to expand and contract to accommodate the data contained inside it. As data fills inside the table, it continues to expand as long as there is space. Sometimes, however, it is necessary to set a fixed width and height for the table in order to manage the layout.

We can do this with the help of CSS table-layout property. This property defines the algorithm to be used to layout the table cells, rows, and columns. This property takes one of two values:

• auto — The width of the table and its cells are adjusted to fit the content. This is the default value and it uses an automatic table layout algorithm.
• fixed — The horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing. It uses the fixed table layout algorithm  and normally faster than auto.

Input:-

Output:-

Table Caption

Table Caption is heading of the table. We can set the vertical position of a table caption using the CSS caption-side property. The default position of the caption is top, we can placed either at the top or bottom of the table.

To change the horizontal alignment of the table's caption text (e.g. left or right), we can simply use the CSS text-align property, like we do with normal text.

Input:-

Output:-

Handling empty cells

In tables that uses separate border model, which is default, we can also control the rendering of the cells that have no visible content using the empty-cells CSS property.

Input:-

Output:-

The default value is show, which renders empty cells like normal cells, but if the value hide is specified no borders or backgrounds are drawn around the empty cells.

Zebra-striped Tables

Known as zebra-striping a table, used to set different background colors for alternate rows is a popular technique to improve the readability of tables that has large amount of data.

We can simply achieve this effect by using the CSS :nth-child() pseudo-class selector.

Input:-

Output:-

Table Responsive

We know, tables are not responsive in nature. However, to support mobile devices we can add responsiveness to our tables by enabling horizontal scrolling on small screens.

To do this simply wrap your table with a <div> element and apply the style overflow-x: auto.

Input:-

Output:-