CSS Tables

CSS properties can be used to make boring HTML tables look a lot more interesting and pleasing to the eyes. You can style an HTML table using CSS properties and add borders, paddings and backgrounds while also defining border-collapse and add hover effects too. Here is an example of an HTML table styled with CSS.

Name	Author	Price
Harry Potter and the Cursed Child, Parts 1 & 2	J.K. Rowling	$320
When Breath Becomes Air	Paul Kalanithi	$170
The Whistler	John Grisham	$175

Table Borders

You can use CSS property border to add border to an HTML table. You must add border to table as well as td and tr elements though to display table around all cells. If you want a border only outside the table only then add border to the table element only in CSS. You can also use CSS properties like border-top or border-bottom to set borders on specified sides of the table or cell as well.

Name	Author	Price
Harry Potter and the Cursed Child, Parts 1 & 2	J.K. Rowling	$320
When Breath Becomes Air	Paul Kalanithi	$170
The Whistler	John Grisham	$175

table{
  width: 100%;
}
table, th, td{
  border: 1px solid #333;
}

This is how the table will look initially with double borders as each cell elements have separate borders.

Collapse Table Borders

CSS property border-collapse can be used to collapse those borders into one single border around each cell.

table {
  border-collapse: collapse;
}

Table Width and Height

The width and height of a table can be specified using CSS properties width and height. Adding a width in percentage is a good idea that makes the table responsive in all screen sizes but adding a height might need you to add a scrollbar in case the contents are added later. So, it is better not to define the height of a table which will be auto adjusted depending upon the content inside it. Heights can be defined for th and td eleements though.

table {
  width: 100%;
}

Horizontal Alignment

CSS property text-align can be used to align the contents within a table cell to the left, right or center. By default, the contents inside the th element are center aligned while the contents on the td elements are aligned to the left.

th {
  text-align: left;
}

Vertical Alignment

The contents inside a table cell are vertically aligned to the middle by default which can be changed using CSS property vertical-align

td {
  vertical-align: top;
}

Table Padding

You can add CSS property padding on the table cell to set paddings inside a table.

th, td {
  padding: 5px 10px;
}

Hoverable Table

You can also make a table hoverable by adding :hover selector on <tr> element and make it more plaesing to the eyes.

tr:hover{
  background: #e5e5e5;
}

Zebra Striped Tables

You can use nth-of-type() selector with value odd or even to make the table rows zebra striped.

tr:nth-of-type(even){
  background: #ccc;
}

Responsive Table

You can also make a table responsive by adding CSS property overflow-x with the value as auto to make a horizontal scrollbar appear on the screen if the screen size is too small to display full table contents.

table{
  overflow-x: auto;
}

With all these CSS properties added together, you can create a beautiful HTML table.

0 Like 0 Dislike 0 Comment Share Tweet