CSS Tables

CSS tables are often more attractive than plain HTML tables.

A simple HTML table can look beautiful once you apply CSS properties.

Tables design

Let us learn the important ways to style tables using CSS like-

Colors in Table
Table Column width & height
Table borders
Padding in Table
Table Responsive
Align Center in Table
Table Cell spacing
Scroll Table
Collapse Table
Hover Table
Striped Table
Overflow Table
Table Font Size

Table width & height

A simple HTML table consists of Rows & Columns.

Let us change the width & height of the Table by simply using the width & height property of CSS.

Example of Table width & Height

.width-height {
    width:50%;
    height:60%;
  }

Instead of setting the Table width, How to set the Column width, column Height or Row Height?

The Syntax of Column width:
td {
width: value(valid width values);
}

The Syntax of Column height:
td {
height: value(valid height values);
}

The Syntax of Row Height:
tr {
line-height: value(valid height values);
}

Example for Column Width, Column Height and Row Height.

td {
    width:150px;
  }
  
  tr {
    line-height: 40px;
  }

Info/Success Use borders to make the corners of your table as Round.

Table borders

Using, the CSS Borders property, you can set the table border, table head border, table description borders etc.

Example of Table Borders

table, th, td {
    border:2px groove;
  }

Table border radius

Also, if you add a border-radius property, then you can make the corners of the Table borders as rounded.

For Example:
If we just add a value of border-radius like border-radius: 10px, then the table will look like below-

Example of table border radius property

#table-border-radius, th, td {
    border:6px groove;
    border-radius:10px;
    padding:6px;
  }

colors in Table

The color or Background-color property changes the color of the table.

The heading of the table, row or columns can have different colors.

Example of Colors in Table

table, th, td {
  border:2px solid aqua;
}
tr {
  color:yellow;
  background:green;
}
th {
  color:pink;
  background:blue;
}

colors specific rows in the table

The color property can color a particular row of a table. You can also color only odd rows of the table or even rows of a table as well.

Follow @tutorial_brain

Syntax to add a particular color to specific rows in Table:
tr:nth-child(m)
{
background-color: orange;
color:white;
}

This applies the color & background color property to mth row from top(including the head row).

Example of Colors for a specific row in Table

table, tr, td
 {
  border: 2px solid blue;
  border-collapse:collapse;
  width:100%;
  text-align:left;
}

th
 {
  color:pink;
  background:blue;
}

tr:nth-child(4)
 {
  background-color: tomato;
  color:white;
 }

In the same way, we can add a particular color to a particular column itself.

Syntax to add color specific column in Table:
td:nth-child(k)
{
background-color: orange;
color:white;
}

This applies the color & background color property to kth row from top(including the head row).

Some of you might think, how to add colors to only a particular cell?

To achieve this, just select that particular cell using id or class selector and apply the color to that selector only.

Example:

<td id="cell2">

Define the style for “cell2” in the head section.

Table Striped

The odd rows(1, 3, 5 etc) of the table can have a particular color & the even rows(2, 4, 6 etc) can have a particular color.

This is a great way of creating a striped table. This is a way to apply the same color to alternate rows.

To achieve this, we use – nth-child(even/odd) feature.

Syntax of Odd Table Strip:
tr:nth-child(odd) {
background-color: pink;
color:white;
}

This will set all the old rows(including the head row) with background as pink color & font color as white.

Syntax of Even Table Strip:
tr:nth-child(even) {
background-color: yellow;
color: brown;
}

This will set all the even rows(2, 4, 6, 8 etc) with background as yellow color & font color as brown.

Example of add strip on Table

table, th, td {
  border:2px  solid grey;
}
table
 {
  border-collapse:collapse;
  width:100%;
  text-align:left;
 }  
th 
 {
  font-weight: bold;
 }
tr:nth-child(even)
 {
  background-color: lightgray;
 }

Note/Info/Success Instead of using border:2px solid grey;, try using border-bottom:2px solid grey; and see the difference. The table looks even more beautiful.

collapse table border

The CSS Collapse does either of these 2 –

Collapses the borders into a single border.
Keeps all the border as Separate borders with space in between the borders.

The Syntax of Border collapse:
border-collapse: collapse; /*This collapses all the borders into a single border */
border-collapse: separate; /*This Keeps all the borders as separate borders */

Example of the collapse table border

table, th, td
  {
   border:2px solid tomato;
   border-collapse:collapse;
   width:70%;
   text-align:left;
}  
th 
  {
   font-weight: bold;
}

You have seen important ways to use Tables in CSS. Let us see how you can use advanced CSS Tables.

padding in Table

The padding Property sets the space between the borders of the table & the content of the table.

We recommend adding the padding in CSS Tables to make the content look clear in the table.

Example of Padding in Table

table, th, td {
    border: 5px ridge lightgray;
    border-collapse: collapse;
  }
  
 th, td {
    padding: 10px;
	}

Border Image in Table

The border-image property sets images in the form of borders.

For Example:

border-image: url(image_url_file_name.jpg) 30% stretch;

In place of a stretch, you can use other border-image properties like a repeat, round etc.

Example of Border Images in Table

table, th, td  {
  border: 20px solid transparent;
  border-image: url(border_image_property.jpg) 40% round;
  }

Background Images in Table

To set a Background image for the table, we can use Background-image property

The Syntax of setting a Background Image for Table:
background-image: url(image_url_file_name.jpg);

