How To Create HTML Table

HTML table is one of the most useful HTML tag for displaying data into rows and columns in the simplest way. If you are dealing with the tabular data, this is the one you should look for and we will walk you through how it can be achieved on your web page as a beginner.

How HTML Table Looks

Before we start that, let me show you what’s the HTML tags we will use later.

<table>: We use this tag to define a table.
<tr>: We use this tag to define a table row.
<th>: We use this tag to define a table header cell.
<td>: We use this tag to define a table cell.
<caption>: We use this tag to define a table caption.
<thead>: We use this tag to define a group of the header content in a table.
<tbody>: We use this tag to define a group of the body content in a table.
<tfoot>: We use this tag to define a group of the footer content in a table.
<colgroup>: We use this tag to define the formatting of a group of one or more columns in a table.
<col>: We use this tag to define a column property for a column within the <colgroup>.

Simple Table with Header

To see how it display, click on the top-right button to display it. Please note that if the table doesn’t have the lines in default CSS. You might need to add the style on head section.

<table>
  <tr>
    <th>Name</th>
    <th>Website</th>
  </tr>
  <tr>
    <td>Jorcus</td>
    <td>https://blog.jorcus.com</td>
  </tr>
</table>

Simple Table with Header (with CSS)

Now we placed the CSS into the code to make the line in the table. The code below are just to show you of the table with CSS code. In the real world, the CSS style code <style> should place in the head element as a best practice.

<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
<table>
  <tr>
    <th>Name</th>
    <th>Website</th>
  </tr>
  <tr>
    <td>Jorcus</td>
    <td>https://blog.jorcus.com</td>
  </tr>
</table>

Table with <thead>, <tbody> and <tfoot>

Now, we will apply the <thead>, <tbody> and <tfoot> into the table. In general, we use them to define it as a group of head, body and foot in a table. Here’s a simple example of how we wrote.

<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
<table>
  <thead>
    <tr>
      <th>thead content 1</th>
      <th>thead content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>tbody content 1</td>
      <td>tbody content 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>tfoot content 1</td>
      <td>tfoot content 2</td>
    </tr>
  </tfoot>
</table>

Table with <colgroup> and <col>

In here, we use the <colgroup> and <col> to add the background color of the table. I set the first column with a red color background and set another background color as yellow. There are three columns I would like to set it as yellow background color, so I use span attribute to 3 to make the color flawless with three columns.

<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
<table>
  <colgroup>
    <col style="background-color: red">
    <col span="3" style="background-color: yellow">
  </colgroup>
<thead>
  <tr>
    <th>Name</th>
    <th>Website</th>
    <th>Facebook</th>
    <th>Instagram</th>
  </tr>
  </thead>
  <tr>
    <td>Jorcus</td>
    <td>jorcus.com</td>
    <td>@jorcus</td>
    <td>@jorcus96</td>
  </tr>
    <tr>
    <td>Ng Fang Kiang</td>
    <td>jorcus.com =D</td>
    <td>@jorcus =D</td>
    <td>@jorcus96 =D</td>
  </tr>
</table>

Simple table with <caption>

To display a table with a caption, we use <caption> tag to display it. Here are some demos.

<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
<table>
  <caption>Table caption</caption>
  <tr>
    <td>Sample data 1</td>
    <td>Sample data 2</td>
    <td>Sample data 3</td>
  </tr>
</table>

Put Everything Together

Now, we put everything we’ve learned in use. The result will be the image below.

<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
  
thead {
  color:green;
}
  
tbody {
  color:blue;
}
  
tfoot {
  color:red;
}
</style>
<table>
  <caption>Jorcus Expenses (2020)</caption>
  <colgroup>
    <col span="3" style="background-color: yellow">
  </colgroup>
  <thead>
    <tr>
      <th></th>
      <th>Food Spent</th>
      <th>Entertainment Spent</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$500</td>
      <td>$250</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$300</td>
      <td>$350</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$800</td>
      <td>$600</td>
    </tr>
  </tfoot>
</table>