HTML Tables

HTML tables can be beneficial in different cases, in which you can arrange data such as texts, lists, links, images, tables within a table, videos etc. in the form of rows and columns where each intersection is called the cell.

TABLE Tag

Tables can be created within a web page using the <table> tag. Within it, the <tr> which is table-row is used for creating rows of the table. Again the <td> tag, which is table-data, is used for adding data to cells.

Example:
<table border = "1">
<tr>
    <td>Column1 in Row1</td>
    <td>Column2 in Row1</td>
</tr>
<tr>
    <td>Column1 in Row2</td>
    <td>Column2 in Row2</td>
</tr>
</table>

BORDER Attribute of TABLE Tag

But this does not look good, and hence you can add a border to your table. This is done using the border attributes like this:

<table border = "2">
It is to be noted that in case you do not need the border you can assign border = "0" also.

Heading for Table Data

The <th> tag is used within the <table> tag for defining the heading for your table data. It is used as a replacement of <td> tag where the data for table needs to be inserted in the form of heading.

Example:
<table border = "1">
<tr>
    <th>Column1 Heading</th>
    <th>Column2 Heading</th>
</tr>
<tr>
    <td>Column1 in Row1</td>
    <td>Column2 in Row1</td>
</tr>
<tr>
    <td>Column1 in Row2</td>
    <td>Column2 in Row2</td>
</tr>
</table>
You can notice that the heading text gets bold by default.

COLSPAN and ROWSPAN attribute

These two attribute of the <td> tag is used for merging two or more columns into a single column. It is useful in cases where you want to show mixed data universal for all the heading.

Example:
<table border = "1">
<tr>
    <th>Column1 Heading</th>
    <th>Column2 Heading</th>
</tr>
<tr>
    <td>Column1 in Row1</td>
    <td>Column2 in Row1</td>
</tr>
<tr>
    <td colspan = "2">Column1 in Row2</td>
</tr>
</table>
Example:
<table border = "1">
<tr>
    <th>Column1 Heading</th>
    <th>Column2 Heading</th>
</tr>
<tr>
    <td rowspan = "2" >Column1 in Row1</td>
    <td>Column2 in Row1</td>
</tr>
<tr>
    <td>Column2 in Row2</td>
</tr>
</table>

Cell-padding and Cell-spacing Attributes

These two attributes of the <table> tag are used for providing white spaces to your table cells from both sides. This is mainly done for beautification and to make data within your cells readable.

This is how you have to provide value to these attributes:

<table border = "2" cellpadding = "6" cellspacing = "6">

Table Background and Border Color

HTML also allows you to provide background color or image to your table. These are done by the bgcolor and background attributes of the <table> tag. Moreover, you can set the color to borders as well. This is done by the bordercolor attribute of the <table> tag.

Here's how it is done:

<table border = "1" bordercolor = "aqua" bgcolor = "red">

Nesting of Tables

You can add tables within another table, i.e. cell.  Code snippet for nesting HTML:

Example:
<table border = "2" cellpadding = "2" cellspacing = "2">
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
        <td>
            <table border = "2" cellpadding = "2" cellspacing = "2">
                <tr>
                    <td>
                        <table border = "2" cellpadding = "2" cellspacing = "2">
                            <tr>
                                <td>D</td>
                                <td>E</td>
                            </tr>
                            <tr>
                                <td>F</td>
                                <td>G</td>
                            </tr>
                        </table>
                    </td>
                <td>H</td>
            </tr>
                <tr>
                    <td>I</td>
                    <td>J</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Courses
Subscribe Updates via Email

Join 49,000+ W3schools lovers and get all the latest tutorials, programs, algorithms in your inbox.