The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells.
A <td> tag can contain text, links, images, lists, forms, other tables, etc.
Why HTML Table
There are several reason because of that we use HTML Table Element, some of them are listed below.
- HTML table makes easier to create a list in efficient way.
- Easy to understand.
- More Systematic to edit information or remove information.
To create a Table in HTML we use <table> tag and for ending scope of Table Element we use closing </table> tag. Below we have listed syntax of HTML Table Element.
Syntax Example
Row and Column in HTML Table
To divide block in HTML table we use row and column. Just like normal table there are rows in horizontal direction and column in vertical direction. Row is represented by <tr>tag, and column is represented by <td>, remember both row and column have their closing tags.
HTML Table tags meanings
- <table>, </table> - HTML Table Element
- <tr>, </tr> - Table Row
- <td>, </td> - Table Column
Note : A HTML Table can have more than one Row, and a Row can have more than One column. Example of a big table
Example Explained
<table border="1">
<tr>
<th>Name</th>
<th>Email</th>
<th>Contact Number</th>
<tr>
<tr>
<td>Abc</td>
<td>abc@gmail.com</td>
<td>756782467</td>
<tr>
</table>
Output
| Name |
Email |
Contact Number |
| Abc |
abc@gmail.com |
756782467 |
Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise you can use <th>t element in any row.
Cellpadding and Cellspacing Attributes
There are two attributes called cellpadding and cellspacing which you will use to adjust the white space in your table cells. The cellspacing attribute defines space between table cells, while cellpadding represents the distance between cell borders and the content within a cell.
Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows. OR
In HTML Table, if we want to marge two or more column together then we use colspan, it is an attribute of <td> tag and in same manner if we want to marge rows together then we use rowspan as attribute of <td>. If we pass value 2 in rowspan or colspan or in both then it’s going to marge 2 rows, 2 columns together.
Colspan and Rowspan Example
<table border="2">
<tr >
<td >Home Add.</td>
<td>Office Add.</td>
<td>Home Number</td>
</tr>
<tr>
<td rowspan="2">A_b_c_d X</td>
<td>m_n_o Y</td>
<td>8749</td>
</tr>
<tr>
<td>p_q_r X</td>
<td>8749</td>
</tr>
<tr>
<td colspan="3">Table ended here.</td>
</tr>
</table>
Tables Backgrounds
You can set table background, border color using - bgcolor attribute or background attribute for border bordercolor attribute
Note - The bgcolor, background, and bordercolor attributes deprecated in HTML5. Do not use these attributes.
Table Height and Width
Set a table width and height using width and height attributes. You can specify table width or height in terms of pixels or in terms of percentage of available screen area.
Width, Height Example
<table border="2" width="100%" height="150">
<tr >
<td >Home Address</td>
<td>Office Address</td>
<td>House Number</td>
</tr>
<tr>
<td >A_b_d X</td>
<td>m_n_n Y</td>
<td>876</td>
</tr>
</table>
Table Header, Body, and Footer
Tables can be divided into three portions − a header, a body, and a footer. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.
- <thead> - Create a separate table header.
- <body> - Indicate the main body of the table.
- <tfoot> - Create a separate table footer.
Example Explained
<table border="1">
<thead>
<tr>
<td colspan="3">Information</th>
<tr>
</thead>
<tbody>
<tr>
<td>Abc</td>
<td>abc@gmail.com</td>
<td>756782467</td>
<tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">This is Footer></td>
<tr>
</tfoot>
</table>
Nested Table
You can use one table inside another table. Not only tables you can use almost all the tags inside table data tag <td>.
HTML Table Tags
| Tag |
Description |
| <table> |
Defines a table |
| <th> |
Defines a header cell in a table |
| <tr> |
Defines a row cell in a table |
| <td> |
Defines a cell in a table |
| <caption> |
Defines a table caption |
| <colgroup> |
Specifies a group of one or more columns in a table for formatting |
| <col> |
Specifies column properties for each column within a <colgroup> element |
| <thead> |
Groups the header content in a table |
| <tbody> |
Groups the body content in a table |
| <tfoot> |
Groups the footer content in a table |