🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

CSS Table Styling Properties and Techniques Explained

Reading time 6 min
Published Oct 16, 2016
Updated Jan 23, 2020

TL;DR – CSS tables do not refer to the creation of tables, but to the way they are styled using properties.

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.

Country Price Duration
Austria 340$ 1 week
Mexico 1750$ 1 month
Sweden 460$ 1 week
Germany 520$ 2 weeks

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

border

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

Hello I'm a table
and I have a border

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:

Example
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.

Example
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.).

Hello I'm a table
and m borders are spacious

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

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

Example
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.

This is my caption
Hello I'm a table

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:

Example
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.

Hello I'm a table
and some of my cells are empty

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:

Example
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:

My layout
is auto
My layout
is fixed
Example
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.

Firstname Lastname Savings
Josh Jibbrings $35
Nancy Ollion $26
Ben Anderson $28
Tom Rickler $45
  • 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:

Example
table {
    width: 100%;
}

th {
    height: 50px;
}

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

text-align

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

Example
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.
Firstname Lastname Savings
Josh Jibbrings $35
Nancy Ollion $26
Ben Anderson $28
Tom Rickler $45

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.

Firstname Lastname Age
Josh Jibbrings 35
Nancy Ollion 26
Ben Anderson 28
Tom Rickler 45
Example
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.

Firstname Lastname Age
Josh Jibbrings 35
Nancy Ollion 26
Ben Anderson 28
Tom Rickler 45
Example
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.

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

Firstname Lastname Age
Josh Jibbrings 35
Nancy Ollion 26
Ben Anderson 28
Tom Rickler 45

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:

Example
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.

Firstname Lastname Age
Josh Jibbrings 35
Nancy Ollion 26
Ben Anderson 28
Tom Rickler 45

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

Example
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.

Example
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.