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

1. TABLE Tag
2. BORDER Attribute of TABLE Tag
3. Heading for Table Data
4. COLSPAN and ROWSPAN Attribute
5. Cell-padding and Cell-spacing Attributes
6. Table Background and Border Color
7. Nesting of Tables

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 table’s data needs to be inserted in the form of a 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 attributes of the <td> tag are 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>