HTML - <table> Tag

HTML <table> tag used to build HTML tables. The table data is left aligned by default. HTML table offers a mechanism to define or derive data in terms of rows and columns of cells, including text, photos, links, and other types of data.

HTML <table> element, along with one or more <tr>, <th>, and <td> elements, make up an HTML table. A table row is defined by the <tr >element, a table header is defined by the <th> element, and a table cell is defined by the <td> element. To control the page's layout, such as the header section, navigation bar, body text, and footer section.

Syntax

<table>
  .....
</table>

Attribute

HTML table tag supports Global and Event attributes of HTML. Bellow mentioned attributes are deprecated so use CSS properties rather using these attributes.

Attribute	Value	Description
align	left right center justify	Specifies the alignment of text content(Deprecated).
bgcolor	color	Specifies the background color of each column cell(Deprecated).
border	pixels	Specifies the the border surrounding the table.(Deprecated).
cellpadding	pixels	space between the content of a cell and its border(Deprecated).
cellspacing	pixels	Specifies the size of the space between two cells.(Deprecated).
frame	void above below hsides vsides lhs rhs box border	Specifies the side of the frame surrounding the table must be displayed(Deprecated).
rules	none groups cols all	Defines where rules (borders) are displayed in the table(Deprecated).
summary	text	Specifies an alternative text that summarizes the content of the table(Deprecated).
width	pixels	Specifies width of the table(Deprecated).

Examples of HTML table Tag

Bellow examples will illustrate the usage of table tag. Where, when and how to use table tag and how to style the a table.

Creating Simple Table

Let's consider the following example, where we are going to construct a simple table.

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 2px solid #6C3483;
      }
   </style>
<body>
   <table>
      <tr>
         <th>Employee</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>Maya</td>
         <td>32k</td>
      </tr>
      <tr>
         <td>Raju</td>
         <td>25k</td>
      </tr>
      <tr>
         <td>Rahul</td>
         <td>20k</td>
      </tr>
   </table>
</body>
</html>

Padding on Table

Considering the another scenario, where we are going to add padding to the table

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 2px solid #82E0AA;
      }
      th,
      td {
         padding: 11px;
      }
   </style>
<body>
   <table>
      <tr>
         <th>Cars</th>
         <th>Owners</th>
      </tr>
      <tr>
         <td>BMW</td>
         <td>Raju</td>
      </tr>
      <tr>
         <td>RS7</td>
         <td>Ravi</td>
      </tr>
      <tr>
         <td>Audi</td>
         <td>Maya</td>
      </tr>
   </table>
</body>
</html>

Table alignment using CSS

In the following example, we are going to use the CSS property to make the table align to the right.

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 2px solid #ABEBC6;
      }
   </style>
<body>
   <table style="float:right">
      <tr>
         <th>Team</th>
         <th>Points</th>
      </tr>
      <tr>
         <td>CSK</td>
         <td>16</td>
      </tr>
      <tr>
         <td>MI</td>
         <td>14</td>
      </tr>
      <tr>
         <td>RR</td>
         <td>14</td>
      </tr>
      <tr>
         <td>KKR</td>
         <td>12</td>
      </tr>
   </table>
   <p><br><br>
      The Indian Premier League is a men's Twenty20 cricket 
      league that is annually held in India and contested by 
      ten city-based franchise teams. The BCCI founded the 
      league in 2007.
   </p>
</body>
</html>

Table Background Color

Following is an example where we are going to add background colour to the table.

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1px solid #6C3483;
      }
   </style>
<body>
   <table style="background-color:#ABEBC6 ">
      <tr>
         <th>Owner</th>
         <th>Pet</th>
      </tr>
      <tr>
         <td>Maya</td>
         <td>Cat</td>
      </tr>
      <tr>
         <td>Raju</td>
         <td>Dog</td>
      </tr>
      <tr>
         <td>Ravi</td>
         <td>Pomeranian</td>
      </tr>
   </table>
</body>
</html>

Supported Browsers

Tag
table	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm