Home >  Programming Blog >  HTML 5 Tutorial

HTML 5 Tutorial: Table Example

by Didin J. on Jun 10, 2025 HTML 5 Tutorial: Table Example

HTML Table use for represent tabular data like in the Excel Application and arrange the layout of the Web View

Table of Contents:

An HTML Table is used to represent tabular data, like in the Excel Application, and arrange the layout of the Web View. Here, we want to show you how to create a table using HTML tags and a Stylesheet (CSS). An HTML table may vary depending on data and style requirements. Sometimes, in a real application, we use an HTML table as a layout of the Email template in HTML format.

Some common HTML tags are used by HTML tables:

HTML Tags Descriptions
<table> Define a table
<tr> Define a table row
<td> Define a table cell
<th> Define a table header cell
<thead> Define a group of a table header
<tbody> Define a group of the table body
<tfooter> Define a group of the table footer

Before starting to practice HTML5 tables, make sure all <table> tags are put inside a complete <body> and <html> tag.

<!DOCTYPE html>
<html>
  <head>
    <title>Basic HTML Table</title>
  </head>
  <body>
    <table></table>
  </body>
</html>


Basic HTML Table

Here is an example of a basic HTML table, or a common use of the above HTML tags to define or create a table.

<table>
  <tr>
    <th>No.</th>
    <th>Full Name</th>
    <th>Position</th>
    <th>Salary</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Bill Gates</td>
    <td>Founder Microsoft</td>
    <td>$1000</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Steve Jobs</td>
    <td>Founder Apple</td>
    <td>$1200</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Larry Page</td>
    <td>Founder Google</td>
    <td>$1100</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Mark Zuckeberg</td>
    <td>Founder Facebook</td>
    <td>$1300</td>
  </tr>
</table>

Output:

HTML Table - Basic Simple Table

As a default, HTML 5 tables are not defined with a border, you should add the border manually in each table cell.


HTML Table with Border

To add a basic border to an HTML5 table, simply add this style attribute to the <table> tag.

<table style="border: solid 1px #aaa999;">

Output:

HTML Table - Table Border

As you can see, Table Border only draws lines to the table, and the cells are left borderless. To make a border for all cells, add the style attribute to all <th> and all <td>.

<table style="border: solid 1px #aaa999;">
  <tr>
    <th style="border: solid 1px #aaa999;">No.</th>
    <th style="border: solid 1px #aaa999;">Full Name</th>
    <th style="border: solid 1px #aaa999;">Position</th>
    <th style="border: solid 1px #aaa999;">Salary</th>
  </tr>
  <tr>
    <td style="border: solid 1px #aaa999;">1</td>
    <td style="border: solid 1px #aaa999;">Bill Gates</td>
    <td style="border: solid 1px #aaa999;">Founder Microsoft</td>
    <td style="border: solid 1px #aaa999;">$1000</td>
  </tr>
  <tr>
    <td style="border: solid 1px #aaa999;">2</td>
    <td style="border: solid 1px #aaa999;">Steve Jobs</td>
    <td style="border: solid 1px #aaa999;">Founder Apple</td>
    <td style="border: solid 1px #aaa999;">$1200</td>
  </tr>
  <tr>
    <td style="border: solid 1px #aaa999;">3</td>
    <td style="border: solid 1px #aaa999;">Larry Page</td>
    <td style="border: solid 1px #aaa999;">Founder Google</td>
    <td style="border: solid 1px #aaa999;">$1100</td>
  </tr>
  <tr>
    <td style="border: solid 1px #aaa999;">4</td>
    <td style="border: solid 1px #aaa999;">Mark Zuckeberg</td>
    <td style="border: solid 1px #aaa999;">Founder Facebook</td>
    <td style="border: solid 1px #aaa999;">$1300</td>
  </tr>
</table>

