Loading
Tables in HTML are used to display data in a structured, tabular format using rows and columns. Each piece of data is placed inside a cell, which is the intersection of a row and a column.

Common Table Tag
TagDescription
<table>Defines a table
<tr>Defines a row in a table
<th>Defines a header cell (bold and centered by default)
<td>Defines a standard cell
<caption>Adds a title/caption to the table
<colgroup>Groups columns for formatting
<col>Specifies column properties inside <colgroup>
<thead>Groups header content
<tbody>Groups the main body content
<tfoot>Groups footer content

Example: Basic table example
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Basic Table</title>
 </head>
 <body>
  <table border="1">
    <tr>
     <th>Student Name</th>
     <th>Marks</th>
    </tr>

    <tr>
     <td>Prince</td>
     <td>56</td>
    </tr>

    <tr>
     <td>Rahul</td>
     <td>59</td>
    </tr>
  </table>
 </body>
</html>

Output:
Uploaded Image


Table Rows ( <tr> )
The <tr> tag is used to define a row in the table. It wraps around cells defined with <td> or <th>.

Example:
<!DOCTYPE html>
<html>
 <head>
  <title>Table Rows</title>
 </head>
 <body>
  <table border="1">
   <tr>
    <td>Row1, Cell1</td>
    <td>Row1, Cell2</td>
    <td>Row1, Cell3</td>
   </tr>

   <tr>
    <td>Row2, Cell1</td>
    <td>Row2, Cell2</td>
    <td>Row2, Cell3</td>
   </tr>
  </table>
 </body>
</html>

Output:
Uploaded Image


Table Cells ( <td> )
Each <td> tag represents a data cell within a table row. It is used for actual content in non-header cells.

Example:
<!DOCTYPE html>
<html>
 <head>
  <title>Table Cells</title>
 </head>
 <body>
  <table border="1">
   <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
   </tr>
  </table>
</body>
</html>

Output:
Uploaded Image


Table Headers ( <th> )
The <th> tag is used to define header cells. These are bold and centered by default, and usually appear in the first row.

Example:
<!DOCTYPE html>
<html>
 <head>
  <title>Table Headers</title>
 </head>
 <body>
  <table border="1">
   <tr>
    <th>Head 1</th>
    <th>Head 2</th>
    <th>Head 3</th>
   </tr>
   <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
    <td>Row 1, Cell 3</td>
   <tr>
  </table>
 </body>
</html>

Output:
Uploaded Image


Key Point
  • Always use <thead> and <tbody> for better structure and accessibility.
  • The <th> tag gives emphasis to headers with default styling.
  • Use CSS for borders and spacing for a cleaner look.
  • Use <caption> to describe the purpose of your table.