Table with Header and Footer

     

  • Define the structure of "Table" which consists of classification as "thead,tfoot,tbody":

    •  

     

  • <thead>header of the table
  • <tfoot>footer of the table
  • <tbody>body of the table

    • Note:<thead> and <tfoot> should consider before <tbody> while writing the code.

     

    <html>
    <head>
    <title>HTML table with Caption</title>
    </head>
    <body>
    <center>
    <table border="2" width="500" bordercolor="red">
    <thead>
    <tr>
    <td bgcolor="lightyellow" colspan="4"><center>I am header of this table</center></td>
    </tr>
    </thead>
    <tfoot>
    <tr>
    <td bgcolor="lightpink"colspan="4"><center>I am footer of this table</center></td>
    </tr>
    </tfoot>

    <tbody>
    <tr>
    <th>Fruit</th>
    <th>Price</th>
    <th>Quatity</th>
    <th>Location</th>
    </tr>
    <tr>
    <td>Apple</td>
    <td>70</td>
    <td>880</td>
    <td>South</td>
    </tr>
    <tr >
    <td>Banana</td>
    <td>82</td>
    <td>650</td>
    <td>North</td>
    </tr>
    <tr>
    <td>Orange</td>
    <td>85</td>
    <td>715</td>
    <td>East</td>
    </tr>
    <tr >
    <td>Papaya</td>
    <td>85</td>
    <td>815</td>
    <td>West</td>
    </tr>
    </tbody>
    </table>
    </center>
    </body>
    </html>

     

     

    Output:
    I am header of this table
    I am footer of this table
    Fruit Price Quatity Location
    Apple 70 880 South
    Banana 82 650 North
    Orange 85 715 East
    Papaya 85 815 West

    Download The Coding Along With Web Page