HTML Tables

Last Updated:

Introduction

HTML tables are used to display data in rows and columns. They are commonly used to present structured information such as schedules, reports, pricing tables, and comparison data.

Tables help organize information clearly, making it easier for users to read and understand data.

In this lesson, you will learn how to create tables in HTML and understand different table elements.

What You’ll Learn

  • HTML <table> tag
  • Table rows, columns, and cells
  • <tr>, <th>, and <td> tags
  • Table borders
  • Spanning rows and columns
  • Best practices for tables

🔹 Basic Table Structure

An HTML table is created using the <table> tag.

Syntax:

<table>
    <tr>
        <th>Heading</th>
        <th>Heading</th>
    </tr>
    <tr>
        <td>Data</td>
        <td>Data</td>
    </tr>
</table>

Explanation:

  • <table> → Defines the table
  • <tr> → Table row
  • <th> → Table header cell
  • <td> → Table data cell

🔹 Example of HTML Table

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
		<th>City</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
		<td>Delhi</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>22</td>
		<td>Surat</td>
    </tr>
</table>

Output:

A table with 3 columns (Name, Age and City) and multiple rows will be displayed.

🔹 Table Borders

You can add borders using the border attribute.

<table border="1">
  <tr>
    <th>Course</th>
    <th>Duration</th>
    <th>Fees</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>2 Weeks</td>
    <td>Free</td>
  </tr>
</table>

🔹 Table Head, Body & Footer:

HTML tables can be divided into three sections:
<thead> for header, <tbody> for main data, and <tfoot> for footer.
This helps organize large tables and improves readability.

<table border="1">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>₹50,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>₹50,000</td>
    </tr>
  </tfoot>
</table>

The <th> tag is used for table headings. Text inside <th> is bold and centered by default.

  • Text inside <th> is bold and centered by default
  • Used to define column titles

The <tbody> tag contains the main data of the table.

  • Holds all the actual rows (<tr>) and data (<td>)
  • This is the largest part of the table

The <tfoot> tag is used for summary or footer content.

  • Often used for totals, averages, or summary rows
  • Appears at the bottom of the table

🔹 Colspan & Rowspan

Colspan Example:

The colspan attribute is used to merge columns.

<tr>
  <td colspan="2">Total Students</td>
</tr>

👉 This cell will span across two columns.

Rowspan Example:

The rowspan attribute is used to merge rows.

&lt;tr>
  &lt;td rowspan="2">HTML&lt;/td>
  &lt;td>Beginner&lt;/td>
&lt;/tr>

🔹 How Tables Appear in Browser

  • Tables are displayed in rows and columns
  • Borders appear if defined
  • Headers are bold and centered
  • Cells adjust based on content
  • Table width adjusts based on content.
  • Tables can be styled using CSS for better design.

🔹 Complete Example:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Tables Complete Example</title>
</head>
<body>

<h2>Student Report Table</h2>

<table border="1" cellpadding="10">

    <caption>Student Marks Report</caption>

    <thead>
        <tr>
            <th rowspan="2">Name</th>
            <th colspan="2">Marks</th>
            <th rowspan="2">Total</th>
        </tr>
        <tr>
            <th>Math</th>
            <th>Science</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>John</td>
            <td>80</td>
            <td>85</td>
            <td>165</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>90</td>
            <td>88</td>
            <td>178</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td colspan="3">Total Marks</td>
            <td>343</td>
        </tr>
    </tfoot>

</table>

</body>
</html>

Explanation:

  • <caption> → Displays table title
  • <thead> → Contains table headings
  • <tbody> → Contains main data
  • <tfoot> → Shows summary (total marks)
  • rowspan → Merges rows (Name column)
  • colspan → Merges columns (Marks section)
  • border & cellpadding → Improve table appearance

👉 This example combines all major table concepts in one place.

🔹 Real-World Uses of Tables

  • Student marksheets
  • Pricing tables
  • Timetables
  • Admin dashboards
  • Product comparison tables

🔹 Important Notes

  • Always use <th> for headings
  • Keep tables simple and readable
  • Avoid using tables for page layout
  • Use CSS for styling tables
  • Use proper structure for accessibility

🔹 Common Mistakes

  • Missing <tr> tags
  • Using <td> instead of <th> for headings
  • Incorrect colspan/rowspan usage
  • Overusing tables for layout

⭐ Best Practices

✔ Use tables only for data, not layout
✔ Use <th> for headings
✔ Keep tables readable
✔ Later, style tables using CSS

🔹 Practice Tasks:

  • Task 1: Create a table with 2 columns and 3 rows.
  • Task 2: Add headings using <th>.
  • Task 3: Use colspan to merge two columns.
  • Task 4: Use rowspan to merge rows.
  • Task 5: Add spacing using cellpadding.
  • Task 6: Create a table with <thead>, <tbody>, and <tfoot>.

FAQs

What is an HTML table?

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

What is the difference between <th> and <td>?

<th> is used for headings, while <td> is used for data cells.

Can tables be styled using CSS?

Yes, modern tables are styled using CSS.

Conclusion

HTML tables are useful for displaying structured data clearly. By using rows, columns, and table elements like <th> and <td>, you can organize information effectively.

In the next tutorial, you will learn more advanced HTML Forms to build interactive and structured web pages.

Related Tutorials

  • HTML Introduction

    👋 First time learning web development?We recommend starting with our Start Here guide before continuing this lesson. It will help you understand the learning path for HTML, CSS, PHP, and WordPress. Introduction HTML stands for HyperText Markup Language. It is the basic building block of every website on the internet. HTML is used to create…

  • HTML Basic Structure

    Introduction This basic HTML page structure is also known as an HTML skeleton or HTML boilerplate template. In this lesson, you will learn the basic structure of an HTML document and understand what each part does. What You’ll Learn in This Lesson Basic HTML Document Structure (HTML Boilerplate) The basic HTML structure is sometimes called…

  • HTML Headings & Paragraphs

    Introduction Headings and paragraphs are among the most commonly used elements in HTML. They help structure the content and make web pages readable and well-organized. Headings are used to define titles and sections of a webpage, while paragraphs are used to display blocks of text. By using headings and paragraphs properly, developers can organize information…

  • HTML Text Formatting

    Introduction HTML provides several tags that allow developers to format text on a webpage. Text formatting helps highlight important words, emphasize content, and improve the readability of the page. Using text formatting elements, you can make text bold, italic, underlined, highlighted, smaller, or emphasized. These formatting tags help organize information and make the content easier…

  • HTML Links

    Introduction HTML links are used to connect one page to another page. They allow users to move between different web pages, websites, or sections of the same page. Links are a fundamental part of the web. Without links, browsing the internet would not be possible. They also play an important role in SEO by helping…

  • HTML Images

    Introduction Images are an important part of any webpage. They make content more attractive, engaging, and easier to understand. In HTML, images are used to display pictures such as photos, icons, logos, and graphics on a webpage. Adding images helps improve user experience and also makes your content visually appealing. In this lesson, you will…

Leave a Reply

Your email address will not be published. Required fields are marked *