HTML Tables, Tutorialspoint, W3Schools HTML Tables

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

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-1	Sample 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 1	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 1 Cell 1	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

HTML Tutorial