HTML Table :

The <table> tag in HTML is used to display data in rows and columns, creating a grid-like structure. Tables are ideal for presenting tabular data such as schedules, reports, or comparison charts.

A basic table consists of:

<table>: Used for the main container for the table.

<tr>: Used for table row.

<th>: Used for table header cell (bold and centered by default).

<td>: Used for table data cell.

Additional tags for structure and semantics:

<caption>: Used for table title or caption.

<thead>: Used for group header rows.

<tbody>: Used for group body rows.

<tfoot>: Used for group footer rows.

<colgroup> and <col>: Used to specify column properties.

 Supported Attributes

HTML Table Tag Attributes

Tag	Attribute	Description & Example
<table>	border	Sets table border (deprecated, use CSS). <table border="1">
<table>	cellpadding	Space inside cells (deprecated, use CSS). <table cellpadding="5">
<table>	cellspacing	Space between cells (deprecated, use CSS). <table cellspacing="2">
<table>	width	Table width (deprecated, use CSS). <table width="100%">
<table>	height	Table height (deprecated, use CSS). <table height="200">
<table>	align	Table alignment (deprecated, use CSS). <table align="center">
<tr>	align, bgcolor, valign	Row alignment and background (deprecated, use CSS). <tr bgcolor="eee">
<th>, <td>	colspan	Number of columns a cell spans. <td colspan="2">
<th>, <td>	rowspan	Number of rows a cell spans. <th rowspan="3">
<th>, <td>	headers	Associates cell with header cells. <td headers="header1">
<caption>	(global attrs)	Table caption. <caption>Monthly Sales</caption>
<colgroup>	span	Number of columns in group. <colgroup span="2">
<col>	span, width, style	Column properties. <col span="2" style="background:yellow">

Note: Most presentational attributes are deprecated. Use CSS for styling.

 Example :

<table border="1">
  <caption>Student Grades</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Math</th>
      <th>Science</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>90</td>
      <td>85</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>80</td>
      <td>88</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">End of Report</td>
    </tr>
  </tfoot>
</table>

Usage

• We use tables for tabular data, not for layout.
• We use <th> for headers, <td> for data.
• We use <caption> for a descriptive title.
• We use <thead>, <tbody>, <tfoot> for semantic grouping.
• We use <colgroup> and <col> for column styling.

 Best Practices

• We use CSS for styling (borders, spacing, colors).
• We always use <th> for headers to improve accessibility.
• We add <caption> for context.
• We group rows with <thead>, <tbody>, <tfoot> for better structure and screen reader support.
• We avoid using tables for layout; use them only for data.
• We keep tables simple and readable for better user experience.
• We use semantic HTML for accessibility and SEO.

Practice Questions : 

1) Draw following tables.

Answer :

<table border="1">
  <caption>Colspan Example</caption>
  <tr>
    <th colspan="3">Header spanning 3 columns</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
</table>


<table border="1">
  <caption>Rowspan Example</caption>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td rowspan="2">Cell spanning 2 rows</td>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
</table>


<table border="1">
  <caption>Colspan & Rowspan Example</caption>
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Scores</th>
  </tr>
  <tr>
    <td>Math</td>
    <td>Science</td>
  </tr>
  <tr>
    <td>Alice</td>
    <td>90</td>
    <td>85</td>
  </tr>
  </table>