HTML Creating Tables

« Prev Next »

The <table> tag enables developers to format data into rows and columns.

It’s commonly used to display information like schedules, product details, price lists, etc.

html-creating-tables

Syntax

<table >
  <tr>
    <th> </th> 
    <th> </th> 
  </tr>
  <tr>
    <td> </td> 
    <td> </td> 
  </tr> 
</table>

Table Tags

Tag Description
<table> Wraps the entire table
<tr> Table row
<td> Table data (cell)
<th> Table header cell (bold & centered)
<thead> Groups header content (optional)
<tbody> Groups body content (optional)
<tfoot> Groups footer content (optional)
border Optional attribute for table border

Example

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
    <td>Canada</td>
  </tr>
</table>
Run ›

Table Sections: <thead>, <tbody>, <tfoot>

<table border="1">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>$1000</td>
    </tr>
    <tr>
      <td>Phone</td>
      <td>$500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">End of list</td>
    </tr>
  </tfoot>
</table>
Run ›
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.