Table
Table Tag
The table tag defines an HTML table.HTML table tag is used to display data in tabular format .Table tag also arrange the data in sequential manner.A table is made up of rows and columns.the intersection of each rows and columns is called as a cellThe user can represent the data in tabular format by using the <table> element in HTML.The <tr> element divides the table into rows and the <td> element specifies columns of each row.By default table does not have a border.
syntax
<table>
<tr>
<td>.........</td>
<td>.........</td>
</tr>
</table>
Table Tags
| Tags | Description |
|---|---|
| <table> | It define a table |
| <tr> | It define a table row |
| <th> | It define a table heading |
| <td> | It define a table column |
| <caption> | It define a table caption |
| <rowspan> | The rowspan attribute allow the user to span(merge) the rows. |
| <colspan> | The colspan attribute allow the user to span(merge) the cols. |
Example
<html>
<head>
<title>Table</title>
</head>
<body>
<table border="2px">
<tr>
<td>Name</td>
<td>class</td>
<td>Marks</td>
</tr>
<tr>
<td>john</td>
<td>3</td>
<td>78</td>
</tr>
<tr>
<td>Riya</td>
<td>3</td>
<td>90</td>
</tr>
</table>
</body>
</html>
Output
| Name | class | Marks |
| john | 3 | 78 |
| Riya | 3 | 90 |
Example-Table Heading
<html>
<head>
<title>Table</title>
</head>
<body>
<table border="2px">
<tr>
<th>Name</th>
<th>class</th>
<th>Marks</th>
</tr>
<tr>
<td>john</td>
<td>3</td>
<td>78</td>
</tr>
<tr>
<td>Riya</td>
<td>3</td>
<td>90</td>
</tr>
</table>
</body>
</html>
Output
| Name | class | Marks |
|---|---|---|
| john | 3 | 78 |
| Riya | 3 | 90 |
Example-Colspan Attribute
<html>
<head>
<title>Table</title>
</head>
<body>
<table border="2px">
<tr>
<td colspan="3">Records</td>
</tr>
<tr>
<th>Name</th>
<th>class</th>
<th>Marks</th>
</tr>
<tr>
<td>john</td>
<td>3</td>
<td>78</td>
</tr>
<tr>
<td>Riya</td>
<td>3</td>
<td>90</td>
</tr>
</table>
</body>
</html>
Output
| Records | ||
| Name | class | Marks |
|---|---|---|
| john | 3 | 78 |
| Riya | 3 | 90 |
Example-rowspan Attribute
<html>
<head>
<title>Table</title>
</head>
<body>
<table border="2px">
<tr>
<td rowspan="4">Records</td>
</tr>
<tr>
<th>Name</th>
<th>class</th>
<th>Marks</th>
</tr>
<tr>
<td>john</td>
<td>3</td>
<td>78</td>
</tr>
<tr>
<td>Riya</td>
<td>3</td>
<td>90</td>
</tr>
</table>
</body>
</html>
Output
| Records | ||
| Name | class | Marks |
|---|---|---|
| john | 3 | 78 |
| Riya | 3 | 90 |
Example-caption
<html>
<head>
<title>Table</title>
</head>
<body>
<caption>Table-Demo</caption>
<table border="2px">
<tr>
<td>Name</td>
<td>class</td>
<td>Marks</td>
</tr>
<tr>
<td>john</td>
<td>3</td>
<td>78</td>
</tr>
<tr>
<td>Riya</td>
<td>3</td>
<td>90</td>
</tr>
</table>
</body>
</html>
Output
| Name | class | Marks |
| john | 3 | 78 |
| Riya | 3 | 90 |
Example-Cellspacing,Cellpadding And Color
Cellspacing
Cell spacing is the space between each cell. By default the space is set to 2 pixels. To change the space between table cells, use the CSS cellspacing property on the table element
CellPadding
Cell padding is the space between the cell edges and the cell content. By default the padding is set to 0. To add padding on table cells, use the CSS cellpadding property:
<html><head>
<title>Table</title>
</head>
<body>
<caption>Table-Demo</caption>
<table border="2px" cellspacing="20" bgcolor="lightblue">
<tr>
<td>Name</td>
<td>class</td>
<td>Marks</td>
</tr>
<tr bgcolor="pink">
<td>john</td>
<td>3</td>
<td>78</td>
</tr>
<tr>
<td>Riya</td>
<td>3</td>
<td>90</td>
</tr>
<tr>
<td>Parul</td>
<td>3</td>
<td bgcolor="green">99</td>
</tr>
</table>
</body>
</html>
Output
| Name | class | Marks |
| john | 3 | 78 |
| Riya | 3 | 90 |
| Parul | 3 | 99 |
Assignment
1)
2) 