...

Web Technologies - HTML

Back to Course

Lesson Description


Lession - #157 HTML Tables


Tables, for example, can be divided into rows and columns of cells. The table> element is used to generate HTML tables, with the <tr> tag used to produce table rows and the td> tag used to create data cells. By default, the components under <td> are regular and left aligned.
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>

Here, the border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not need a border, then you can use border = "0".

Table Heading

The <th> tag may be used to define the table heading. This tag will be used to replace the <td> tag, which represents the actual data cell. Normally, your top row will be used as the table header, as illustrated below, but you may use the th> element in any row. By default, headings declared in the <th> tag are centred and bold.
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>

Cellpadding and Cellspacing Attributes

Cellpadding and cellspacing are two characteristics that you will utilise to alter the white space in your table cells. The cellspacing property specifies the distance between table cells, whereas cellpadding specifies the distance between cell borders and the content within a cell.
Example

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Cellpadding</title>
   </head>
    
   <body>
      <table border = "1" cellpadding = "5" cellspacing = "5">
         <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>

Colspan and Rowspan Attributes

If you wish to combine two or more columns into a single column, use the colspan property. If you wish to combine two or more rows, use rowspan in the same way.
Example

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Colspan/Rowspan</title>
   </head>
    
   <body>
      <table border = "1">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
    
</html>

Tables Backgrounds

You may change the backdrop of a table in one of two ways: −
• bgcolor property − You may change the background colour of the entire table or just one cell.
• background attribute − You may set a background picture for the entire table or for a single cell.
You may also use the bordercolor parameter to change the colour of the border.
Note − The bgcolor, background, and bordercolor attributes deprecated in HTML5. Do not use these attributes.
Example

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Background</title>
   </head>
    
   <body>
      <table border = "1" bordercolor = "green" bgcolor = "yellow">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
    
</html>

Here is an example of using background attribute. Here we will use an image available in /images directory.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Background</title>
   </head>
    
   <body>
      <table border = "1" bordercolor = "green"
       background = "/images/test.png">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
    
</html>

Table Height and Width

A table's width and height may be specified using the width and height attributes. You may choose the table's width and height in pixels or as a percentage of the available screen area.
Example

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Width/Height</title>
   </head>
    
   <body>
      <table border = "1" width = "400" height = "150">
         <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>

Table Caption

The caption tag, which appears at the top of the table, serves as a title or explanation for the table. In recent HTML/XHTML versions, this tag is deprecated.
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>


Table Header, Body, and Footer

Tables are separated into three sections: a header, a body, and a footer. The head and foot are comparable to headers and footers in a word-processed document in that they are the identical for every page, whereas the body is the table's main content holding.
The three parts that separate a table's head, body, and foot are −br> • thead> −it is used to construct a separate table header.
• tbody> − used to denote the table's main body.
• tfoot> − use to create a separate table footer

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

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


Nested Tables

You may put one table within another. You may use practically all of the tags inside the table data tag, not only tables. <td>.
Example
Following is the example of using another table and other tags inside a table cell.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
    
   <body>
      <table border = "1" width = "100%">
         
         <tr>
            <td>
               <table border = "1" width = "100%">
                  <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>
            </td>
         </tr>
         
      </table>
   </body>
    
</html>