HTML Table Tag with Cell Colors

Explanation of the Table Structure

The <table> tag in HTML is used to display data in a tabular format. It organizes information into rows and columns, making it easier to read and understand. The basic structure of a table includes the following tags:

• <table>: Defines the start of the table.
• <tr>: Defines a row in the table.
• <th>: Defines a table header cell, typically used for column titles.
• <td>: Defines a standard table cell, used for regular data.
• cellpadding: Defines the space between the cell content and the cell border.
• cellspacing: Defines the space between the individual cells.
• border: Defines the thickness of the table border.
• style: Used for additional styling (like color, border, etc.).

How the Table is Used

HTML Table Structure: The <table> tag defines the table, and each row is enclosed within the <tr> tags. Inside each <tr>, the <th> tags represent header cells (usually used for titles like "Roll No," "Full Name," etc.). Inside the body rows, the <td> tags represent the actual data values.

Attributes:

• cellpadding="50": Adds space inside the cells.
• cellspacing="20": Adds space between the individual cells.
• border="1": Specifies a border thickness of 1 pixel around the table.
• style="border:2px solid red": Specifies an additional red border around the table with 2-pixel thickness.

About the <th> Tag

The <th> (table header) tag is used to define header cells in a table. These header cells are typically used for column titles and are bold by default. The <th> tag is an essential part of organizing tabular data as it helps identify the content of each column. You can style <th> elements to make them visually distinct using CSS. In this example, the <th> tags have been styled with a background color of #46b7d5, which gives them a blue color.

Example:

Here is the definition of a <th> tag with a background color:

<th style="background-color:#46b7d5;">Roll No</th>

In the above code, the <th> tag is used to define a table header cell, and the inline CSS background-color:#46b7d5; is applied to give it a blue background.

Rendered Table Example

Roll No	Full Name	Mobile No	Std	Div
101	xyx abc dgf	1234567898	VI	C
102	abc xyx dgf	9852647528	VI	C
103	dgf abc xyz	9852647528	VI	C