An HTML
<table> tag is used to represent HTML table. <tr> tag is used to represent HTML table row. <td> tag is used to represent HTML table data. <th> tag is used to represent HTML table header. <thead> tag is used to group table header content. <tbody> tag is used to group table body content. <tbody> tag is used to group table footer content. Here <table> tag is used to create a table, the tag is used to highlight the header information, represents a cell of the table, represents table row while as represents the table body section.
<table>
<tr>
<th>First_Name</th>
<th>Last_Name</th>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
</tr>
<tr>
<td>James</td>
<td>William</td>
</tr>
</table> <table border="1">
<tr>
<th>First_Name</th>
<th>Last_Name</th>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
</tr>
<tr>
<td>James</td>
<td>William</td>
</tr>
</table>| First_Name | Last_Name |
|---|---|
| Sonoo | Jaiswal |
| James | William |
Here <table> tag is used to create a table,<th> tag is used to highlight the header information, <td>represents a cell of the table ,<tr> represents table row while as represents the table body section.
<table border="1"></table> <table border="1">
<tr>
<th>First_Name</th>
<th>Last_Name</th>
<th>Marks</th>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>60</td>
</tr>
<tr>
<td>James</td>
<td>William</td>
<td>80</td>
</tr>
<tr>
<td>Swati</td>
<td>Sironi</td>
<td>82</td>
</tr>
<tr>
<td>Chetna</td>
<td>Singh</td>
<td>72</td>
</tr>
</table>| First_Name | Last_Name | Marks |
|---|---|---|
| Sonoo | Jaiswal | 60 |
| James | William | 80 |
| Swati | Sironi | 82 |
| Chetna | Singh | 72 |
HTML table border can be set by <table> boder attribute.
<table border="1" style="border: 1px solid black; border-collapse: collapse;">
<tr>
<th>First_Name</th>
<th>Last_Name</th>
<th>Marks</th>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>60</td>
</tr>
<tr>
<td>James</td>
<td>William</td>
<td>80</td>
</tr>
<tr>
<td>Swati</td>
<td>Sironi</td>
<td>82</td>
</tr>
<tr>
<td>Chetna</td>
<td>Singh</td>
<td>72</td>
</tr>
</table> <table border="1" style="border: 1px solid black; border-collapse: collapse;">
<tr>
<th>First_Name</th>
<th>Last_Name</th>
<th>Marks</th>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>60</td>
</tr>
<tr>
<td>James</td>
<td>William</td>
<td>80</td>
</tr>
<tr>
<td>Swati</td>
<td>Sironi</td>
<td>82</td>
</tr>
<tr>
<td>Chetna</td>
<td>Singh</td>
<td>72</td>
</tr>
</table>| First_Name | Last_Name | Marks |
|---|---|---|
| Sonoo | Jaiswal | 60 |
| James | William | 80 |
| Swati | Sironi | 82 |
| Chetna | Singh | 72 |
HTML table border collapsing can be done by CSS border-collapse property:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
HTML table row and column can be extended using rowspan and colspan attributes. Basically, it extends a single cell into either multi-column or multi-row.
<table>
<tr>
<th>Name</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>Smith Roy</td>
<td>45678945</td>
<td>45678925</td>
</tr>
</table> <table border="1">
<tr>
<th>Name</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>Smith Roy</td>
<td>45678945</td>
<td>45678925</td>
</tr>
</table>
<h4>HTML Table Rowspan Example</h4>
<table border="1">
<tr>
<th>Name:</th>
<td>John Doe</td>
</tr>
<tr>
<th rowspan="2">Phone:</th>
<td>565789945</td>
</tr>
<tr>
<td>455774555</td>
</tr>
</table>| Name | Phone | |
|---|---|---|
| Smith Roy | 45678945 | 45678925 |
| Name: | John Doe |
|---|---|
| Phone: | 565789945 |
| 455774555 |
colspan attribute extends a cell more than one column.rowspan attribute extends a cell more than one row.<table>
<thead>
<tr>
<th>Items</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stationary</td>
<td>2,000</td>
</tr>
<tr>
<td>Fuiture</td>
<td>10,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>12,000</td>
</tr>
</tfoot>
</table> <table border="1" style="table,th,td {border: 1px solid black;border-collapse: collapse;}">
<thead>
<tr>
<th>Items</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stationary</td>
<td>2,000</td>
</tr>
<tr>
<td>Fuiture</td>
<td>10,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td>12,000</td>
</tr>
</tfoot>
</table>| Items | Expenditure |
|---|---|
| Stationary | 2,000 |
| Fuiture | 10,000 |
| Total | 12,000 |
HTML provides different table attributes <thead>, <tbody>, and <tfoot>.It creates most structure full table data having table header,table body and table footer.
<table>
<caption>Users Info</caption>
<thead></thead>
<tbody></tbody>
</table> <table border="1">
<caption>Users Info</caption>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Peter Parker</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Clark Kent</td>
<td>34</td>
</tr>
</table>| No. | Name | Age |
|---|---|---|
| 1 | Peter Parker | 16 |
| 2 | Clark Kent | 34 |
HTML table caption can be provided by placing <caption> tag after <table> tag.It is basically denoted the the name of the table.