HTML Table


Table as being very similar to a spredsheet because it is made up of rows and columns.

*openging <table> and closeing </table> tag.
  • <tr>:-for creating rows in table. starting tag is required and but ending is optional.
  • <th>:-for giving table heading usually used in first row of table. starting tag is required and but ending is optional.
  • <td>:-which specify the data in the table. starting tag is required and but ending is optional.

Attributes of <table> tag

AtrributesDescription
Alignspecify the horizontal alignment of the table can be center,right and left.
Backgroundin which we can specify the path of the image.
Bgcolorsets the background color of the table.
Bordersets the border width by default it is 0.
Bordercolorwe can specify the border color in this attribute.
Cellpaddingsets the spacing between the cell walls and cell contents.
CellspacingGives the distance between cells.
HeightGives the height of the whole table.
Widthsets the width of the table.

Attributes of <tr> tag

AtrributesDescription
Alignalins the text horizontally center,right and left
Bgcolorgives color to the row in the table.
Bordercolorsets the external border color of the row.
Valignsets the vertical alignment of the text i.e. bottom,baseline and middle.

Attributes of <th> & <td> tag

AtrributesDescription
Alignhorizontal alignment of the text.
BackgroundSpecify the background image for the table cell.
BgcolorSets the background color of the table cell.
BordercolorSets the external bordercolor for the cell.
ColspanIndicates how many cell columns of the table this cell should span.
ValignVertically aligns the text in cell.
Height and widthSets the height and width of the cell
RowspanIndicates how many rows of the table this cell should span.

HTML TABLE Example

<html> 
 <head>  
  <title> Welcome to HTML Tutroial </title> 
 </head>  
 <body>
  <table border="1px">
   <tr>
    <td>Row 1 , Column 1</td>
    <td>Row 1 , Column 1</td>
   </tr>
   <tr>
    <td> Row 1 , Column 1 </td>
    <td>Row 1 , Column 1</td>
   </tr>
  </table>
  </body>  
</html>
Output
Row 1 , Column 1Row 1 , Column 1
Row 1 , Column 1 Row 1 , Column 1

Table Heading

Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise you can use <th> element in any row.

Example

 <table border="1px">
     <tr><th>Student Name</th><th>Age</th></tr>
     <tr><td>Deepak Kumar</td><td>18</td></tr>
     <tr><td>Soun Yadav</td><td>23</td></tr>
 </table>
Output
Student NameAge
Deepak Kumar18
Soun Yadav23

Cellpadding and Cellspacing Attributes

There are two attribiutes called cellpadding and cellspacing which you will use to adjust the white space in your table cells.

The cellspacing attribute defines the width of the border.

The cellpadding represents the distance between cell borders and the content within a cell.

Example

<table border="1px" cellspacing="10" cellpadding="10" >
     <tr><th>Student Name</th><th>Age</th></tr>
     <tr><td>Deepak Kumar</td><td>18</td></tr>
     <tr><td>Soun Yadav</td><td>23</td></tr>
 </table>
Output
Student NameAge
Deepak Kumar18
Soun Yadav23

Colspan and Rowspan Attributes

You will use colspan attribute if you want to merge two or more columns into a single column.

Similar way you will use rowspan if you want to merge two or more rows.

Example

         <table border="1px">
               <tr>
               <td>Column 1</td>
               <td>Clumn 2</td>
               <td>Column 3</td>
               </tr>
               <tr>
               <td rowspan="2"> Row 1 , Column 1 </td> 
               <td> Row 1 , Column 2 </td>
               <td> Row 1 , Column 3 </td>
               </tr>
               <tr>
               <td> Row 2 , Column 2 </td>
               <td>Row 2 , Column 3</td>
               </tr>
               <tr>
               <td colspan="3"> Row 3 , Column 1 </td>
               </tr>
          </table>
Output
Column 1Clumn 2Column 3
Row 1 , Column 1 Row 1 , Column 2 Row 1 , Column 3
Row 2 , Column 2 Row 2 , Column 3
Row 3 , Column 1

Tables Backgrounds

You can set table background using one of the following two ways:

bgcolor attribute - You can set background color for whole table or just for one cell.

background attribute - You can set background image for whole table or just for one cell.

You can also set border color also using bordercolor attribute.

Example

         <table border="5"  bgcolor="blue" bordercolor="Red"> 
               <tr>
               <td>Row 1 , Column 1</td>
               <td>Row 1 , Column 1</td>
               </tr>
               <tr>
               <td> Row 1 , Column 1 </td>
               <td>Row 1 , Column 1</td>
               </tr>
          </table>
Output
Row 1 , Column 1 Row 1 , Column 1
Row 1 , Column 1 Row 1 , Column 1

Tables Backgrounds image

Example

         <table border="5"  background="../logo.png" bordercolor="black"> 
               <tr>
               <td>Row 1 , Column 1</td>
               <td>Row 1 , Column 1</td>
               </tr>
               <tr>
               <td> Row 1 , Column 1 </td>
               <td>Row 1 , Column 1</td>
               </tr>
          </table>
Output
 
Row 1 , Column 1Row 1 , Column 1
Row 1 , Column 1 Row 1 , Column 1

Table Height and Width

You can set a table width and height using width and height attrubutes. You can specify table width or height in terms of pixels or in terms of percentage of available screen area.

Example

         <table border="5"  width="100px" height="50px" bordercolor="black"> 
               <tr>
               <td>A</td>
               <td>B</td>
               </tr>
               <tr>
               <td>C </td>
               <td>D</td>
               </tr>
          </table>
Output
A B
C D

Table Caption

The caption tag will serve as a title or explanation for the table and it shows up at the top of the table. This tag is depracated in newer version of HTML/XHTML.

Example

<table border="2"   bordercolor="black"> 
             <caption>This is Caption</caption>
               <tr>
               <td>A</td>
               <td>B</td>
               </tr>
               <tr>
               <td>C </td>
               <td>D</td>
               </tr>
          </table>
Output
This is Caption
A B
C D

Table Header, Body, and Footer

Tables can be divided into three portions: a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.

The three elements for separating the head, body, and foot of a table are:

  • <thead> - to create a separate table header.
  • <tbody> - to indicate the main body of the table.
  • <tfoot> - to create a separate table footer.ss
A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody>

Example

<table border="2" bordercolor="black" width="100%" > 
               <thead>
               <tr>
               <td colspan="3">This is the head of the table</td>
               </tr>
               </thead>
               <tfoot>
               <tr>
               <td colspan="3">This is the foot of the table</td>
               </tr>
               </tfoot>
               <tbody>
               <tr>
               <td>A</td>
               <td>C</td>
               <td>C</td>
               </tr>
               </tbody>
          </table>
Output
This is the head of the table
This is the foot of the table
A C D

Share this article on