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:
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:
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:
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 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:
To make different color for header and body, add style code to <th> style.
table tr th {
background-color: #808000;
}Output:
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 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 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 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:
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:
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:
That it's for now. You can find all off above examples in our GitHub.
Thanks!
