An HTML table is a way of displaying data in rows and columns. It is a popular way of organizing and presenting information on websites. Tables are widely used to display financial data, schedules, pricing, and other types of data that need to appear organized. This tutorial will guide you on how to create an HTML table.



Creating an HTML table

To create an HTML table, you must first understand the basic structure. The table comprises three main tags: <table>, <tr>, and <td>. The <table> tag defines the table, the <tr> tag defines the table rows, and the <td> tag defines the table cells.

Here's an example of a basic HTML table:

Example:

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

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

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 for the <td> tag, where the table's data must be inserted as 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 text under the table heading 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 universally for all the headings.

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 provides white spaces to your table cells from both sides. This is mainly done to beautify and 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>


Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram