HTML Table, Uses of Table Tag, Table Tag Attribute

0
270
html table tag

Table

An HTML table is defined with the <table> tag. HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row. Each table row is defined with the <tr> tag.

HTML Table Tag

Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for formatting.
<col> It is used with <colgroup> element to specify column properties for each column.
<tbody> It is used to group the body content in a table.
<thead> It is used to group the header content in a table.
<tfooter> It is used to group the footer content in a table.

 

HTML Table Caption

HTML caption is displayed above the table. It must be used after table tag only.

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.

<!DOCTYPE html> 
<html>
 <head>
   <title>Table Example</title>
 </head>
 <body>
   <table>
     <caption>Result Records</caption>
     <thead>
       <tr>
         <th>Name</th>
         <th>Class</th>
         <th>Marks</th>
       </tr>
     </thead>
     <tfoot>
       <tr>
         <td>Name</td>
         <td>Class</td>
         <td>Marks</td>
       </tr>
     </tfoot>
     <tbody>
       <tr>
         <td>Ram</td>
         <td>BA</td>
         <td>60</td>
       </tr>
       <tr>
         <td>Mohan</td>
         <td>BCA</td>
         <td>80</td>
       </tr>
     </tbody>
   </table>
 </body>
</html>

Table Attribute

Option Description
border it is used to put a border across all the cells. If you do not need a border then you can use border=”0″
cellpadding it represents the distance between cell borders and the content within a cell.
cellspacing it attribute defines the width of the border.
colspan it is used to merge two or more columns into a single column.
rowspan it is used to merge two or more rows into a single row.
bgcolor set the background color for the whole table or just for one cell.
background set background image for the whole table or just for one cell.
bordercolor set border color for the whole table.
width set a table width
height set a table height

 

Border Attribute

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 border="1">
 <tr><th>Name</th><th>Class</th><th>Marks</th></tr>
 <tr><td>Ram</td><td>BA</td><td>60</td></tr>
 <tr><td>Mohan</td><td>BCA</td><td>80</td></tr>
 <tr><td>Sohan</td><td>MCA</td><td>82</td></tr>
</table>

 

Colspan Attribute

If you want to make a cell span more than one column, you can use the colspan attribute.

<table border="1" width="50%">
 <tr>
  <th>Name</th>
  <th colspan="2">Mobile No.</th>
 </tr>
 <tr>
  <td>Ajeet Maurya</td>
  <td>1234569870</td>
  <td>0258963147</td>
 </tr>
</table>

 

Rowspan Attribute

If you want to make a cell span more than one row, you can use the rowspan attribute.

<table border="1" width="50%">
 <tr><th>Name</th><td>Ajeet Maurya</td></tr>
 <tr><th rowspan="2">Mobile No.</th><td>7503520801</td></tr>
 <tr><td>9555879135</td></tr> 
</table>

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here