Tables in HTML

The <table> tag defines an HTML table.

A HTML table consists of the following elements.

  • <table>
  • <tr>
  • <th>
  • <td>
  • <thead>
  • <tbody>
  • <tfoot>

<td> tag defines a standard cell in an HTML table.

An HTML table has two kinds of cells:

  • Header cells – contains header information (created with the <th>(table head) element)

  • Standard cells – contains data (created with the <td>(table data) element)

The text in <th> elements are bold and centered by default.

The text in <td> elements are regular and left-aligned by default.

Also we add border=”2″ or some other number so the border of the table appears otherwise it won’t look like a table but behave like one.

A simple table.


Colspan & Rowspan

The ‘colspan’ and ‘rowspan’ attribute is used to let the content span over multiple columns or rows! In the examples below I have given colspan=”3″  to one and to the other rowspan=”3″ that mean it is covering the space of 3 columns for colspan and 3 rows for rowspan respectively.   


What is thead, tbody, tfoot?

The <tbody> tag is used to group the body content in an HTML table.

The <tbody> element is used in conjunction with the <thead> and <tfoot> elements to specify each part of a table (body, header, footer).

Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

The <tbody> tag must be used in the following context: As a child of a <table> element, after any <caption>, <colgroup>, and <thead> elements. Now if you look carefully you will notice that where the thead element is placed does’nt matter it will display on the top of the table same goes for tfoot everything written in those tags displays below in the table and everything between tbody displays between thead and tfoot.

An Example with thead, tfoot, tbody

Caption & Colgroup

The <caption> tag defines a table caption.

The <caption> tag must be inserted immediately after the <table> tag.

The <colgroup> tag specifies a group of one or more columns in a table for formatting.

The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.

What is the use of table?

Tables are really useful elements in html. You can do some of the following thing with tables.

  • Organize data.

  • Set your form in order.

  • Set your buttons for calculator or something similar correctly(how to make a calculator  coming soon).

  • Set images.

  • Make a menu card for a restaurant etc..

End point

The end point of this post is tables are quite useful if you know how to use them, so learn them now and learn them right!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s