HTML Table tag

The HTML table allows you to arrange data in a tabular (row and column) format. Data can be text, images, links, etc. The HTML tables is created using the <table> tag in which <tr> tag is used to create table row and <td> tag is used to create table data (table column).

HTML Table tag attributes:

Attribute	Description
Border	Specify the width of a border.
Bordercolor	Specify border color.
Align	To change table alignment. Possible value can be left, center or right, default is left.
Cellpadding	Cell padding represents the distance between the cell border and the content within a cell.
Cellspacing	Cell spacing specifies the space between cells in the table.
Width	To change table width in terms of pixel or percentage.
Height	To change table height in terms of pixel or percentage.
Colspan	To merge two or more columns into a single column.
Rowspan	To merge two or more rows into a single row.
Bgcolor	Specifies the background color, can be used in table, tr, th, td tag.
Background	Specifies the background image for the table.

Tags used inside HTML Table:

Tag	Description
caption	Defines a table caption(heading), it must be inserted immediately after the <table> tag. Caption text appears on the top-outside the table.
th	Specify Table Heading.

Example 1: HTML Table shows the list of developers

<table align="center" border="3px" cellpadding="10px" cellspacing="10px" width="100%"> 
   <tr> <th colspan="4">Developers List</th> </tr>
   <tr> <td>S.No.</td> <td>Developer Name</td> <td>Language</td> <td>Year</td> </tr>
   <tr> <td>1</td> <td>Berners Lee</td> <td>HTML</td> <td>1991</td> </tr>
   <tr> <td>2</td> <td>Hakon Wium Lie</td> <td>CSS</td> <td>1996</td> </tr>
   <tr> <td>3</td> <td>Brendan Eich</td> <td>JavaScript</td> <td>1995</td> </tr>
   <tr> <td>4</td> <td>Rasmus Lerdorf</td> <td>PHP</td> <td>1994</td> </tr>
   <tr> <td>5</td> <td>James Gosling</td> <td>JAVA</td> <td>1995</td></tr>
</table>

Example 2: Time-Table using table tag:

Example 3: Website layout using table tag:

Exercise 4: Periodic table using table tag:

In HTML, Table is divided into 3 parts: header, body, and footer. HTML uses the following tags to define these parts.

Tag	Description
thead	It is used to specify Header part of HTML table.
tbody	It is used to specify Body part of HTML table.
tfoot	It is used to specify Footer part of HTML table.

Example 5: Re-write the example 1 using the thead, tbody, and tfoot tag with background color.

<table align="center" border="3px" cellpadding="10px" cellspacing="10px" width="100%"> 
   <thead bgcolor="cyan">
      <tr> <td>S.No.</td> <td>Developer Name</td> <td>Language</td> <td>Year</td> </tr>
   </thead>
   <tbody bgcolor="lightgreen">
      <tr> <td>1</td> <td>Berners Lee</td> <td>HTML</td> <td>1991</td> </tr>
      <tr> <td>2</td> <td>Hakon Wium Lie</td> <td>CSS</td> <td>1996</td> </tr>
      <tr> <td>3</td> <td>Brendan Eich</td> <td>JavaScript</td> <td>1995</td> </tr>
      <tr> <td>4</td> <td>Rasmus Lerdorf</td> <td>PHP</td> <td>1994</td> </tr>
      <tr> <td>5</td> <td>James Gosling</td> <td>JAVA</td> <td>1995</td></tr>
   </tbody>
   <tfoot bgcolor="cyan">
      <tr> <th colspan="4">Web Technologies - Developers List</th> </tr>
   </tfoot>
</table>