Inserting tables in HTML
17:09
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.
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.
Example
<!DOCTYPE html> <html> <head> <title>HTML Tables</title> </head> <body> <table border="1"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table> </body> </html>
This will produce following result:
| Row 1, Column 1 | Row 1, Column 2 |
| Row 2, Column 1 | Row 2, Column 2 |
Here border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not need a border then you can use border="0".
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> element in any row.
Example
<!DOCTYPE html> <html> <head> <title>HTML Table Header</title> </head> <body> <table border="1"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Hakeem</td> <td>5000</td> </tr> <tr> <td>Badrul</td> <td>7000</td> </tr> </table> </body> </html>
This will produce following result:
| Name | Salary |
|---|---|
| Hakeem | 5000 |
| Badrul | 7000 |
Cellpadding and Cellspacing Attributes
There are two attribiutes called cellpadding and cellspacing which you will use to adjust the white space in your table cells. The cellspacing attribute defines the width of the border, while cellpadding represents the distance between cell borders and the content within a cell.
Example
<!DOCTYPE html> <html> <head> <title>HTML Table Cellpadding</title> </head> <body> <table border="1" cellpadding="5" cellspacing="5"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Hakeem</td> <td>5000</td> </tr> <tr> <td>Badrul</td> <td>7000</td> </tr> </table> </body> </html>
This will produce following result:
| Name | Salary |
|---|---|
| Hakeem | 5000 |
| Badrul | 7000 |
0 comments