HTML - <table> Tag

Quiz

Introduction to <table> Tag

The HTML <table> tag is used to create and structure the tabular data. It organizes the information in rows and columns, making it visually clear and easily accessible.

Tables are useful for displaying the data such as schedules, pricing plans or any dataset requiring a grid layout. The basic structure of the table includes rows(<tr>), headers(<th>) and data cells (<td>).

Syntax

Following is the syntax of HTML <table> tag −

<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).

Example : Basic Table

Let's look at the following example, where we are going to create the basic table using the <table> tag.

<!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>

Example : Table with Caption

Consider the following example, where we are going to use the <caption> tag along with the <table> tag.

<!DOCTYPE html>
<html>
<body>
<table border="1">
  <caption>Student Grades</caption>
  <tr>
    <th>Name</th>
    <th>Grade</th>
  </tr>
  <tr>
    <td>Ramesh</td>
    <td>A</td>
  </tr>
    <tr>
    <td>Suresh</td>
    <td>B</td>
  </tr>
</table>
</body>
</html>

Example : Table Alignment

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>

Example : Merging Cells

Following is teh example, where we are going to use the colspan along with the <table> tag.

<!DOCTYPE html>
<html>
<body>
<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Runs</th>
  </tr>
  <tr>
    <td>Suresh</td>
    <td>35</td>
    <td>50</td>
  </tr>
</table>
</body>
</html>

Supported Browsers

Tag
table	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page