Table of Contents
<Table> tag
- HTML table tag is used to display data in tabular form (row * column).
- There can be many columns in a row.
- <table> tag makes use of <tr> , <td>, and <th> elements to create a table.
- In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.
Example:
<table border>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>State</th>
</tr>
<tr>
<td>Mary</td>
<td>Kom</td>
<td>Manipur</td>
</tr>
<tr>
<td>Neeraj</td>
<td>Chopra</td>
<td>Hariyana</td>
</tr>
<tr>
<td>PV</td>
<td>Sindhu</td>
<td>Kerala</td>
</tr>
<tr>
<td>Mirabai</td>
<td>Chanu</td>
<td>Manipur</td>
</tr>
</table>- The above table contains 5 rows & 3 columns = 15 values
- Result
| First Name | Last Name | State |
|---|---|---|
| Mary | Kom | Manipur |
| Neeraj | Chopra | Hariyana |
| PV | Sindhu | Kerala |
| Mirabai | Chanu | Manipur |
Attributes of <Table>
- border: It specifies the border of HTML table. E.g. <table Border=”2”>
- align: It specifies the visual alignment of table. It can be right, left, center, justify, char.
- E.g. <table align=”center”>
- bgcolor: It specifies the background color of the table. E.g. <table bgcolor=”cyan”>
- background: It specifies the background color of table or just for one cell.
- E.g. : <table background=”test.png”>
- width: It specifies the width of the table in pixels of %
- height: It specifies the height of the table in pixels of %
- bordercolor: It specifies the border color of entire table. You can use a proper colorname or rgb format or hexcode. E.g. <table border=”10” bordercolor=”red”>.
- If you don’t specify the border property, you don’t get bordercolor.
- bordercolorlight: It shows the border color of table in 3D like effect, where the color appears on the left & top side of the table.
- It only appears in Internet Explorer.
- E.g. <table border=10 bordercolorlight=”red”>
- bordercolordark: It shows the border color of table in 3D like effect, where the color appears on the left & top side of the table.
- It only appears in Internet Explorer.
- E.g. <table border=10 bordercolordark=”red”>
<td> & <th> tags
- An HTML table has two kinds of cells:
- Header cells – contains header information (created with the <th> element)
- Data cells – contains data (created with the <td> element)
- The text in <td> elements is regular and left-aligned by default.
- The text in <th> elements are bold and centered by default.
- cellspacing: It specifies the space between cells.
- cellpadding: It specifies the space between the cell borders and their contents.
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "3" bordercolor=darkgray bgcolor=beige cellpadding = "10" cellspacing = "15">
<tr>
<th>Name</th>
<th>City</th>
</tr>
<tr>
<td>Dhyan Chand</td>
<td>Prayagraj</td>
</tr>
<tr>
<td>Milkha Singh</td>
<td>Chandigrah</td>
</tr>
</table>
</body>
</html>- Result
| Name | City |
|---|---|
| Dhyan Chand | Prayagraj |
| Milkha Singh | Chandigrah |