Simple methods for creating tables with HTML

Here are some Simple methods for creating tables with HTML: To begin, first refer –creating-tables-in-html

Creating a Simple Table:

HTML’s <table>, <tr>, <th>, and <td> components can be used to make a basic table. Here is an example of a simple table with two rows and two columns:

<!DOCTYPE html>
<html>
<head>
    <title>Simple Table</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
        </tr>
    </table>
</body>
</html>

In this example, <table> specifies the table, <tr> defines a row, defines a header cell, and <td> defines a data cell. The border=”1″ feature adds a border to the table for easier visualization, but it is optional.

Figure 1 – Displaying a Table

Adding a Title to a Column:

To include a title for a column in an HTML table, use the <th> (table header) element within the <tr> (table row) that specifies the header row. Here’s an example:

<!DOCTYPE html>
<html>
<head>
    <title>Table with Column Titles</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Title 1</th>
            <th>Title 2</th>
        </tr>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
        </tr>
    </table>
</body>
</html>

In this case, the first and second columns’ titles are “Title 1” and “Title 2”. The <th> element automatically displays certain titles in bold.

Figure 2 – Displaying a Table with the Column Title

Adding a Caption to a Table

To include a caption in an HTML table, use the <caption> element. Here’s an example:

<!DOCTYPE html>
<html>
<head>
    <title>Table with Caption</title>
</head>
<body>
    <table border="1">
        <caption>My Table Caption</caption>
        <tr>
            <th>Title 1</th>
            <th>Title 2</th>
        </tr>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
        </tr>
    </table>
</body>
</html>

In this example, the <caption> element is positioned directly after the <table> tag to provide a caption for the table. The text in the <caption> element will be shown centered above the table.

Figure 3 – Displaying a Table with a Column

Specifying the Properties of the Columns

To specify column characteristics in an HTML table, use the <colgroup> and <col> elements. The <colgroup> element groups one or more columns, while the <col> element specifies characteristics for each column.

4.1 – Changing the Properties of Multiple Columns

Change the characteristics of numerous columns in an HTML table using the <colgroup> and <col> elements. Here’s an example of changing the background color of the second and third columns:

<!DOCTYPE html>
<html>
<head>
    <title>Table with Multiple Column Properties</title>
    <style>
        .highlight {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <table border="1">
        <colgroup>
            <col>
            <col class="highlight">
            <col class="highlight">
        </colgroup>
        <tr>
            <th>Title 1</th>
            <th>Title 2</th>
            <th>Title 3</th>
        </tr>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
            <td>Row 1, Cell 3</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
            <td>Row 2, Cell 3</td>
        </tr>
    </table>
</body>
</html>

In this example, the second and third <col> components within the <colgroup> apply the highlight class to set the background color to light blue. This allows you to change the properties of numerous columns at once.

Figure 4.1 – Showing the Changed Property of Columns

4.2 – Changing the Properties of Single Columns

The <colgroup> and <col> elements can modify a single column’s properties in an HTML table. Here’s an example to change the background color of the second column:

<!DOCTYPE html>
<html>
<head>
    <title>Table with Single Column Property</title>
    <style>
        .highlight {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <table border="1">
        <colgroup>
            <col>
            <col class="highlight">
            <col>
        </colgroup>
        <tr>
            <th>Title 1</th>
            <th>Title 2</th>
            <th>Title 3</th>
        </tr>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
            <td>Row 1, Cell 3</td>
        </tr>
        <tr>
            <td>Row 2, Cell 1</td>
            <td>Row 2, Cell 2</td>
            <td>Row 2, Cell 3</td>
        </tr>
    </table>
</body>
</html>

In this example, the second <col> element within the <colgroup> applies the highlight class, which sets the background color to light blue, to the second column alone. No specific styling has been applied to the first and third columns.

Figure 4.2 – Showing the Changed Property of Columns

Spanning Rows and Columns

To span rows and columns in an HTML table, use the rowspan and colspan properties in the <td> (table data) or <th> (table header) elements respectively. Here’s an example with two rows and three columns:

<!DOCTYPE html>
<html>
<head>
    <title>Spanning Rows and Columns</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Title 1</th>
            <th colspan="2">Title 2 and 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>
    </table>
</body>
</html>

In this example, the first row contains three cells. The second cell spans two columns (colspan=”2″), encompassing both “Title 2” and “Title 3.” The first cell in the second row spans two rows (rowspan=”2″), covering “Row 1, Cell 1” and making room for “Row 2, Cell 1.” This allows you to customize the layout and structure of your table by spanning rows and columns as desired.

Figure 5 – Displaying a Table with Spanned rows and columns

Using Images in a Table

To include images in an HTML table, use <img> elements inside <td> (table data) components. Here’s an example that uses photos in a table:

<!DOCTYPE html>
<html>
<head>
    <title>Table with Images</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Image</th>
            <th>Description</th>
        </tr>
        <tr>
            <td><img src="https://via.placeholder.com/150" alt="Placeholder Image"></td>
            <td>Placeholder image</td>
        </tr>
        <tr>
            <td><img src="https://via.placeholder.com/150" alt="Placeholder Image"></td>
            <td>Another placeholder image</td>
        </tr>
    </table>
</body>
</html>

In this example, each table row has an image in the first column and a description in the second. The <img> element displays the picture, while the src attribute indicates its URL. The alt element offers alternate text for the image, which is displayed when the image cannot be loaded or for accessibility reasons.

Figure 6 – Displaying the output of using an image in the table

Creating Advanced Tables

Advanced tables in HTML are created by combining several elements and attributes to customize the table’s design and behavior. Here’s an example of an advanced table with several features:

<!DOCTYPE html>
<html>
<head>
    <title>Advanced Table</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        .center {
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <caption>Advanced Table Example</caption>
        <thead>
            <tr>
                <th colspan="2">Header 1</th>
                <th rowspan="2">Header 2</th>
            </tr>
            <tr>
                <th>Subheader 1</th>
                <th>Subheader 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1, Cell 1</td>
                <td>Row 1, Cell 2</td>
                <td rowspan="2" class="center">Centered Cell</td>
            </tr>
            <tr>
                <td>Row 2, Cell 1</td>
                <td>Row 2, Cell 2</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3" class="center">Footer</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

This example shows a few advanced features:

  • Custom CSS styling for the table, headers, cells, and alternating row colors.
  • Use the rowspan and colspan characteristics to span rows and columns.
  • To structure the table, use <thead>, <tbody>, and <tfoot> tags.
  • Adding a caption to the table to provide further context.

Figure 7 – Displaying an Advanced Table

Nesting Tables

To nest tables in HTML, insert one <table> element into another <td> or <th> element. Here’s an example of nesting tables:

<!DOCTYPE html>
<html>
<head>
    <title>Nested Tables</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Outer Table Header 1</th>
            <th>Outer Table Header 2</th>
        </tr>
        <tr>
            <td>
                <table border="1">
                    <tr>
                        <th>Inner Table Header 1</th>
                        <th>Inner Table Header 2</th>
                    </tr>
                    <tr>
                        <td>Inner Table Cell 1</td>
                        <td>Inner Table Cell 2</td>
                    </tr>
                </table>
            </td>
            <td>Outer Table Cell</td>
        </tr>
    </table>
</body>
</html>

In this example, the outer table has two columns. The first column of the outer table has a nested table with its own headers and cells. The nested table is placed inside an outer table cell. You can use this technique to create more complicated table structures by stacking tables within tables.

Figure 8 – Displaying Nested Tables

Related Posts

Scroll to Top