How to Style a Table With CSS

In order to make your website look great, you must style every single section of your website. In this article, we will see how you can style a Table that is present on your webpage with CSS.

What are HTML Tables

HTML Tables are used to store data in rows and columns on your webpage. To create a table in html we have to use a <table> tag. Along with this table tag we have to use various other tags, like the <tr>, <td> etc. Here is how you can create a simple table in HTML.

Example

<html>
<head>
</head>
<body>
<h1> Create a table in html. </h1>
<table>
  <tr>
    <th>Header 1</th> 
    <th>Header 2</th> 
    <th>Header 3</th> 
  </tr>
  <tr>
    <td>HTML</td>
    <td>CSS</td>
    <td>JavaScript</td>
  </tr>
  <tr>
    <td>PHP</td>
    <td>Python</td>
    <td>Java</td>
  </tr>
</table>
<!--So this is how you can create table in html-->
</body>
</html>

Copy the Code and Run it Here

Style a Table with CSS

With the help of CSS, we can change the font, color, border, alignment of our Table. We can style the table header <th> with CSS. Here is how you can style each portion of a table with CSS.

Table Border

To add border to an html table, we have to use the CSS border property. By using this property we can also set the width, color of the border. Here is how you can set the border of an html table.

Example

table {
  border: 3px solid #000000;
}

th, td {
  border: 1px solid #000;
  padding: 8px;
  text-align: left;
}

Code Explanation

In an above code the table selector targets the <table> element in an html page. The border property is set to 3px, solid, #000000. This means that the table will have a border with a width of 3 pixel (px), the solid line style and the color of the border is specified as black.

In the same way th & td selector targets the table header and table data. Just like the table selector, here also border property is set to 1px, solid, #000000 . Additionally, the padding property is set to 8px, which adds 8 pixels of space inside each cell. The text-align property is set to left, which aligns the text inside the cells to the left side.

Now let’s add this CSS code to our html page, and see how our table looks like:

<html>
<head>
<style>
table {
  border: 1px solid #000;
}

th, td {
  border: 1px solid #000;
  padding: 8px;
  text-align: left;
}
</style>
</head>
<body>
<h1> Create a table in html. </h1>
<table>
  <tr>
    <th>Header 1</th> 
    <th>Header 2</th> 
    <th>Header 3</th> 
  </tr>
  <tr>
    <td>HTML</td>
    <td>CSS</td>
    <td>JavaScript</td>
  </tr>
  <tr>
    <td>PHP</td>
    <td>Python</td>
    <td>Java</td>
  </tr>
</table>
</body>
</html>

Copy the Code and Run it Here

Table Width and Height

The width and height properties are used to define Width and Height of a table. Here is how you can set the width and height of a table:

Example

table {
  width: 80%;
}

th {
  height: 40px;
}

Code Explanation

In an above code the width of table is set to 80%, and the height of table cells is set to 40px.

Now let’s add this CSS code to our HTML page.

<html>
<head>
<style>
table {
  border: 1px solid #000;
}

th, td {
  border: 1px solid #000;
  padding: 8px;
  text-align: left;
}
table {
  width: 80%;
}
th {
  height: 40px;
}
</style>
</head>
<body>
<h1> Create a table in html. </h1>
<table>
  <tr>
    <th>Header 1</th> 
    <th>Header 2</th> 
    <th>Header 3</th> 
  </tr>
  <tr>
    <td>HTML</td>
    <td>CSS</td>
    <td>JavaScript</td>
  </tr>
  <tr>
    <td>PHP</td>
    <td>Python</td>
    <td>Java</td>
  </tr>
</table>
</body>
</html>

Copy the Code and Run it Here

Table Padding

The padding property allows us to adjust the space between the border and the content in a table. We have to use the padding property on <td> and <th> elements. Here is an example:

Example

th, td {
  padding: 10px;
}

In an above example, the padding property is set to 10px, that means the space between border and the table content is 10px. You can paste this code in an above code (main code) and see how your table looks like.

Table Color

In an below example, let’s write a code and see how you can set the color of the table.

Example

th {
  background-color:#000000;
  color:#ffffff;
}
td {
  background-color: whitesmoke;
  color: #000000;
}

Code Explanation

In an above example, we set the background-color and color of the table header as black and white respectively. We also set the background-color and color of the table cells as whitesmoke and white respectively.

Here is how our table looks like before and after styling with CSS.

Before Adding CSS: