How To Create Tables In HTML

By / January 31, 2022

Watch video presentation and remember to subscribe to our channel;

Watch now!
In this tutorial we will discuss how you can create tables in HTML. We will discuss various table attributes and basic tags used in creating a table as follows;

Basic Tags Used In Creating A Table

  • <table> – this tag is used for defining a table in html, it has closing tag of </table>
  • <tr> -this tag is used to define a row in a table, it has a closing tag of </tr>
  • <th> -this tag is used for defining the heading in a table, it has a closing tag of </th>
  • <td> -this tag is used for defining the data in a table, it has a closing tag of </td>
  • <caption> -this tag is used to add caption to a table, it has a closing tag of </caption>

Let’s create a simple table for better understanding;

<head>
<title>An example of a table</title>
</head>
<body>
<table>
<caption>These are programmers</caption>
<tr>
<th>Name</th> <th>Country</th> <th>Age</th>
</tr>
<tr>
<td>Philloh</td> <td>Kenya</td> <td>22</td>
</tr>
<tr>
<td>Kinsley</td> <td>Zimbabwe</td> <td>20</td>
</tr>
</table>
</body>

It will produce this;

An example of a table These are programmers
Name Country Age
Philloh Kenya 22
Kinsley Zimbabwe 20

Formatting The Tables

In this part we will be discussing on how you can apply some formatting in your table. We see that you can add borders, align the texts, colors, paddings, collapse, spacing, adding caption to the table among others styles to make our table look more attractive and appealing to the users as follows;

a) How to add borders in a table

You can specify the borders between the heading, rows and table data of your table using this property border. Let’s have an example here;

<head>
<title>An example of a table</title>

<style>
table,th,td{
border: 2px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th> <th>Country</th> <th>Age</th>
</tr>
<tr>
<td>Philloh</td> <td>Kenya</td> <td>22</td>
</tr>
<tr>
<td>Kinsley</td> <td>Zimbabwe</td> <td>20</td>
</tr>
</table>
</body>

It will produce a table with 2px solid blue border as follows;

An example of a table
Name Country Age
Philloh Kenya 22
Kinsley Zimbabwe 20

b) How to set spaces between borders

In this case you will specify the space between the cells of the tables using this property border-spacing , lets have an example here;

<head>
<title>An example of a table</title>

<style>
table,th,td{
border: 2px solid blue;
border-spacing: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th> <th>Country</th> <th>Age</th>
</tr>
<tr>
<td>Philloh</td> <td>Kenya</td> <td>22</td>
</tr>
<tr>
<td>Kinsley</td> <td>Zimbabwe</td> <td>20</td>
</tr>
</table>
</body>

It will produce a table with 10 pixels space between the cells as follows;

An example of a table
Name Country Age
Philloh Kenya 22
Kinsley Zimbabwe 20

c) How to align items in a table

In this case we will learn how to align the items of a table for instance you may align the table heading or table data to the right and more using this property text-align. We may have an example here;

<head>
<title>An example of a table</title>

<style>
th{

text-align: right;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th> <th>Country</th> <th>Age</th>
</tr>
<tr>
<td>Philloh</td> <td>Kenya</td> <td>22</td>
</tr>
<tr>
<td>Kinsley</td> <td>Zimbabwe</td> <td>20</td>
</tr>
</table>
</body>

It will produce this where the table heading are aligned at the right, you can align left, center or justify;

An example of a table
Name Country Age
Philloh Kenya 22
Kinsley Zimbabwe 20

d) How to set padding in a table

You can add cell padding in your table using this property padding. For instance you may have th,td{ padding: 10px;} You can try using the above example and see the result.

e) How to add span in your table

You can span your cell into more than one columns and rows using this properties colspan and rowspan respectively. We may have examples to illustrate the same;

case 1 -adding column span
<table>
<tr>
<th>Name</th> <th colspan="2">Moreinfo</td>
</tr>
<tr>
<td>Philiph</td> <td>Kenya</td> <td>Male</td>
</tr>
</table>


case 2 -adding row span
<table>
<tr>
<th>Name</th> <th rowspan="2">Moreinfo</td>
</tr>
<tr>
<td>Philiph</td> <td>Kenya</td> <td>Male</td>
</tr>
</table>

See the different here how it appears;

case 1 -adding column span
Name Moreinfo
Philiph Kenya Male

case 2 -adding row span
Name Philiph
Moreinfo Kenya
Male
Thanks for reading through our tutorial, hopes now you create an awesome table using html, remember to leave your opinion in the comment section below. As we continue learning HTML hoping to meet you in our next tutorial.