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.

Home Page - Basic Engineer
Home Page – Basic Engineer

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

example of table tag
Example Of Table Tag
TagDescription
tableDefines a table.
thDefines a header cell in a table.
trDefines a row in a tables.
CaptionDefines a table caption.
colgroupSpecifies a group of one or more columns in a table for formatting.
colSpecifies column properties for each column within a <colgroup>element.
theadGroups the header content in a table.
tbodyGroups the body content in a table.
tfootGroups the footer content in a table.
tdDefines 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

example of nested table
Example of Nested Table

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.


Basic Engineer

Hey Readers! We have more than fifteen years of experience in Software Development, IoT, Telecom, Banking, Finance and Embedded domain. Currently we are actively working on Data Science, ML and AI with multiple market leaders worldwide. Happy Reading. Cheers!

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *