CSS Table Styling Properties and Techniques Explained

CSS Table: Main Tips

• Adding a regular HTML table to web sites is no longer user-friendly. It is crucial to style tables to separate content clearly and make it more easy-to-follow.
• With CSS, tables can have custom margins, spacing, padding, alignment, backgrounds, etc.

Styling Tables With CSS

Before starting to apply CSS properties, take a look at an example of a traditional HTML table.

Tip: a well-constructed table is easy to style.

border

HTML table borders separate sections. CSS border shorthand property sets borders in one declaration.

Note: CSS table border works only when it has the border-style property (solid, dotted, dashed, double, etc.)

The example below specifies the border width, color, and style for <table>, <th>, and <td> elements. Notice the effect of double borders:

table, th, td {
    border: 1px black solid;
}

Note: the default HTML table border style with the border-collapse property means that borders have spacing between them.

border-collapse

You can remove the double border effect with the border-collapse property of CSS. Table borders will then collapse into one and prevent gaps.

table, th, td {
   border: 1px black solid;
}

table {
   border-collapse: collapse;
}

border-spacing

The border-spacing property sets the spacing between cells in a table. Its values determine horizontal and vertical spacing and use length indicators (px, cm, pt, etc.).

Note: the border-spacing property works only when border-collapse is separate.

In the example below, we use border-spacing on uncollapsed table borders:

table {
   border-spacing: 20px 40px;
   border-collapse: separate;
}

The border-spacing property accepts either one or two values:

• One value indicates both the vertical and horizontal spacing of table borders in HTML.
• Two values: the first value sets the horizontal spacing, while the second sets the vertical.

caption-side

The caption-side sets the position of the table <caption>. You can use top and bottom keywords to indicate the position.

Remember: the caption must be the first child of the <table> element.

In the example, we position our caption at the bottom of the table:

caption {
   caption-side: bottom;
}

Note: do not use the deprecated align attribute to indicate the position. Use the caption-side instead.

empty-cells

The empty-cells property indicates whether cells without any content should have borders and backgrounds.

Here are the main points:

• The empty-cells property can have show and hide values. When set to hide, borders and backgrounds of empty cells will not be shown.
• empty-cells works only if the border-collapse is separate.

The following example uses hide on empty cells:

table {
   empty-cells: hide;
   border-collapse: separate;
}

table-layout

The table-layout specifies the algorithm applied to organize cells, rows, and columns of tables. It can have two values:

• auto calculates the width of tables and cells according to the content inside.
• fixed sets that the width of table and columns depend on the <table> and <col> elements. The width can also depend on the first row of cells.

In the example, you see the differences between the two table-layout values:

table.auto {
   table-layout: auto;
}

table.fixed {
   table-layout: fixed;
}

width and height

To determine dimensions of the CSS table, we need two styling properties: width and height.

• The width property describes how much the table should stretch horizontally.
• The height property determines the vertical parameters.
• We can set these values using length indicators (pt, px, cm, etc.) or percentages (%).

The following example sets the width for the table, and height for the <th> element:

table {
    width: 100%;
}

th {
    height: 50px;
}

text-align

The text-align property determines the horizontal alignment of a table.

th {
    text-align: left;
}

The property can have the following values:

• left, center, right: supported by all browsers except Internet Explorer and Microsoft Edge.
• start and end: supported by all browsers except Internet Explorer and Microsoft Edge.
• match-parent: does not work in Microsoft Edge, Internet Explorer, and Safari.
• justify-all: does not work in any browser.
• string for a character-based alignment: does not work in any browser.

Note: by default, content of <th> is align in the center, and <td> on the left.

vertical-align

The vertical-align property sets the vertical alignment of inline content and cells. The most common values are top, middle, bottom. Same as with text-align we can choose the vertical alignment of header and table data separately.

td {
    height: 50px;
    vertical-align: bottom;
}

Note: by default, both the header and data have the middle vertical alignment.

padding

The padding property manipulates space between the content of tables and borders.

The property accepts length indicators (pt, px, cm, etc.), or percentages (%) as values.

th, td {
    padding: 15px;
    text-align: left;
}

Note: set HTML table padding to make sure that information looks neat and clear enough to read.

More Advanced Table Styles

Horizontal Borders

You can set CSS table borders as horizontal dividers of rows. To achieve this effect, we need the border-bottom property.

We define border-bottom values that indicate its width, style, and color in one declaration.

th, td {
    border-bottom: 2px solid black;
    text-align: left;
}

Mouse Over

The :hover selector makes tables more interactive. When users hover their mouse cursors over a column or row, the tables change one or multiple of its styling properties.

For instance, you can modify the HTML table background color every time users hover over the rows:

tr:hover {background-color:#b495c9;}

Colors

You set HTML table background colors to make the content more engaging and noticeable. Using color and background-color properties, we can assign exciting colors to the content of our table and its background.

You can style HTML table elements with background colors separately. <header> can have one color, while other elements have another.

th {
    background-color: #8842d5;
    color: white;
}
tr {
    background-color: #f2f2f2;
}

Note: you can indicate colors using color names, RGB, or HEX indicators.

Zebra-Striped Design

To make two background colors interchange every two lines, we use nth-child() selector.

Paired with background-color property, it helps us achieve the zebra effect.

To determine the background color, we use the same indicators as before.

tr:nth-child(even) {
    background-color: #f2f2f2;
}

CSS Table: Useful Tips

• Tables are great for tabular data. However, do not use them for layout.
• Bootstrap provides many options for styling CSS tables.