• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Tables

← Previous Next →

HTML tables help you arrange information in rows and columns. They are useful when you want to display structured data, such as student records, fee details, product lists or schedules. Tables make a webpage easier to read because the viewer can scan information quickly. This chapter shows how tables work, how to add borders, how to merge cells, how to style them with CSS and how to create responsive tables that look good on small screens.

What is an HTML Table

An HTML table is created with the table element. Inside it, you define rows using tr and then place cells inside each row using either td or th. td stands for table data, while th stands for table header. Header cells are usually bold and centered by default, while data cells show normal text.

Basic table structure

<table>
    <tr>
        <th>Name</th>
        <th>Class</th>
        <th>Marks</th>
    </tr>
    <tr>
        <td>Anita</td>
        <td>7</td>
        <td>89</td>
    </tr>
    <tr>
        <td>Riya</td>
        <td>8</td>
        <td>92</td>
    </tr>
</table>

In this example, the first row contains three header cells. The next two rows contain normal data cells. This is the simplest structure of a table.

Adding Borders to a Table

By default, tables do not show any borders. Everything appears plain. To make the table clearer, you can add borders. HTML once had a border attribute, but today CSS is the better method.

Table border using CSS

<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
</style>

The border-collapse property removes the double border effect and makes the table look cleaner. Borders help readers identify rows and columns more easily.

Adding Padding and Spacing

If the content looks too close to the border, you can add padding inside the cells. Padding adds space inside the cell, while border-spacing creates space between cells.

Example with padding

<style>
th, td {
    padding: 10px;
}
</style>

This gives the table a more balanced layout and makes long text easier to read.

Aligning Text in Table Cells

You can align text inside a cell using CSS. For example, you can align numbers to the right and names to the left. This is common in financial or academic tables.

Example

<style>
td {
    text-align: left;
}
td.number {
    text-align: right;
}
</style>

You can then apply the number class to cells that contain numeric values.

Table Caption

A caption adds a title above the table. It helps users understand the purpose of the data.

Example

<table>
    <caption>Student Marks Report</caption>
    <tr>
        <th>Name</th>
        <th>Class</th>
        <th>Marks</th>
    </tr>
    <tr>
        <td>Anita</td>
        <td>7</td>
        <td>89</td>
    </tr>
</table>

Captions are useful when you have multiple tables on one page.

Using Colspan and Rowspan

Sometimes you may want a cell to stretch across multiple columns or rows. colspan merges cells horizontally while rowspan merges cells vertically.

Colspan example

<table>
    <tr>
        <th colspan="3">Monthly Report</th>
    </tr>
    <tr>
        <td>Week 1</td>
        <td>Week 2</td>
        <td>Week 3</td>
    </tr>
</table>

Rowspan example

<table>
    <tr>
        <th rowspan="2">Name</th>
        <td>Anita</td>
    </tr>
    <tr>
        <td>Riya</td>
    </tr>
</table>

These features help create advanced layouts, such as time tables or summary tables.

Creating a Styled Table

With CSS, you can improve the look of a table by changing background colors, adding hover effects or styling headers.

Example of a styled table

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

th {
    background-color: #f2f2f2;
    padding: 12px;
    text-align: left;
}

td {
    padding: 10px;
}

tr:nth-child(even) {
    background-color: #fafafa;
}

tr:hover {
    background-color: #e6f7ff;
}
</style>

This style gives the table a clean and modern look.

Creating a Responsive Table

A responsive table adjusts on smaller screens. If a table has many columns, it may overflow on a mobile screen. A simple method is to wrap the table inside a container that scrolls sideways.

Responsive scroll method

<style>
.table-box {
    overflow-x: auto;
}
</style>

<div class="table-box">
    <table>
        <tr>
            <th>Name</th>
            <th>Class</th>
            <th>Roll No</th>
            <th>Marks</th>
            <th>Percentage</th>
        </tr>
        <tr>
            <td>Anita</td>
            <td>7</td>
            <td>12</td>
            <td>460</td>
            <td>92%</td>
        </tr>
    </table>
</div>

The table now scrolls sideways on smaller screens, making it readable without breaking the layout.

Adding thead, tbody and tfoot

These tags help organize table sections. They do not change the appearance, but they help screen readers and search engines understand the structure.

  • thead: Table header section

  • tbody: Table body

  • tfoot: Table footer

Example

<table>
    <thead>
        <tr>
            <th>Item</th>
            <th>Cost</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Notebook</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Pencil</td>
            <td>10</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>40</td>
        </tr>
    </tfoot>
</table>

These sections become more important when you build large tables with dynamic data.

Summary of HTML Tables

In this chapter, you learned what HTML tables are and how they help display data in rows and columns. You saw how to create a basic table, add borders, padding, alignment, captions, colspan, rowspan and apply CSS styling. You also learned how to create responsive tables and use thead, tbody and tfoot to structure your data properly. These techniques will help you build clean and readable tables for any type of website or project.

Practice Questions

Q1. Create a basic table with 2 rows and 2 columns.

Q2. Add column headers to a table using <th>.

Q3. Display a student result table with Roll No, Name, and Marks.

Q4. Style a table with border and padding using CSS.

Q5. Merge two columns using colspan.

Q6. Merge two rows using rowspan.

Q7. Add a caption titled “Employee Details” to a table.

Q8. Create a table inside a scrollable div.

Q9. Create a 3×3 multiplication table using HTML.

Q10. Display a monthly calendar using table rows and columns.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top