Google News
logo
HTML Tables
HTML tags for creating tables were originally developed for presenting rows and columns of tabular data, however, designers quickly co-opted them as a valuable tool for controlling the layout of web pages. Tables allow you to create columns of text, hold white space between elements, and constrict the dimensions of the page’s content in ways other HTML formatting tags won’t.

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells.
Example :
<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>
Output :
Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2
Table Heading
<th>...</th>

Defines a table header cell. Table header cells function the same as table data cells(<td>). Browsers generally display the content of table header cells in bold text
centered horizontally and vertically in the cell (although some browsers vary). The end tag is optional.

Attributes

The <th> tag uses the same attributes as the <td> tag. See listing under <td>.

Defines the head of the table and should contain information about a table. It must contain at least one row (<tr>). <thead> is one of the “row group” tags introduced by Internet Explorer and proposed in the W3C 4.0 Specification (see <tbody>).
Example :
<html>
    <head>
    <title>Table Header</title>
    </head>
    <body>
        <table border="1">
            <tr>
                <th>Roll Number</th>
                <th>Marks</th>
            </tr>
            <tr>
                <td>FTL_001</td>
                <td>462</td>
            </tr>
            <tr>
                <td>FTL_002</td>
                <td>435</td>
            </tr>
            <tr>
                <td>FTL_003</td>
                <td>409</td>
            </tr>
 
        </table>
    </body>
</html>
Output :
Roll Number Marks
FTL_001 462
FTL_002 435
FTL_003 409
Table Height and Width
You can set a table width and height using width and height attrubutes. You can specify table width or height in terms of pixels or in terms of percentage of available screen area.
Example :
	
<html>
    <head>
        <title>Table Height &amp; Width</title>
    </head>
    <body>
        <table border="1" width="450" height="100">
            <tr>
                <td>Sample 1</td>
                <td>Sample 2-1</td>
            </tr>
            <tr>
                <td>Sample 1-1</td>
                <td>Sample 2-2</td>
            </tr>
        </table>
    </body>
</html>
Output :
Sample 1 Sample 2-1
Sample 1-1 Sample 2-2
Table Header, Body, and Footer
The three elements for separating the head, body, and foot of a table are:

<thead> - to create a separate table header.
<tbody> - to indicate the main body of the table.
<tfoot> - to create a separate table footer.
Example :
<html>
    <head>
    <title>Table Header, Body, and Footer</title>
    </head>
    <body>
        <table border="1" width="100%">
            <thead>
                <tr align="center">
                <td colspan="4">Table Header</td>
                </tr>
            </thead>
            <tfoot>
                <tr align="center">
                <td colspan="4">Table Footer</td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Sample  Text 1</td>
                    <td>Sample  Text 2</td>
                    <td>Sample  Text 3</td>
                    <td>Sample  Text 4</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
Output :
Table Header
Table Footer
Sample Text 1 Sample Text 2 Sample Text 3 Sample Text 4
Table Caption
The <caption> tag must be inserted immediately after the <table> tag.
Example :
<html>
    <head>
    <title>HTML Table Caption</title>
    </head>
    <body>
        <table border="1" width="100%">
        <caption>This is the table caption</caption>
        <tr>
        <td>Sample 1-1</td><td>Sample 1-2</td>
        </tr>
        <tr>
        <td>Sample 2-1 </td><td>Sample 2-2</td>
        </tr>
        </table>
    </body>
</html>
Output :
This is the table caption
Sample 1-1Sample 1-2
Sample 2-1 Sample 2-2
Cellpadding and Cellspacing
There are two attribiutes called cellpadding and cellspacing which you will use to adjust the white space in your table cells. The cellspacing attribute defines the width of the border, while cellpadding represents the distance between cell borders and the content within a cell.
Example :
<html>
    <head>
    <title>HTML Table Cellpadding &amp; Cellspacing</title>
    </head>
    <body>
        <table border="1" cellpadding="5" cellspacing="5">
            <tr>
                <th>Roll No</th>
                <th>Marks</th>
            </tr>
            <tr>
                <td>FTL-001</td>
                <td>462</td>
            </tr>
            <tr>
                <td>FTL_002</td>
                <td>435</td>
            </tr>
            <tr>
                <td>FTL_003</td>
                <td>409</td>
            </tr>
        </table>
    </body>
</html>
Output :
Roll No Marks
FTL-001 462
FTL_002 435
FTL_003 409
Colspan and Rowspan
A table is divided into rows and each row is divided into cells. In some situations we need the Table Cells span across (or merged) more than one column or row. In these situations we can use Colspan or Rowspan attributes.
Example :
<html>
    <head>
    <title>HTML Table Colspan &amp; 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">Sample 1</td>
                <td>Sample 1 - 2</td>
                <td>Sample 1 - 3</td>
            </tr>
        <tr>
            <td>Sample 2 - 2</td>
                <td>Sample 2 - 3</td>
            </tr>
        <tr>
            <td colspan="3">Sample 3 - 1</td>
            </tr>
        </table>
    </body>
</html>​
Output :
Column 1 Column 2 Column 3
Sample 1 Sample 1 - 2 Sample 1 - 3
Sample 2 - 2 Sample 2 - 3
Sample 3 - 1
Table Backgrounds
This page contains HTML table background code. This code enables you to modify the background of your HTML tables. For example, you can change the background color or add a background image to your tables.
Example :
<html>
    <head>
    <title>HTML Table Backgrounds</title>
    </head>
    <body>
      <table border="1" bordercolor="yellow" background="images/table_bg.jpg">
        <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>
Output :
Column 1 Column 2 Column 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1
Nested Tables
Tables inside a Table Cell. Nesting tables can lead to more complex tables, inner Table should begin and end in the same cell of the outer container table. You cannested tables any number of levels. The followingHTML code create a four level nested tables.
Example :
<html>
    <head>
    <title>HTML Nested Table</title>
    </head>
    <body>
        <table border="1" width="100%">
        <tr>
        <td>
           <table border="1" width="100%">
           <tr>
               <th>Roll No</th>
               <th>Marks</th>
           </tr>
           <tr align="center">
               <td>FTL_001</td>
               <td>462</td>
           </tr>
           <tr align="center">
               <td>FTL_002</td>
               <td>435</td>
           </tr>
           <tr align="center">
               <td>FTL_003</td>
               <td>409</td>
           </tr>
           </table>
        </td>
        </tr>
        </table>
</body>
</html>
Output :
Roll No Marks
FTL_001 462
FTL_002 435
FTL_003 409