HTML Table
HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row.
We can create a table to display data in tabular form, using <table> element, with the help of <tr> , <td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.
HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content, footer section etc. But it is recommended to use div tag over table to manage the layout of the page.
HTML Table Tags
| Tag | Description |
|---|
| <table> | It defines a table. |
| <tr> | It defines a row in a table. |
| <th> | It defines a header cell in a table. |
| <td> | It defines a cell in a table. |
| <caption> | It defines the table caption. |
| <colgroup> | It specifies a group of one or more columns in a table for formatting. |
| <col> | It is used with <colgroup> element to specify column properties for each column. |
| <tbody> | It is used to group the body content in a table. |
| <thead> | It is used to group the header content in a table. |
| <tfooter> | It is used to group the footer content in a table. |
HTML Table Example
<!DOCTYPE>
<html>
<body>
<table border="1px" cellpadding="10px" width="100%">
<tr>
<th>Name</th>
<th>Branch</th>
<th>Semester</th>
</tr>
<tr>
<td>Mubassir Ali</td>
<td>CS</td>
<td>5</td>
</tr>
<tr>
<td>Nasir Ali</td>
<td>Physics</td>
<td>8</td>
</tr>
<tr>
<td>Azlan Khan</td>
<td>Civil</td>
<td>2</td>
</tr>
<tr>
<td>Haseeb Khan</td>
<td>EC</td>
<td>7</td>
</tr>
</table>
</body>
</html>
| Name | Branch | Semester |
|---|
| Mubassir Ali | CS | 5 |
| Nasir Ali | Physics | 8 |
| Azlan Khan | Civil | 2 |
| Haseeb Khan | EC | 7 |
HTML Table Attributes
HTML Attributes are assign by two methods :
1) Using HTML Attribute
2) By CSS Property
Various attributes of table tag are descibe below :
1) Table Border
You can use border attribute of table tag in HTML to specify border. But it is not recommended now.
2) Cell padding
You can specify padding for table header and table data by using cell padding. The cellpadding attribute of HTML table tag is obselete now.
3) Width
We can specify the HTML table width using the CSS width property. It can be specify in pixels or percentage.
Table Example by tag attribute
Example :
<!DOCTYPE>
<html>
<body>
<table border="1px" cellpadding="10px" width="100%">
<tr>
<th>Name</th>
<th>Branch</th>
<th>Semester</th>
</tr>
<tr>
<td>Atif</td>
<td>CE</td>
<td>5</td>
</tr>
<tr>
<td>Mubassir</td>
<td>IT</td>
<td>8</td>
</tr>
<tr>
<td>Nasir</td>
<td>Civil</td>
<td>2</td>
</tr>
<tr>
<td>Ali</td>
<td>EC</td>
<td>7</td>
</tr>
</table>
</body>
</html>
| Name | Branch | Semester |
|---|
| Atif | CE | 5 |
| Mubassir | IT | 8 |
| Nasir | Civil | 2 |
| Ali | EC | 7 |
Table Example by CSS Property
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
text-align: center;
width: 300px;
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Branch</th>
<th>Semester</th>
</tr>
<tr>
<td>Mansoor</td>
<td>CE</td>
<td>5</td>
</tr>
<tr>
<td>Haleem</td>
<td>IT</td>
<td>8</td>
</tr>
<tr>
<td>Haseeb</td>
<td>Civil</td>
<td>2</td>
</tr>
<tr>
<td>Azlan</td>
<td>EC</td>
<td>7</td>
</tr>
</table>
</body>
</html>
| Name | Branch | Semester |
|---|
| Mansoor | BBA | 5 |
| Haleem | IT | 8 |
| Haseeb | Civil | 2 |
| Azlan | EC | 7 |
Table with colspan
If you want to make a cell span more than one column, you can use the colspan attribute.
It will divide one cell/row into multiple columns, and the number of columns depend on the value of colspan attribute.
Let's see the example that span two columns.
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Mobile No.</th>
</tr>
<tr>
<td>Mubassir Ali</td>
<td>923063855</td>
<td>923451590</td>
</tr>
</table>
</body>
</html>
output:| Name | Mobile No. |
|---|
| Mubassir Ali | 923063855 | 923451590 |
Table with rowspan
If you want to make a cell span more than one row, you can use the rowspan attribute.
It will divide a cell into multiple rows. The number of divided rows will depend on rowspan values.
Let's see the example that span two rows.
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Mobile No.</th>
</tr>
<tr>
<td>Mubassir Ali</td>
<td>923063855</td>
<td>923451590</td>
</tr>
</table>
</body>
</html>
output:| Name | Mubassir Ali |
|---|
| Mobile No. | 923063855 |
|---|
| 923451590 |
Styling HTML table even and odd cells
Example :
<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
table#alter tr:nth-child(even) {
background-color: #eee;
}
table#alter tr:nth-child(odd) {
background-color: #fff;
}
table#alter th {
color: white;
background-color: gray;
}
</style>
</head>
<body>
<table id="alter">
<tr>
<th>Name</th>
<th>Branch</th>
<th>Semester</th>
</tr>
<tr>
<td>Mubassir</td>
<td>CS</td>
<td>5</td>
</tr>
<tr>
<td>Nasir</td>
<td>Physics</td>
<td>8</td>
</tr>
<tr>
<td>Haleem</td>
<td>Civil</td>
<td>2</td>
</tr>
<tr>
<td>Haseeb</td>
<td>EC</td>
<td>7</td>
</tr>
</body>
</html>
output:
| Name | Branch | Semester |
|---|
| Mubassir | CS | 5 |
| Nasir | Physics | 8 |
| Haleem | Civil | 2 |
| Haseeb | EC | 7
|
