This tag is use to create table in which we represent data in tabular formatted. Each table row is define with the “tr” tag. A table header is define with the “th” tag. A table data cell is define with the “td” tag is knows as HTML Table.
Attribute
- Align
- horizontal alignment is controlled by the ALIGN attribute. It can be set to left, right, center, justify or inherit.
- Valign
- controls the vertical alignment of cell content. It accepts the value top, middle, or bottom.
- Width
- set the width to specific number of pixels.
- Height
- set the height to specific number of pixels.
- Cellpadding
- controls the distance between the data in a cell and the boundaries of the cell.
- Cellspacing
- controls the distance between adjacent cells.
- Colspan
- this attribute is used to inside a <th><td> tag. It is used to marge two or more than column.
- Rowspan
- this attribute is used to marge two or more than row.
Table Tag Syntax
<html>
<body>
<table>
<tr>
<th>......</th>
<th>.....</th>
</tr>
<tr>
<td>....</td>
<td>....</td>
</tr>
<tr>
<td>.....</td>
<td>....</td>
</tr>
</table>
</body>
</html>
For Example
<html>
<head></head>
<body>
<h1>marksheet</h1>
<table border="1" width="80%%" height="40%"align="center">
<tr bgcolor="red" >
<th colspan="2">english</th>
<th>mathematics</th>
<th>operating system</th>
<tr bgcolor="green" align="center">
<td colspan="2" width="30%">80</td>
<td>70</td>
<td>89</td>
<tr bgcolor="pink"width="50px" height="60px" align="center">
<td colspan="2">40</td>
<td>50</td>
<td>49</td>
</tr>
</tr>
</tr>
</body>
</html>
OUTPUT
Table Tags
Tag | Description |
table | Defines a table. |
th | Defines a header cell in a table. |
tr | Defines a row in a tables. |
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. |
td | Defines a cell in a table |
Nested Tables
The nested table in HTML means making a table on a page inside another table on a similar web page is knows as Nested Tables.
<html>
<head>
<title>phone</title>
</head>
<body>
<center>
<table border="4px" cellspacing="5px" cellpadding="3px" height="250px" width="50%" bordercolor="red" >
<tr>
<th rowspan="2">brower</th><th colspan="2">visitors</th>
</tr>
<tr>
<th>number</th><th>percentag</th>
<tr>
<tr align="center">
<th>mozilla firefox</th><td>163</td><td>59%</td>
</tr>
<tr align="center">
<th>google chrome</th><td>78</td><td>59%</td>
</tr>
<tr align="center">
<th>safari</th><td>35</td><td>13%</td>
</tr>
</body>
</html>
Output
If you have any queries regarding this article or if I have missed something on this topic, please feel free to add in the comment down below for the audience. See you guys in another article.
To know more about HTML table tags please check Wikipedia link Click here.
Stay Connected Stay Safe. Thank you.
0 Comments