HTML Table tag is used for present content in tabular format. With that, you can easily quickly and easily lookup values. A table structured set of data made up of rows and columns.
An HTML table is defined like that- <table> with <tr> and <td> tags. Where <tr> tag is represent row and <td> tag is for table data (cell). Without <tr> and <td> tag you can’t respresnt a content in tabular format.
This tutorial we will cover all HTML table basics.
This tag also used as a other tag for content – HTML p tag.
Important tags in HTML table layout
- <tr> – Table row
- <td> – Table data (cell)
- <th> – Header cell
HTML table example | How to use
For this example, we are using a border attribute in the <table> tag. You can remove this border attribute (only use <table>).
There are 3 rows and 3 columns in the
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<td>Firstname</td>
<td>Lastname</td>
<td>Age</td>
</tr>
<tr>
<td>John</td>
<td>Wick</td>
<td>30</td>
</tr>
<tr>
<td>Halle</td>
<td>Berry</td>
<td>24</td>
</tr>
</table>
</body>
</html>
<p><div><strong>Output:</strong></div></p>
Remove border and use HTML table header tag | <th>
Using <th> tag will represent, this column vertical-align that type of content. See example how to use it and in output will show bold text for header content.
If you don’t want a border in html table then just removed border attribute. See below example.
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Wick</td>
<td>30</td>
</tr>
<tr>
<td>Halle</td>
<td>Berry</td>
<td>24</td>
</tr>
</table>
</body>
</html>
Output:
HTML table structure
Basic structure and details of tables.
<td colspan=””> | HTML table colspan attribute
collapse – in which both the space and the borders between table cells collapse so there is only one border and no space between cells.
To collapse the border, add the following to your style sheet.
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid orange;
}
</style>
</head>
<body>
<table>
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>
</body>
</html><table border=”1″> | HTML table border attribute
As above example simply use border attribute in table element.
<table border="1">
...
</table>HTML table align Center | top | right | top left
The alignment (align attribute) is very useful in html elements. Let’s see how to do in Html table.
Note: top, left and top left is by default aligned. No need to do code for it.
A right aligned HTML table:
<!DOCTYPE html>
<html>
<body>
<table align="right">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Wick</td>
<td>30</td>
</tr>
<tr>
<td>Halle</td>
<td>Berry</td>
<td>24</td>
</tr>
</table>
</body>
</html>
Same you can do for others <table align=”left|right|center”>
HTML table column width | Auto | Fixed | Equal | Size |
The width attribute specifies the width of a table column. Let’s see a simple example set width for 300px.
<!DOCTYPE html>
<html>
<body>
<table width="300px">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>John</td>
<td>Wick</td>
</tr>
<tr>
<td>Halle</td>
<td>Berry</td>
</tr>
</table>
</body>
</html>Equal column width:-
<table width="400px">
<tr>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
</tr>
</table>Auto width:-
<!-- using old school HTML: -->
<table width="100%">
...
</table>
<!-- using a CSS inline style: -->
<table style="width: 100%">
...
</table>Fixed width:
<table class="fixed">
<col width="20px" />
<col width="30px" />
<col width="40px" />
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
<!-- CSS -->
table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }HTML table padding | Adding cellpadding
The padding makes space for the area around the content (inside the border) of an element. With CSS, you can use the padding property in the stylesheet.
<!DOCTYPE html>
<html>
<head>
<style>
th, td {
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<td>One</td>
<td>one</td>
</tr>
<tr>
<td>Two</td>
<td>two</td>
</tr>
</table>
</body>
</html>How to add html table caption?
To add a caption to a table, use <caption>
<!DOCTYPE html>
<html>
<body>
<table>
<caption>Counting number</caption>
<tr>
<td>One</td>
<td>one</td>
</tr>
<tr>
<td>Two</td>
<td>two</td>
</tr>
</table>
</body>
</html>
HTML table footer and Header
thead, tfoot tbody
<table>
<thead>
<tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<!-- etc. -->
</tbody>
</table>Specifying Font and Size in HTML table
One way to do html table font size and type is using a <font> tag.
<!DOCTYPE html>
<html>
<body>
<font size="2" face="Courier New" >
<table width="100%">
<tr>
<td><b>Client</b></td>
<td><b>InstanceName</b></td>
<td><b>dbname</b></td>
<td><b>Filename</b></td>
<td><b>KeyName</b></td>
</tr>
<tr>
<td>NEWDEV6</td>
<td>EXPRESS2012</td>
<td>master</td><td>master.mdf</td>
</tr>
</table>
</font>
<font size="5" face="Courier New" >
<table width="100%">
<tr>
<td><b>Client</b></td>
<td><b>InstanceName</b></td>
<td><b>dbname</b></td>
<td><b>Filename</b></td>
<td><b>KeyName</b></td>
<tr>
<td>NEWDEV6</td>
<td>EXPRESS2012</td>
<td>master</td>
<td>master.mdf</td>
<td>test_key_16</td>
</table></font>
</body>
</html>Output:
Another way is use a CSS.
<table style='font-family:"Courier New", Courier, monospace; font-size:80%' ...>
...
</table>HTML table height of the cell
Height attribute specifies the height of a cell <td>.
<td height="100">abc</td>
<td height="100">100</td>HTML table span | rowspan
<td rowspan=”number“> define number of rows a cell should span.
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Info</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2"> Holiday</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
Output:
HTML table attributes
As above some of example you saw which are used attributes. See the below list some
| Attribute | Value | Description |
|---|---|---|
| align | left center right | Alignment of a table according to the surrounding text |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | background color for a table |
| border | 1 0 | Specifies whether or not the table is being used for layout purposes |
| cellpadding | pixels | The space between the cell wall and the cell content |
| cellspacing | pixels | Space between cells |
| frame | void above below hsides lhs rhs vsides box border | Specifies which parts of the outside borders that should be visible |
| rules | none groups rows cols all | Specifies which parts of the inside borders that should be visible |
| summary | text | Specifies a summary of the content of a table |
| width | pixels % | Width of a table |
Change the HTML table background color
Use bgcolor attribute in table tag to change color.
<!DOCTYPE html>
<html>
<body>
<table bgcolor="#0a223d ">
<tr>
<td>One</td>
<td>one</td>
</tr>
<tr>
<td>Two</td>
<td>two</td>
</tr>
</table>
</body>
</html>Question: How to make an HTML table scrollable?
To make the table vertically scrollable, first, use the table inside a <div> tag and then fixed the height of the <div> tag and set the overflow attribute to auto.
See the code line:
<div style="height: 100px; overflow: auto">
<table style="height: 500px;">
...
</table>
</div>Question: Is it possible to HTML table with an empty row?
Yes, it is possible to empty row in the table, for that you Just need to add the CSS rule.
<!-- HTML code -->
<tr class="blank_row">
<td colspan="3"></td>
</tr>
<!-- CSS code -->
.blank_row
{
height: 10px !important; /* overwrites any other rules */
background-color: #FFFFFF;
}Question: How to HTML table alternate row color?
Answer: In HTML Striped tables or even and odd rules on row color needed CSS code. See below example of how to do change row color in an alternate manner.
<!DOCTYPE html>
<html>
<head>
<style>
table tr:nth-child(odd) td{
background:#ccc;
}
table tr:nth-child(even) td{
background:#fff;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>One</td>
<td>one</td>
</tr>
<tr>
<td>Two</td>
<td>two</td>
</tr>
<tr>
<td>Three</td>
<td>three</td>
</tr>
<tr>
<td>Four</td>
<td>four</td>
</tr>
</table>
</body>
</html>
Output:
For column try this logic-
col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}Tip: How to HTML table inside table? (Nested table)
So, You really Want A Table Inside A Table? see below code.
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<td>First cell in first table. The cell to the right has the second table in it.</td>
<td>
<table border="1">
<tr><td>nested table</td></tr>
<tr><td>nested table</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Output:
Note: In this tutorial, we are not adding an all html table attributes list. Only top used attributes for table tag in Html are covered in this tutorial.
Bonus: This is basic of the table for web designing. Three is a lot of things you can do table design in HTML. Follow this link – https://www.smashingmagazine.com/2008/08/top-10-css-table-designs/
If you have any doubt and suggestions regarding this tutorial, then do comment in below.
Note: The All Examples HTML table codes
are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version