The HTML tables permit web authors to arrange data like text, images, links, other tables, and so on. into rows and columns of cells.

HTML table tag


The HTML tables are made utilizing the <table> tag in which the <tr> tag is utilized to make table rows and <td> tag is utilized to make data cells. The elements under <td> are regular and left aligned by default


Example


<!DOCTYPE html>
 <html>
  <head>
   <title>HTML Tables</title>
    </head>
     <body>
      <table border = "1">
       <tr>
        <td<Row 1, Column 1</td>
         <td>Row 1, Column 2</td>
       </tr>
       <tr>
        <td>Row 2, Column 1</td> 
        <td>Row 2, Column 2</td> 
      </tr>
    </table>
  </body> 
</html>

Output

Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

Table Heading

Table heading can be characterized utilizing <th> tag. This tag will be put to supplant tag, which is utilized to address actual data cell. Ordinarily you will put your top row as table heading as displayed beneath, otherwise you can involve <th> element in any row. Headings, which are characterized in <th> tag are centered and bold naturally.


Example


<!DOCTYPE html>
 <html>
  <head>
   <title>HTML Table Header</title>
    </head>
  <body>
  	  <table border = "1">
  	   <tr>
  	    <th>Name</th>
  	     <th>Salary</th>
  	   </tr>
  	   <tr>
  	    <td>Ramesh Raman</td>
  	     <td>5000</td>
  	   </tr>
  	   <tr<
  	    <td>Shabbir Hussein</td>
  	    <td>7000</td>
  	  </tr>
   </table>
  </body>
 </html>

Output

Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000

Table Caption

The caption tag will act as a title or explanation for the table and it appears at the highest point of the table. This tag is deplored in newer version of HTML/XHTML.


Example


<!DOCTYPE html>
 <html>
  <head>
   <title>HTML Table Caption</title>
    </head>
     <body>
      <table border = "1" width = "100%">
       <caption>This is the caption</caption>
        <tr>
         <td>row 1, column 1</td>
         <td>row 1, columnn 2</td>
        </tr>
        <tr>
         <td>row 2, column 1</td>
         <td>row 2, columnn 2</td> 
         </tr>
        </table>
     </body>
   </html>

Output

This is the caption
row 1, column 1 row 1, columnn 2
row 2, column 1 row 2, columnn 2

Table Header, Body, and Footer

Tables can be isolated into three segments − a header, a body, and a foot. The head and foot are somewhat like headers and footers in a word-processed document that remain the same for each page, while the body is the really happy content holder of the table.

The three elements for isolating the head, body, and foot of a table are −

  • <thead> − to make a separate table header.
  • <tbody> − to show the main body of the table.
  • <tfoot> − to create a different table footer.

A table might contain several <tbody> elements to demonstrate various pages or groups of data. But it is notable that <thead> and <tfoot> tags should show up before <tbody>


Example

<!DOCTYPE html>
 <html>
  <head>
   <title>HTML Table</title>
  </head> 
   <body>
    <table border = "1" width = "100%">
     <thead>
      <tr>
       <td colspan = "4">
          This is the head of the table
          </td>
        </tr>
         </thead>
          <tfoot>
           <tr>
            <td colspan = "4">
             This is the foot of the table
            </td>
             </tr>
              </tfoot>
               <tbody>
                <tr<
                 <td>Cell 1</td>
                 <td>Cell 2</td>
                  <td>Cell 3</td>
                 <td>Cell 4</td>
                  </tr>
                   </tbody>
                    </table>
                </body>
     	 </html>

Output

This is the head of the table
This is the foot of the table
Cell 1 Cell 2 Cell 3 Cell 4

Specific Attributes

The HTML <table> tag also supports the following additional attributes −

Attribute Value Description
abbr abbreviated_text Deprecated − Specifies an abbreviated version of the content in a cell.
align right
left
center
justify
char		 Deprecated − Visual alignment.
bgcolor rgb(x,x,x)
#hexcode
colorname		 Deprecated − Specifies the background color of the table.
border pixels Deprecated − Specifies the border width. A value of "0" means no border.
cellpadding pixels or % Deprecated − Specifies the space between the cell borders and their contents.
cellspacing pixels or % Deprecated − Specifies the space between cells.
frame void
above
below
hsides
lhs
rhs
vsides
box
border		 Deprecated − Used in conjunction with the border attribute, specifies which side of the frame that makes up the border surrounding the table is displayed.
rules none
groups
rows
cols
all		 Deprecated − Used in conjunction with the border attribute, specifies which rules appear between the cells of the table.
summary text Deprecated − Specifies the summary of the content.
width pixels or % Deprecated − Specifies the width of the table.

Previous