How to create tables in HTML?
HTML tables tags allows you to arrange information in a systematical manner, same like we do in MS Excel. In this chapter, we will learn how to create table, rows and columns using various HTML table tags.
Let’s create our first table using following html table tags :
| Tags | Description |
| <table> | Create Table |
| <tr> | Create table rows |
| <td> | Create table data cells |
| border | To put border around table |
Example is explained below:
| <!DOCTYPE html> <html> <head> <title> Create first table</title> </head> <body> <table border=”2″> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table> </body> </html> |
The result will be displayed as:
| Cell 1 | Cell 2 |
In above example, we have set table border value = 2, if you don’t want to give a border set border value = 0.
Creating Table Heading :
You can create a table heading using html <th> tag. Let’s see with following example how to do this:-
| <!DOCTYPE html> <html> <head> <title> Create table heading</title> </head> <body> <table border=”2″> <tr> <th>Name</th> <th>Age</th></tr> <tr><td>Robert</td> <td>32</td> </tr> </table> </body> </html> |
The result will be displayed as:
| Name | Age |
|---|---|
| Robert | 32 |
Cellspacing and Cellpadding :
In html, cellspacing attribute is used to set width of a cell and cellpadding attribute is used to set distance between cell borders & content. Let’s learn more with below example:
| <!DOCTYPE html> <html> <head> <title> Cellspacing & cellpadding example</title> </head> <body> <table border=”2″ cellspacing = “3” cellpadding = “2”> <tr> <th>Name</th> <th>Age</th></tr> <tr><td>Robert</td> <td>32</td></tr> </table> </body> </html> |
The result will be displayed as:
Row/Column Merger:
You can merge columns and rows in a table using html ‘colspan‘ and ‘rowspan‘ attributes. Example is explained below:
| <!DOCTYPE html> <html> <head> <title> Row & column merger</title> </head> <body> <table border=”2″ > <tr> <th>S.no.</th> <th>Description</th> <th>Price</th> <tr> <tr><td>1</td> <td>Sofa</td> <td>25000<td> </tr> <tr> <td>2</td> <td>Bed</td> <td>15000<td> </tr> <tr> <td colspan = “2”> Total</td> <td>40000</td> </tr></table></body></html> |
The result will be displayed as:
| S.no. | Description | Price |
|---|---|---|
| 1 | Sofa | 25000 |
| 2 | Bed | 15000 |
| Total | 40000 | |
Background Color:
You can change the background color of a table using html ‘bgcolor‘ attribute and border color using html ‘bordercolor‘ attribute. Example is shown below:
| <!DOCTYPE html> <html> <head> <title> Background color example</title> </head> <body> <table border=”2″ bordercolor = “red” bgcolor = “grey” > <tr style=”color:blue;”> <th>S.no.</th> <th>Description</th> <th>Price</th> </tr> <tr> <td>1</td><td>Sofa</td><td>25000</td></tr> <tr> <td>2</td> <td>Bed</td> <td>15000</td></tr> <tr> <td colspan = “2”> Total</td> <td>40000</td> </tr> </table> </body> </html> |
The result will be displayed as:
| S.no. | Description | Price |
|---|---|---|
| 1 | Sofa | 25000 |
| 2 | Bed | 15000 |
| Total | 40000 | |
Height & Width:
You can set table height & width using html height & width attributes. Values can be defined either in % or in pixels. Example is shown below:
| <!DOCTYPE html> <html> <head> <title> Height & width example</title> </head> <body> <table border=”1″ height= “180” width= “250”> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Robert</td> <td>32</td> </tr> <tr> <td>Johnson</td> <td>29</td> </tr> </table> </body> </html> |
The result will be displayed as:
| Name | Age |
|---|---|
| Robert | 32 |
| Johnson | 29 |
Writing Table Caption:
You can write table caption using html <caption>..</caption> tags. It will appear on the top of the table. Following example will help you to learn more about it:
| <!DOCTYPE html> <html> <head> <title> Table caption example</title> </head> <body> <table border=”2″> <caption> This is table caption</caption> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Robert</td> <td>32</td> </tr> <tr> <td>Johnson</td> <td>29</td> </tr> </table> </body> </html> |
The result will be displayed as:
| Name | Age |
|---|---|
| Robert | 32 |
| Johnson | 29 |
HTML Nested Tables:
In html, you can put one table inside another table using <td> element. Let’s learn more about nested tables in below example:
| <!DOCTYPE html> <html> <head> <title> Table caption example</title> </head> <body> <table border=”2″> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td> <table border = “3” bordercolor= “red”> <tr> <td> Robert</td> </tr> </table> </td> <td>32</td> </tr> <tr> <td>Johnson</td> <td>29</td> </tr> </table> </body> </html> |
The result will be displayed as:
| Name | Age | |
|---|---|---|
| 32 | |
| Johnson | 29 |
Chapter Summery:
- Use html <table> tag to create tables in html.
- Use html <tr> tag to create table rows.
- Use html <td> tag to add table data.
- Use html ‘border’ attribute to add table border.
- Use html <th> tag to add table heading.
- Use html ‘Colspan’ & ‘Rowspan’ attributes to merge rows & columns.
- Use html ‘bgcolor’ attribute to define table background color.
- Use html ‘bordercolor’ attribute to define table border color.
- Use html ‘Height’ & ‘Width’ attributes to define table height & width.
- Use html <caption> tag to add table caption.
Interview Questions:
- How would you set a table alignment to left or right?
To left align your table use html element <table align=”left”>.
To right align your table use html element <table align=”right”>.
- How would you set a specific color to table border?
Table border color can be set using attribute ‘bordercolor’. Syntax for the same has been explained below:
| <table bordercolor=”red”> |
- How would you define a relationship between table border & attribute ?
Attributes are additional information about html elements. In this case, a default value of 1 pixel is added to a cell border if attribute is not used. However, if you would like to increase the border thickness, you have set attribute value to two or more.
Practice Exercise:
| <!DOCTYPE html> <html> <head> <title> Height & width example</title> </head> <body> <table border=”1″> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Robert</td> <td>32</td> </tr> <tr> <td>Johnson</td> <td>29</td> </tr> </table> </body> </html> |
In above html code,
- Change the background color of text ‘Robert’ to yellow.
- Left align the text “Jonhson”.
- Make table height = 150 and width = 250.
- Merge row one upto 3 cells.
| Click here to practice above exercise in real time HTML code editor |
|---|