Tutorial Manthra

HTML tables are used to arrange data into tabular format. You can arrange data into rows and columns.

The tag used to create table in Html is <table> and the tag <tr> is used to create rows and <td> is created using date cells. The elements under <td> are regular and left aligned by default

The table starts with <table> opening tag and ends with </table> closing tag. Each <table> tag should have at least one <tr> tag. And the cells are created inside the <tr>….</tr> tags and each <tr> tag should have at least one <td> tag. The date is entered into <td>…..</td> tag.

Note: Html table is slow compared to div. So only use tables to arrange tabular date. Do not use tables to create layouts.

The table cells can contain any type of data like text, images, links, other tables or anything else.

Here we use an attribute border to put a border across all the cells. The value can be a number. 0 means no border.

Example

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

Output

Table Heading

You can define a table heading using the <th> tag. <th> tag is a table cell tag and it hold the actual data. The <th> tag will be used to replace the <td> tag. You can use the <th> tag in any row if you want but normally it is used in the top row as table heading. The contents of the tags are catered and bold by default.

Example

<table border = "1">
         <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Phone</th>
         </tr>
         <tr>
            <td>Tom</td>
            <td>Address</th>
            <td>12345</td>
         </tr>
</table>

Output

Table Header, Body, and Footer

A table can also be divided into three portions. A header, body and footer. The header is  for creating a header for the table and the footer is for creating a footer for the table. The body holds the actual content holder of the table.

<thead> − is used to create a separate table header.

<tbody> − is used to indicate the main body of the table.

<tfoot> − is used to create a separate table footer.

The header and footer i.e. the <thead> and <tfoot> should appear before the body and note that a table can have several <tbody> elements to indicate different pages or different groups of data.

Example

<table border = "1" width = "100%">
         <thead>
            <tr>
               <th>Heading 1</th>
               <th>Heading 2</th>
               <th>Heading 3</th>
               <th>Heading 4</th>
            </tr>
         </thead> 
         <tfoot>
            <tr>
               <td>Footer 1</td>
               <td>Footer 2</td>
               <td>Footer 3</td>
               <td>Footer 4</td>
         </tfoot> 
         <tbody>
            <tr>
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
               <td>Cell 4</td>
            </tr>
         </tbody> 
      </table>

Output

Cellpadding and Cellspacing Attributes

Cellpadding and cellspacing are two attributes are used to adjust the spacing between table cells.

The cellpadding is used to adjust space between the cells in the table.

The cell spacing is used to adjust the space between cell border and data inside the cell.

Example

<table border = "1" cellpadding = "6" cellspacing = "3">
         <tr>
            <th>Subject</th>
            <th>Mark</th>
         </tr>
         <tr>
            <td>English</td>
            <td>80</td>
         </tr>
</table>

Output

 Colspan and Rowspan Attributes

The colspan and rowsan attributes are used to create cells which span more than one column or rows means the cells take up space of more than one row or column.

The colspan attribute is used to make cells span more than one columns.

The rowspan attribute is used to make cells that span more than one row.

Colspan Example

<table border = "1">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td colspan = "2">Row 2 Cell 1</td>
            <th>Column 3</th>
         </tr>
</table> 

Output

Rowspan Example

<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>
</table>

Output

Table Backgrounds

You can set a background for your table using bgcolor attribute or background attribute. The bordercolor attribute is used to set the colour of the table border.

Using bgcolor attribute you can set a color the whole table, a particular row or a particular cell.

Similarly using background attribte you can set a background image for the whole table, a particular row, or a particular cell.

Note : The bgcolor, background, and bordercolor attributes deprecated in HTML5. Do not use these attributes.

Example

<table border = "1" bordercolor = "red" bgcolor = "green">
         <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>

Another Example

<table border = "1" bordercolor = "green" background = "/images/test-image.png">
         <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>

Table Height and Width

The width and height attribute are used to set a width and height for the table or cells. It can be specified in terms of pixels or in terms of percentage

Example

<table border = "1" width = "100%" height = "250">
         <tr>
            <th>Row 1, Column 1</th>
            <th>Row 1, Column 2</th>
         </tr> 
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
         </tr>
</table>

Output

Table Caption

You can also set a caption for the table. It serves as a title or as an explanation for what the table is about. The caption is shown at the top of the table.

Note: This tag is deprecated in newer versions of HTML/ XHTML

Example

<table border = "1" width = "100%">
         <caption>This is the caption</caption>
         <tr>
            <th>Row 1, Column 1</th>
            <th>Row 1, Column 2</th>
         </tr> 
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
         </tr>
</table>

Output

Nested Tables

Nested tables means a table inside another table. You can create a new table inside a table cell i.e. <td> tag.

Example

<table border = "1" width = "100%"> >
  <tr>    
    <td>
       <table border = "1" width = "70%">
         <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>
    </td>
    <td>Table 1, Row 1, Column 2</td>
  </tr> 
</table>

Output