html

How to style Tables using CSS

Cascading Style Sheets (CSS) are majorly utilized in combination with HTML to style elements such as tables, text, buttons, and images. More specifically, a typical HTML table is not user-friendly and easily understandable; therefore, you should create the required table using CSS in order to enhance its appearance.

This blog will demonstrate the procedure of styling tables using CSS. So, let’s get started!

What are tables in HTML

Tables are considered an essential component of an HTML document. It can be created using the “<table>” tag and the sub-table tags “<tr>” for rows, “<td>” for columns, and “<th>” for table headers. All of the mentioned tags are the basic tables tag; however, CSS style properties can be used for styling tables.

Some important and basic CSS properties are given below that assist in changing table style:

  • Add borders
  • Adjust borders
  • Collapse borders
  • Adjust width and height of the table
  • Align vertical text
  • Align horizontal text
  • Add padding
  • Define cell colors

We will now discuss all of the above-given CSS properties to style HTML tables with suitable examples.

Style Tables using CSS border property

CSS offers a “border” property that is used to add borders in a table. To add a border, you can adopt the following example.

Example
The below-given example will display a solid “black” border with “1px” width for whole table “table”, headers “th”, and columns “td”:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>Teacher</th>
    <th>Student</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Mark</td>
  </tr>
  <tr>
    <td>Luice</td>
    <td>Griffin</td>
  </tr>
</table>
</body>
</html>

Output

Style Table border using CSS width property

In the previous example, you have seen the method to insert a border around a table in CSS. The given “border” property does not specify the width, as you might want to adjust it according to your requirements. To do so, check out the provided example.

Example
In this example, we will create an HTML Table and style it in a way that it will span the entire scan with full width “100%”:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}

table {
  width: 100%;
}
</style>
</head>
<body>
<h2>Full-width of Table</h2>
<table>
 <tr>
    <th>Teacher</th>
    <th>Student</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Mark</td>
  </tr>
  <tr>
    <td>Luice</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>

Output

Style Tables using CSS border-collapse property

As you can see, the table created in the above-given example has a separate border for each row and column that might not give a decent look on a website. However, CSS permits you to collapse the borders into a single border using the “border-collapse” property.

Example
Now, we will utilize the “border-collapse” property to style the created table with one single border for both rows and columns:

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}
table {
  width: 100%;
  border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Table Borders collapse</h2>
<table>
 <tr>
    <th>Teacher</th>
    <th>Student</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Mark</td>
  </tr>
  <tr>
    <td>Luice</td>
    <td>Griffin</td>
  </tr>
</table>
</body>
</html>

Output

Style Table using CSS width and height properties

In CSS, the “width” and “height” properties are primarily utilized for change the table matrices. For instance, in the following example, we will set the table width as “90%” and the height of the table header cell as “90px”:

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid blue;
}

table {
  width: 90%;
  border-collapse: collapse;
}

th {
  height: 90px;
}
</style>
</head>
<body>
<h2>Styling tables using CSS</h2>
<p>Example for setting height and width:</p>
<table>
   <tr>
    <th>Teacher</th>
    <th>Student</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Mark</td>
  </tr>
  <tr>
    <td>Luice</td>
    <td>Griffin</td>
  </tr>
</table>
</body>
</html>

Output

Style Table cells alignment using CSS vertical-align property

CSS “vertical-align” property is utilized for aligning the text in the table cell from the top, bottom, or middle, but you have to select whether to align the row or the columns vertically. Let’s check the provided example:

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid blue;
}

table {
 
  width: 90%;
  border-collapse: collapse;
}

th {
  height: 90px;
}
 
td {
  vertical-align: bottom;
  height: 50px;
}
</style>
</head>
<body>
<h2>Styling Tables in HTML</h2>
<p> Example of setting vertical alignment</p>
<table>
   <tr>
    <th>Teacher</th>
    <th>Student</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Mark</td>
  </tr>
  <tr>
    <td>Luice</td>
    <td>Griffin</td>
  </tr>
</table>
</body>
</html>

The above example will vertically align the table cell text to the bottom:

Style Table cells alignment using CSS horizontal-align property

CSS offers “horizontal-align” property for the purpose of aligning the text horizontally. This property can help to align the text to the left, right, or center:

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid blue;
}

table {
 
  width: 90%;
  border-collapse: collapse;
}

th {
  height: 90px;
}
 
td {
  text-align: center
  height: 50px;
}
</style>
</head>
<body>
<h2>Styling Tables in HTML</h2>
<p>Example of setting horizontal alignment</p>
<table>
   <tr>
    <th>Teacher</th>
    <th>Student</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Mark</td>
  </tr>
  <tr>
    <td>Luice</td>
    <td>Griffin</td>
  </tr>
</table>
</body>
</html>

The above-given example will align the text added in the table cell with respect to bottom:

Style Tables using CSS padding property

The “padding” CSS property is utilized for controlling the spaces between text cells and border. It is mainly used for the <td> and <th> elements.

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid blue;
}

table {
 
  width: 90%;
  border-collapse: collapse;
}

th, td {
  height: 90px;
  text-align: center
  padding: 20px;
}
</style>
</head>
<body>
<h2>Styling Tables in HTML</h2>
<p>Example of using padding property</p>
<table>
   <tr>
    <th>Teacher</th>
    <th>Student</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Mark</td>
  </tr>
  <tr>
    <td>Luice</td>
    <td>Griffin</td>
  </tr>
</table>
</body>
</html>

The below-given images signifies that we have successfully adding “20px” padding in between the border and the cell text:

Style Tables using CSS background-color property

CSS permits you to define colors separately for each table each column, row or cell. For instance, the following table will contain the background of the table header “th” as “orangecolor and all “nth-child(even)” even number of rows “tr” will have “grey” background color:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

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

tr:nth-child(even){background-color:grey}

th {
  background-color: orange;
  color: white;
}
</style>
</head>
<body>

<h2>Colored Table Header</h2>

<table>
  <tr>
    <th>Teacher</th>
    <th>Student</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Mark</td>
  </tr>
  <tr>
    <td>Luice</td>
    <td>Griffin</td>
  </tr>
</table>

</body>
</html>

Output

Conclusion

To Style HTML Tables, you can utilize different CSS properties for adding and adjusting borders, creating collapse borders, adjusting width and height of the table, aligning text horizontally or vertically, adding padding or customizing rows, columns or cells with the specified colors. This blog demonstrated the usage of different CSS properties for style tables for a webpage. Give them a try and enjoy styling HTML tables in a new way!

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.