Advertisement

Responsive Advertisement

HTML TABLES

Digital Skills June 29, 2026

An HTML table is used to display data in rows and columns.

Basic HTML Table

<!DOCTYPE html>
<html>
<head>
    <title>HTML Table Example</title>
</head>
<body>

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>30</td>
        <td>London</td>
    </tr>
</table>

</body>
</html>

Common Table Tags

TagDescription
<table>Defines the table
<tr>Defines a table row
<th>Defines a header cell (bold and centered by default)
<td>Defines a data cell
<caption>Adds a title to the table
<thead>Groups header rows
<tbody>Groups body rows
<tfoot>Groups footer rows

Example with Styling

<style>
table {
    width: 60%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
    padding: 10px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}
</style>

<table>
    <caption>Employee Details</caption>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Department</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>101</td>
            <td>DIGITAL</td>
            <td>IT</td>
        </tr>
        <tr>
            <td>102</td>
            <td>SKILLS</td>
            <td>HR</td>
        </tr>
    </tbody>
</table>

Merging Cells

Merge columns (colspan):

<tr>
    <td colspan="2">Merged Columns</td>
</tr>

Merge rows (rowspan):

<tr>
    <td rowspan="2">Merged Rows</td>
    <td>Row 1</td>
</tr>
<tr>
    <td>Row 2</td>
</tr>

This covers the fundamentals of creating and formatting HTML tables.

Digital Skills

Posted by Digital Skills

Post a Comment

0 Comments