Tables in HTML:

In common language everybody knows “what is table?” A table is nothing but a data structure arranges or organizes information into rows in columns. In HTML to display data in tabular form <table> opening tag and </table> closing tag are used.
In HTML table element consist basic two tags :

  • <tr></tr> :- is for table row
  • <td></td> :- is for table column

Syntax:

This is a basic structure of a table:

Example:

Table with Heading:

When you run above example there is no heading on table. In <table> tag you can use <th> and </th> tag to give heading to the columns. The text written between <th> and </th> get bold.

Example:

Border attribute in Table:

In HTML when you use <table> tag it will not display any border by default. So you have to apply border attribute to table. The value which you assign border is the thickness of that border.

Example:

Rowspan attribute in Table:

The rowspan attribute is used when you want to merge two or more rows in a row.

Example:

Colspan attribute in Table:

The colspan attribute is used when you want to merge two or more columns in a columns.

Example:

Cellspacing and Cellpadding in Table:

In a table cellspacing and cellpadding is used to adjust the spacing between cells. The cellpadding attribute defines the space between the cell content and cell border. And the cellspacing attribute defines the space between cells.

Example:

Following example is for Cellspacing:

Example:

Following example is for Cellpading:

Note:

Also try example with “0(zero)” value.

Background Color Property in Table:

We can also give color to a table. Also you can apply background color to specified cell. You can also apply color to border.Following example will help you to understand it.

Example:

Table with Height and Width :

We can also set the height and width of a table. You can set height and width in pixel and also by “%”. If you set width to 100% then it will viewed in full page.

Example:

In following example we gave height and width in pixel

Example:

In following example we gave width in percentage

Table with Caption:

The <caption> and </caption> tag is used to provide heading to table. You have to write this tag just after <table> tag. The text written within this tag will display at the top of the table and in center.

Example:

Nested Table:

You can also make no. of tables inside a table. Also you can use HTML tags inside a table. Following example will help you to create a nested table.

Example:

Table with Header, Body and Footer:

A table can be divided into three parts : a header of table, a body of table and a footer of table. To do that three tags are available in HTML they are as follows:

  • <thead> : used to create header of table
  • <tbody> : main part of table used to group the content
  • <tfoot> : used to create footer of table

Note:

Always insert <thead> and <tfoot> before <tbody> tag.

Example:

In following example we gave different background color to header, body and footer so it will help you to understand difference them.

 

One response to “Tables in HTML”

  1. Senior Kim says:

    Wow! This could be one of the most beneficial blogs we’ve ever come across on thesubject. Actually excellent article! I’m also a specialist in this topic so I can understand your hard work.

Leave a Reply

Your email address will not be published. Required fields are marked *