HTML 5 Tutorial: Table Example

by Didin J. on Aug 04, 2019 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

HTML Table uses 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 Stylesheet (CSS). HTML table may vary depends on data and style requirements. Sometimes, in the real application, we use an HTML table as a layout of the Email template in HTML format.

There are some common HTML tags that use by HTML table:

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 a table body
<tfooter> Define a group of a table footer

Before start practicing HTML 5 table, make sure all <table> tag put inside 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 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 table not defined with border, you should add the border manually in each table cells.


HTML Table with Border

To add a basic border to HTML 5 table, simply add this style attribute in <table> tag.

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

Output:

HTML Table - Table Border

As you can see, Table Border only draw lines to the table only and cells left borderless. To make border for all cells, add 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 a simple coding without writing a style for each cells, use <style> tag before </head> tag. So, the full source codes 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 separate <style> tag for another HTML 5 Table example instead of inline style.


Output:

HTML Table - Cell Border

Now, the table border looks ugly. That 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 HTML 5 table, simply add this style code to table style.

table {
  background-color: aqua;
}

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

table {
  background-color: #00FFFF;
}

Output:

HTML Table - Table Background Color

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

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

Output:

HTML Table - Header Cells Background Color

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

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

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

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

If we are using both even and odd keyword, we use different background color on each even and odd rows 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 each table cells are black. To change the color of cell font add this line of style codes in each <th> and <td> styles.

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 narrow table view. Now, we will adjust the table vertical and horizontal cell padding. Add this 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 alignment first column cells. To do that, add this 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 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 HTML 5 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 it's for now. You can find all off above examples in our GitHub.

Thanks!

Loading…