This is the actual image which will be background-image for the table as below-

Example of Background Images in Table

table, th, td {
  border: 20px solid transparent;
  background-image: url(CSS_background_images.jpg);
  }
  
  th, td {
      text-align:center;
  }

Box Shadow of Borders in Table

The Box-shadow property sets the shadow of the border & this is possible in case of tables as well.

For Example:

box-shadow: 15px 10px 12px 20px orange;
Here, x-offset is 15px, y-offset is 10px, blur-radius is 12px, spread-radius is 20px & color is orange.

Note:
If you do not know about Box-shadow, do not worry at this point of time.

Once you proceed further and go to CSS BOX Shadow Page, you will eventually master it.

In the above example, if you add a box-shadow property –

 table, th, td {
  border: 20px solid transparent;
  background-image: url(CSS_background_images.jpg);
  box-shadow: 15px 10px 15px 20px orange;
  }

Then, the table will look like below –

Example of Border Box Shadow in Table

.table-border3, .th-padding3, .td-padding3
  {
    border: 20px solid transparent;
    box-shadow: 15px 10px 15px 20px orange;
    background-image: url(img/CSS_background_images.jpg);
  }

Table hover

The pseudo Class Selector :hover highlights Table Rows, Table Head or a particular Cell.

Although, TutorialBrain recommends to set Table hover for Rows unless it is really required to set Table hover for Head or Cell.

Syntax of Table ROW Hover:

tr:hover {
property1:value1;
property2:value2;
….
…
}

Syntax of Table Head Hover:

th:hover {
property1:value1;
property2:value2;
….
…
}

Syntax of Table Cell Hover:

td:hover {
property1:value1;
property2:value2;
….
…
}

Ideally, we should apply the hover effect to the Table Rows(tr) but not on the Table Headings(th). For this, you can use Selectors.

Example –

tbody tr:hover {
  background-color: #dfd9d9;
  color: red;
}

Employee-Name	Employee-Id	Employee-Designation
Victor	98765	Chief Executive Officer
William	87654	Chief Financial Officer
Jack	76543	Senior Vice President - Sales

Example of Table Hover

table, th, td {
    border: 20px solid black;
    border-collapse: collapse;
  }
  
  tr:hover {
    background-color: #dfd9d9;
    color: red;
  }

Info/Success If you are using a class Name for your table(say "class123") & you want to define the tr:hover in the external file, then you can define as below:
.class123 tr:hover { background-color: blue; };

Horizontal & Vertical Alignment

To align the content in the table, you can use CSS Align property.

Syntax to align the content in Table:
text-align: left; /* Align to the Left of the cell */
text-align: right; /* Align to the Right of the cell */
text-align: center; /* Align to the center of the cell */
text-align: justify; /* To justify the content */

Syntax of vertical align to the bottom of the Table:
vertical-align: bottom; /* Align to the bottom of the cell */

Example of Horizontal and Vertical Alignment in Table

table, th, td {
    border: 20px solid green;
    border-collapse: collapse;
    width: 100%;
    padding: 5px;
  }  
  th, td {
    text-align: left;
    vertical-align: bottom;

  }

Follow @tutorial_brain

Empty Cell Table

By default, CSS Tables will show the empty cells as well. This means empty cells(cell without any content) will also show up in tables.

To hide the empty cells, you should use the empty-cells: hide a property of CSS.

Syntax of empty cells property in Table:
empty-cells: hide; /* To hide the empty cell */
empty-cells: show; /* To show the empty cell */

Example of CSS Empty Cell in Table

table, th, td {
    border: 5px solid black;
    width: 100%;
    padding: 5px;
    empty-cells: hide;
  }

captions for Table

The caption-side property sets the caption for the table. It is like the name of the Table.

Captions are mostly set either at the bottom of the Table or at the Top of the Table.

Syntax to set captions in Table:
caption-side: bottom; /* To set the caption at the bottom of the table */
caption-side: top; /* To set the caption at the top of the table – This is default */
caption-side: inherit; /* To acquire the caption property from the parent */

Example of captions for Table

.caption-bottom, .th-caption-bottom, .td-caption-bottom {
  border: 5px solid black;
  width: 100%;
  padding: 5px;
  caption-side:bottom;
} 

.caption-top, .th-caption-top, .td-caption-top {
  border: 5px solid black;
  width: 100%;
  padding: 5px;
  caption-side:top;
}

Responsive Tables

There are multiple ways to make the CSS Table as Responsive. you should choose the best way which solves your purpose. The common ways of achieving this are –

CSS Media Queries – This will be more clear once you learn the CSS Media Queries.
display: block instead of display: table.
overflow: auto to add vertical scrollbar in case of an overflow.
overflow-x: auto to add horizontal scrollbar in case of an overflow.
CSS Flexbox – Learn Flexbox first to understand this

So, there is no best rule to achieve this. Here, we will learn how to add horizontal or vertical scroll to make the table as responsive.

Also, it is better to set Responsive font-size for the table using text unit as ‘vw’ which stands for ‘viewport width‘ & it is the width of the browser.

1 vw = 1% of width of the viewport.

To add a scrollbar to the Table:
Overflow: auto;
Overflow-x: auto;

Example of Responsive Table using Overflow

table, th, td {
    border: 20px solid black;
    border-collapse: collapse;
    width:100%;
    padding:5px;
  }  
  .overflow-auto {
    overflow:auto;
  }