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 Attributes:

Attribute	Description
Border*	Specify the border width.
Bordercolor*	To change table border color.
Bgcolor*	Specifies the background color, can be used in table, tr, th, td tag.
Background*	Specifies the background image for the table.
Align*	To change table alignment. Possible values are left, center or right, default is left.
Width	To change table width, unit can be in pixel or percentage.
Height	To change table height, unit can be in pixel or percentage.
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.
Colspan	To merge two or more columns into a single column.
Rowspan	To merge two or more rows into a single row.

HTML Table Tags:

Tag	Description
caption	Defines a table caption(heading), it must be inserted immediately after the <table> tag. Caption can appears on the top or bottom of the table. Default position is top. To position caption at bottom: `<caption style="caption-side: bottom;">`
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>