Html Table

Webpages are also making by tables. Tables are easy to learn and use, once you know about the basic table codes. Table are divided into <tr> (table rows) and td (table data) . Table row are also divided into table headings<th>. Default text alignment in the td tag is left and normal font weight. Border by default values is one, if you do not need border then change the value using border attribute border=”0”.

// Html tags for Table
<table style="width:100%" border=”0”>
  <tr>
    <td>Roll No</td>
    <td>Name</td> 
    <td>Percent</td>
  </tr>
  <tr>
    <td>0112</td>
    <td>Jackson</td> 
    <td>94%</td>
  </tr>
</table> 

Table heading

<th> tag is stand for table heading. We use table heading instead of table data. Default text alignment of the th tag is center and bold font weight.

// Using table heading in table

<table style="width:100%" border=”0”>
  <tr>
    <th>Roll No</th>
    <th>Name</th> 
    <th>Percent</th>
  </tr>
  <tr>
    <td>0112</td>
    <td>Jackson</td> 
    <td>94%</td>
  </tr>
</table> 

Cellpadding and Cellspacing Attributes

Cellpadding and cellspacing are two attributes using in table tag. Cellpadding attribute using for given space between the content of the table cell. Cellspacing attribute using for given space between horizontally and vertically cells border.

// Using cellpadding and cellspacing attribute in html elements
<table style="width:100%" border=”0” cellpadding="5" cellspacing="5">
  <tr>
    <th>Roll No</th>
    <th>Name</th> 
    <th>Percent</th>
  </tr>
  <tr>
    <td>0112</td>
    <td>Jackson</td> 
    <td>94%</td>
  </tr>
</table> 

Colspan and Rowspan Attributes

If you merge the two or more column into single column then you can use the colspan attribute. If you merge the more than one row then you can use the rowspan attribute. Colspan and Rowspan is an attribute of table cell (<th>, <td>).

//Colspan Example:

<table width=”100" border=”0” cellpadding="5" cellspacing="5">
 <tr>
    <th colspan="3">Html Test</th>
 </tr>
<tr>
    <td> Roll No </td>
    <td> Name </td> 
    <td> Percent </td>
  </tr> 
<tr>
   <td>0112</td>
    <td>Jackson</td> 
    <td>94%</td>
  </tr>
 </table> 

//Rowspan Example:

<table style="width:100%" border=”0” cellpadding="5" cellspacing="5">
  <tr>
    <th>heading</th>
    <th>heading</th> 
    <th>heading</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>
</table>

Nested tables

You can use multi table inside the table. If you make the nested table you can write the table tags inside the table cell.

// Nested table
<table style="width:100%" border=”0” cellpadding="5" cellspacing="5">
   <tr>
    <td>0112</td>
    <td>
<table style="width:100%" border=”0” cellpadding="5" cellspacing="5">
    	  <tr>
        	  <td>0112</td>
    	   <td>Jackson</td> 
    	   <td>94%</td>
  	</tr>
        </table> 
   </td> 
   </tr>
</table> 

Table Other Attribute

  • AlignAlign attribute use for horizontally align text. These attribute values are left, center, right.
  • ValignValign attribute uses for vertical align text. These attribute values are Top, Middle, Bottom.
  • BgcolorBgcolor attribute to make a background color on table or table cell.
  • BackgroundBackground attribute to make a background image on table or table cell.
  • BordercolorBordercolor attribute to make a border on table.

Leave a Comment.