HTML Table is used to arrange data in rows and columns. An HTML table is used to manage the layout of the webpage. The <tr> tag is used to create table rows and <td> tag is used to create data cells.
Here You will learn all about the HTML Table
Table of Contents
HTML Table
HTML Table Structure
<table>
<tr>
<td> Table Data </td>
<td> Table Data </td>
<td> Table Data </td>
</tr>
</table>
The HTML Table Tags
Tag Name | Description |
<table> | Used to create table. |
<tr> | Used to create row in a table. |
<td> | Used to create cell in a table. |
<th> | Used to create header cell in a table |
<thead> | Used to group the header content in table. |
<tbody> | Used to group the body content in table. |
<tfoot> | Used to group the footer content in table. |
<caption> | Userd to write caption in a table. |
<colgroup> | Used to group single or multiple columns in a table. |
<col> | Used with <colgroup> to specify column properties. |
The <table> Tag
The table tag is used to create a table in HTML. It is a parent tag for any table.
<table>
</table>
The <tr> Tag
The <tr> tag is used to create the table row.
<table>
<tr>
</tr>
</table>
The <td> Tag
The <td> tag is used to insert table data. Each table cell is defined by a <td> tag.
<table>
<tr>
<td> table cell </td>
<td> table cell 2</td>
</tr>
</table>
The <th> Tag
The <th> tag is used to create a table heading. It replaces the <td> tag to create a heading that is used to represent the actual data cell. The top cell is used to create a table heading.
The <th> tag makes the text bold and center-aligned.
<table>
<tr>
<th>table header 1</th>
<th>table header 2</th>
</tr>
<tr>
<td> table cell </td>
<td> table cell 2</td>
</tr>
</table>
The <caption> Tag
The caption tag defines a table caption. It must be inserted after <table> tag. If you put it anywhere in the <table> and </table> it will be automatically aligned to the top of the table.
As you can see in this example we have defined two captions one for header and one for footer but both show on the top of the table.
<!DOCTYPE html> <html> <head> </head> <body> <table border=1 > <caption> Header Caption</caption> <tr > <th >Name</th> <th>Class</th> <th>Stream</th> <th>Result</th> </tr> <tr> <td>ABC</td> <td>12</td> <td>Science</td> <td>Pass</td> <caption> Footer Caption</caption> </tr> </table> </body> </html>
Table Header
The <thead> is used to create table header. The <thead> contains only heading related tags like <th> tag.
<!DOCTYPE html> <html> <body> <table border=1 style="width:100%"> <thead> <tr > <th>Heading 1</th> <th>Heading 2</th> <th>Heading 3</th> </tr> </thead> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </table> </body> </html>
Table Body
the <body> is used to create the group of table rows. For creating different sections <thead>, <tbody> and <tfooter> are used.
<!DOCTYPE html> <html> <body> <table border=1 style="width:100%"> <tr > <th>Heading 1</th> <th>Heading 2</th> <th>Heading 3</th> </tr> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tbody> </table> </body> </html>
Table Footer
The <tfoot> tag is used to create a table footer. It contains footer-related information like total, signature, etc.
<!DOCTYPE html> <html> <body> <table border=1 style="width:100%"> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tbody> <tfoot> <tr> <td> Total</td> <td> 100</td> <td> 45%</td> </tr> </tfoot> <thead> <tr > <th>Heading 1</th> <th>Heading 2</th> <th>Heading 3</th> </tr> </thead> </table> </body> </html>
The Uniqueness about these tags is, you can place them anywhere in the <table> opening and </table> closing tag but they will be aligned as header, body, and footer automatically. As you can see in the above example.
HTML Table Attributes
HTML Table contains a lot of attributes. We will discuss them one by one. Let’s have a look at the table attributes:
The Border Attribute
The border attribute is used to give a border to the table. It is used inside the table tag. It gives a single border to the table and another single border to each cell.
<!DOCTYPE html> <html> <body> <table border=1 > <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </table> </body> </html>
The Collapsed Table Border
To create a single border in the table we can change the border-collapse property to collapse. It will make a single border on our table.
<!DOCTYPE html> <html> <style> table{border-collapse:collapse;} </style> <body> <table border=1 align="center" > <tr> <td>ABC</td> <td>Mobile No</td> <td>+123467890</td> </tr> </table> </body> </html>
Rounded Table Border
We can make a table border round using CSS. Only change the border-radius property to 50%;
<!DOCTYPE html> <html> <style> table, td { border: 1px solid black; border-radius: 10px; padding:5px 5px; } </style> <body> <table > <tr> <td>ABC</td> <td>Mobile No</td> <td>+123467890</td> </tr> </table> </body> </html>
Dashed Table border
Using border-style, we can change table border to dashed, dotted, solid, double, etc. Here we are using dashed value to make border dashed.
<!DOCTYPE html> <html> <style> table, td { border: 1px solid black; border-radius: 10px; padding:5px 5px; border-style:dashed; } </style> <body> <table > <tr> <td>ABC</td> <td>Mobile No</td> <td>+123467890</td> </tr> </table> </body> </html>
The Width Attribute
The width gives the width to the table. It can have the value in percentage, px, em, etc.
<!DOCTYPE html> <html> <body> <table border=1 width="100%" > <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </table> </body> </html>
The Height Attribute
The height attribute is used to give the height for table row (<tr>) and table cell (<td>) elements.
<!DOCTYPE html> <html> <body> <table border=1 width="100%" > <tr height="50px"> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr height="10px"> <td >Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> </table> </body> </html>
The colspan Attribute
The colspan attribute is used to merge multiple columns. As we have 3 subjects, we can create a subject column and merge 3 columns then we can create three subjects in another row. The example is given below:
<!DOCTYPE html> <html> <body> <table border=1 width="100%" > <tr> <td>Name</td> <td>Class</td> <td colspan=3>Subjects</td> </tr> <tr> <td >ABC</td> <td>4</td> <td>English</td> <td>Maths</td> <td>Science</td> </tr> </table> </body> </html>
The rowspan Attribute
The rowspan also works like colspan but it merges rows. As we have a user “ABC” who has multiple mobile numbers. Run the example below:
<!DOCTYPE html> <html> <body> <table border=1 width="100%" > <tr> <td rowspan=2>ABC</td> <td rowspan="2">Mobile No</td> <td>+1234567890</td> </tr> <tr> <td >+0123456789</td> </tr> </table> </body> </html>
The align Attribute
The align attribute is used to align the table. It is used inside the <table> opening tag. It has three values left, right, and center. The left value is the default.
<!DOCTYPE html> <html> <body> <table border=1 align="center" > <tr> <td>ABC</td> <td>Mobile No</td> <td>+123467890</td> </tr> </table> </body> </html>
The cellpadding Attribute
the cellpadding attribute is used to give padding inside a cell. It takes only one value
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <table cellpadding="15" bordercolor="red"> <tr > <th >Name</th> <th>Class</th> <th>Stream</th> <th>Result</th> </tr> <tr> <td>ABC</td> <td>12</td> <td>Science</td> <td>Pass</td> </tr> </table> </body> </html>
The cellspacing Attribute
The cellspacing attribute works as a margin for each cell. It gives space from outside of a cell. As you can see the difference in this below and above example:
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <table border=1 cellspacing = "15px" bordercolor="red" cellpadding="15"> <tr > <th >Name</th> <th>Class</th> <th>Stream</th> <th>Result</th> </tr> <tr> <td>ABC</td> <td>12</td> <td>Science</td> <td>Pass</td> </tr> </table> </body> </html>
The bordercolor Attribute
The bordercolor attribute is used to give color to a border.
<!DOCTYPE html> <html> <head> </head> <body> <table border=1 cellspacing = "15px" bordercolor="red" cellpadding="15"> <tr > <th >Name</th> <th>Class</th> <th>Stream</th> <th>Result</th> </tr> <tr> <td>ABC</td> <td>12</td> <td>Science</td> <td>Pass</td> </tr> </table> </body> </html>
HTML Table Colgroup
The HTML Table colgroup is used to create <tr> table row groups to style them. Col group is used as a container and the <col> element specifies the selection table.
The <col> Element has two basic attributes span and style. span attribute specifies how many columns should be selected for style.
The style attribute is used to give style to an element.
<!DOCTYPE html> <html> <body> <table border=1 > <colgroup> <col span="2" style="background-color: #d4d4d4"> </colgroup> <tr> <td>Name</td> <td>Age</td> <td>Gender</td> <td>Class</td> <td>Stream</td> <td>result</td> </tr> <tr> <td>ABC</td> <td>20</td> <td>Female</td> <td>12</td> <td>Science</td> <td>Pass</td> </tr> </table> </body> </html>
Multiple Colgroup
We can create multiple colgroup to give different styles to different columns.
<!DOCTYPE html> <html> <body> <table border=1 > <colgroup> <col span="2" style="background-color: #d4d4d4"> <col span="3" style="background-color: #00ff00"> </colgroup> <tr> <td>Name</td> <td>Age</td> <td>Gender</td> <td>Class</td> <td>Stream</td> <td>result</td> </tr> <tr> <td>ABC</td> <td>20</td> <td>Female</td> <td>12</td> <td>Science</td> <td>Pass</td> </tr> </table> </body> </html>
Colgroup Attrbutes
The span attribute:
The span attribute is used to insert a number of columns to be merged. The default value is 1. It means if we don’t insert any value into this it will select one column.
<colgroup>
<col span="2" style="background-color: #D4D4D4">
<col span="3" style="background-color: red">
</colgroup>
The style Attribute:
The style attribute is used to give styles on colgroups. Style attribute has a property visibility, if its value is collapse it will hide those columns.
<!DOCTYPE html> <html> <style> </style> <body> <table border=1 > <colgroup> <col span="2" style="background-color: #d4d4d4;"> <col span="3" style="visibility:collapse;"> </colgroup> <tr> <td>Name</td> <td>Age</td> <td>Gender</td> <td>Class</td> <td>Stream</td> <td>result</td> </tr> <tr> <td>ABC</td> <td>20</td> <td>Female</td> <td>12</td> <td>Science</td> <td>Pass</td> </tr> </table> </body> </html>
HTML Table Designs Example
HTML Table Zebra Strips
Here we will create a table, which will have 2 colors on the background like zebra. Here we are using the style for <tr> tag when the number is even background will be dark gray and the text color will be white.
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } td, th { text-align: left; padding: 7px; } tr:nth-child(even) { background-color: #545454; color:white; } </style> </head> <body> <h2>HTML Zebra Strip Table</h2> <table> <tr> <th>Albert Addam</th> <th>Class</th> <th>Result</th> </tr> <tr> <td>Dennis Rio</td> <td>1</td> <td>Pass</td> </tr> <tr> <td>Ammy Richie</td> <td>3</td> <td>Pass</td> </tr> <tr> <td>Alfredo Eras</td> <td>5</td> <td>Fail</td> </tr> <tr> <td>Mark Eve</td> <td>6</td> <td>Pass</td> </tr> <tr> </table> </body> </html>
HTML Table Vertical Zebra Strips
In the above example, we have created a horizontal zebra strips table, as the same method, we will apply background color on <td> and <th> as on the even values.
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } td, th { text-align: left; padding: 7px; } th:nth-child(even), td:nth-child(even) { background-color: #545454; color:white; } </style> </head> <body> <h2>HTML Vertical Zebra Strip Table</h2> <table> <tr> <th>Albert Addam</th> <th>Class</th> <th>Marks</th> <th>Result</th> </tr> <tr> <td>Dennis Rio</td> <td>1</td> <td>50</td> <td>Pass</td> </tr> <tr> <td>Ammy Richie</td> <td>3</td> <td>67</td> <td>Pass</td> </tr> <tr> <td>Alfredo Eras</td> <td>5</td> <td>34</td> <td>Fail</td> </tr> <tr> <td>Mark Eve</td> <td>6</td> <td>79</td> <td>Pass</td> </tr> <tr> </table> </body> </html>
HTML Table – Horizontal Dividers
For horizontal dividers will create style for <th> and<td> as border-bottom: 1px solid black.
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } td, th { text-align: left; padding: 7px; } th,td { border-bottom:1px solid black; } </style> </head> <body> <h2>HTML Horizontal Dividers Table</h2> <table> <tr> <th>Albert Addam</th> <th>Class</th> <th>Marks</th> <th>Result</th> </tr> <tr> <td>Dennis Rio</td> <td>1</td> <td>50</td> <td>Pass</td> </tr> <tr> <td>Ammy Richie</td> <td>3</td> <td>67</td> <td>Pass</td> </tr> <tr> <td>Alfredo Eras</td> <td>5</td> <td>34</td> <td>Fail</td> </tr> <tr> <td>Mark Eve</td> <td>6</td> <td>79</td> <td>Pass</td> </tr> <tr> </table> </body> </html>
HTML Table – Vertical Dividers
As we did in the above horizontal divider we will make every right border visible, but the last element border value will none. Here we will use :last-child selector to hide the last element border.
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } td, th { text-align: left; padding: 7px; } th,td { border-right:1px solid black; } th:last-child, td:last-child{ border-right:none; } </style> </head> <body> <h2>HTML Vertical Dividers Table</h2> <table> <tr> <th>Albert Addam</th> <th>Class</th> <th>Marks</th> <th>Result</th> </tr> <tr> <td>Dennis Rio</td> <td>1</td> <td>50</td> <td>Pass</td> </tr> <tr> <td>Ammy Richie</td> <td>3</td> <td>67</td> <td>Pass</td> </tr> <tr> <td>Alfredo Eras</td> <td>5</td> <td>34</td> <td>Fail</td> </tr> <tr> <td>Mark Eve</td> <td>6</td> <td>79</td> <td>Pass</td> </tr> <tr> </table> </body> </html>
Hope you enjoyed this tutorial. If you want to practice code you can visit the below links.
Thank You!
You Might Like This:
- Text Easing | Easing effect in JavaScript
- HTML Color Picker
- Animated Search Bar in CSS
- HTML Thank You Script