HTML Tables:

HTML Tables
are used to organize and display data in rows and columns.

Basic Structure:

<table>:
Encloses the entire table.

<tr>:
Defines a table row (horizontal line).

<td>:
Defines a table cell (individual data point).

<th>:
Defines a table header cell (bolder and centered text, typically used for
column labels).

Example:

Output:

Additional Tags:

<caption>:
Adds a caption to the table (e.g., for titles or summaries).

<thead>:
Groups header rows.

<tbody>:
Groups body rows.

<tfoot>:
Groups footer rows.

<colgroup>:
Groups columns for formatting.

Example:

Output:

Output:

In this example:

<table
border=”1″>: This opens a table element with a border attribute
set to 1, creating a visible border around the table.

<caption>Product
Information</caption>: This adds a caption to the table, providing a title
of “Product Information” above the table.

<thead>:
This marks the beginning of the table header section, which is used to define
column headers.

<tr>:
This starts a table row within the header section.

<th>ID</th>:
This defines a header cell with the content “ID.”

<th
colspan=”2″>Product</th>: This defines a header cell with
the content “Product” and uses colspan=”2″ to span this
cell across two columns.

<th>Price</th>:
This defines another header cell with the content “Price.”

</tr>:
This closes the header row.

</thead>:
This marks the end of the table header section.

<tbody>:
This marks the beginning of the table body section, which is used to contain
the actual data rows.

<tr>:
This starts a data row within the body section.

<td>1</td>:
This defines a data cell with the content “1.”

<td
colspan=”2″>Laptop</td>: This defines a data cell with the
content “Laptop” and spans it across two columns.

<td>$1000</td>:
This defines another data cell with the content “$1000.”

</tr>:
This closes the first data row.

Similar
rows and cells follow for the other two products (Smartphone and Headphones)
within the <tbody> section.

</tbody>:
This marks the end of the table body section.

</table>:
This closes the table element.

Key Points:

 Tables are ideal for displaying tabular data in a structured format

  Use CSS to style tables, including borders, cell padding, alignment, and more

  Ensure proper semantic structure for accessibility and screen readers

  Consider responsiveness for optimal viewing on different devices.