Table Tag

HTML Table Tag

Table Tag in HTML

The <table> tag in HTML is used to create a table with rows and columns. It is a container tag that holds other elements like <tr> (row), <th> (header cell), and <td> (data cell). Tables are useful for displaying structured data such as timetables, schedules, and reports.

Basic Terminologies

• <tr> → defines a table row
• <th> → defines a header cell (bold and centered by default)
• <td> → defines a data cell
• <thead> → groups header rows
• <tbody> → groups body rows
• <tfoot> → groups footer rows
• <caption> → adds a caption/title for the table
• rowspan → makes a cell span multiple rows
• colspan → makes a cell span multiple columns

Simple Table Example

<table border="1" style="border-collapse:collapse; width:60%;">
   <tr>
       <th>First Name</th>
       <th>Last Name</th>
   </tr>
   <tr>
       <td>Avneet</td>
       <td>Kaur</td>
   </tr>
   <tr>
       <td>Aman</td>
       <td>Sharma</td>
   </tr>
</table>
  

Example with thead, tbody, tfoot, colspan, and caption

<table border="1" style="border-collapse:collapse; width:70%;">
   <caption>My Table</caption>
   <thead style="background-color:antiquewhite;">
      <tr>
         <th>First Name</th>
         <th>Last Name</th>
      </tr>
   </thead>
   <tbody>
      <tr><td>Avneet</td><td>Kaur</td></tr>
      <tr><td>Aman</td><td>Sharma</td></tr>
      <tr><td colspan="2">Merged Cell across 2 columns</td></tr>
   </tbody>
   <tfoot style="background:#f9e79f;">
      <tr><td colspan="2">Footer</td></tr>
   </tfoot>
</table>
  

Example Output