If you want simple coding without writing a style for each cell, use the <style> tag before the </head> tag. So, the full source code will be like this.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Table with Border</title>
    <style>
      table {
        border: solid 1px #aaa999;
      }
      table tr th {
        border: solid 1px #aaa999;
      }
      table tr td {
        border: solid 1px #aaa999;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>No.</th>
        <th>Full Name</th>
        <th>Position</th>
        <th>Salary</th>
      </tr>
      <tr>
        <td>1</td>
        <td>Bill Gates</td>
        <td>Founder Microsoft</td>
        <td>$1000</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Steve Jobs</td>
        <td>Founder Apple</td>
        <td>$1200</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry Page</td>
        <td>Founder Google</td>
        <td>$1100</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Mark Zuckeberg</td>
        <td>Founder Facebook</td>
        <td>$1300</td>
      </tr>
    </table>
  </body>
</html>

Next, we will always use a separate <style> tag for another HTML 5 Table example instead of an inline style.


Output:

HTML Table - Cell Border

Now, the table border looks ugly. That is because of default HTML 5 table has a spacing for border cells. To fix that, add this style code to the table.

table {
  border-collapse: collapse;
  border-spacing: 0;
}

Output:

HTML Table - No Cellspacing


HTML Table with Background Color

To add a background color to the HTML5 table, simply add this style code to the table style.

table {
  background-color: aqua;
}

Or you can apply the 6-digit hexadecimal code starting with the # symbol.

table {
  background-color: #00FFFF;
}

Output:

HTML Table - Table Background Color

To make a different color for the header and body, add style code to the <th> style.

table tr th {
  background-color: #808000;
}

Output:

HTML Table - Header Cells Background Color

To make a striped or zebra-like table background color for data rows, add this style to the tr style.

tr:nth-child(even) {
  background-color: #0000FF;
}

That style code will give a background color to the table row beginning with blue color by using the `even` keyword. If you want the table row background color to begin with the table background color, use the `odd` keyword.

tr:nth-child(odd) {
  background-color: #0000FF;
}

If we are using both even and odd keywords, we use a different background color on each even and odd row instead of using the table background color.

tr:nth-child(even) {
  background-color: #0000FF;
}
tr:nth-child(odd) {
  background-color: #FFFF00;
}

Output:

HTML Table - Stripped Row Color


HTML Table with Cell Font Color

The previous example with background color looks too dark because the font color of each table cell is black. To change the color of the cell font, add this line of style codes in each <th> and <td> style.

table tr th {
  border: solid 1px #aaa999;
  background-color: #808000;
  color: #FFFF00;
}
table tr td {
  border: solid 1px #aaa999;
  color: #FFFFFF;
}

Output:

HTML Table - Font Color


HTML Table Cell Padding

The previous HTML 5 table example shows too too-narrow table view. Now, we will adjust the table's vertical and horizontal cell padding. Add these new style codes for that.

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

Output:

HTML Table - Cell Padding


HTML Table Cell Alignment

Some column cells need a different text alignment. For example, we want to center the alignment first column cells. To do that, add these new style codes.

table tr td:nth-child(1) {
  text-align: center;
}

Output:

HTML Table - Column Cells alignment

To align all columns, add this style code.

table tr td {
  text-align: center;
}

To align the last column of the table, use this style code.

table tr td:nth-last-child(1) {
  text-align: right;
}


HTML Table: Merge Rows or Columns

To merge a few HTML 5 table rows using these attributes.

<td rowspan="4">Company Founder</td>

Here's the full example.

<table>
  <tr>
    <th>No.</th>
    <th>Full Name</th>
    <th>Position</th>
    <th>Salary</th>
    <th>Type</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Bill Gates</td>
    <td>Founder Microsoft</td>
    <td>$1000</td>
    <td rowspan="4">Company Founder</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Steve Jobs</td>
    <td>Founder Apple</td>
    <td>$1200</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Larry Page</td>
    <td>Founder Google</td>
    <td>$1100</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Mark Zuckeberg</td>
    <td>Founder Facebook</td>
    <td>$1300</td>
  </tr>
</table>

Output:

HTML Table - Rowspan

To merge HTML5 table columns, use this attribute.

<td colspan="3">Total Expense: </td>

Here's the full example.

<table>
  <tr>
    <th>No.</th>
    <th>Full Name</th>
    <th>Position</th>
    <th>Salary</th>
    <th>Type</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Bill Gates</td>
    <td>Founder Microsoft</td>
    <td>$1000</td>
    <td rowspan="4">Company Founder</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Steve Jobs</td>
    <td>Founder Apple</td>
    <td>$1200</td>
  </tr>
  <tr>
    <td>3</td>
    <td>Larry Page</td>
    <td>Founder Google</td>
    <td>$1100</td>
  </tr>
  <tr>
    <td>4</td>
    <td>Mark Zuckeberg</td>
    <td>Founder Facebook</td>
    <td>$1300</td>
  </tr>
  <tr>
    <td colspan="3">Total Expense: </td>
    <td>$4600</td>
  </tr>
</table>

Output:

HTML Table - Rowspan
That's for now. You can find all of the above examples on our GitHub.

That's just the basics. If you need more deep learning about HTML, CSS, JavaScript, or related, you can take the following cheap course:

Thanks!

Related Articles

Programming Blog
JavaJavascriptHTML 5 TutorialCSS 3MongoDBIonic FrameworkGroovy and GrailsNode.jsReact NativeASP.NET CoreAngularVue.jsReact.jsFlutter TutorialMiscellaneousRustGolang (Go)
All Articles
Zizo Wireless