How to Make a Table in HTML: A Step-by-Step Guide

Tables in HTML are a powerful way to display data in rows and columns. This guide will walk you through the process of creating tables, adding headers, merging cells, and using CSS to style them effectively.

 

Introduction: Why HTML Tables Are Important

Tables are used to organize data in rows and columns, making information easy to read and understand. As a beginner learning HTML, tables help you display structured data clearly.

You will commonly see HTML tables used for:

  • Student marksheets

  • Pricing tables

  • Employee details

  • Product comparison tables

  • Reports and dashboards

In this guide, you’ll learn how to make a table in HTML from scratch, explained clearly like a classroom lesson—no prior knowledge required.

What Is an HTML Table?

An HTML table is used to display data in a grid format made of:

  • Rows

  • Columns

  • Cells

HTML tables are created using a combination of specific tags such as:

  • <table>

  • <tr>

  • <th>

  • <td>

Basic Structure of an HTML Table

Before writing code, let’s understand the structure:

Table
 ├── Table Row
 │    ├── Table Header
 │    └── Table Data

Step 1: Create a Simple HTML Table

Example Code

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>22</td>
    <td>Delhi</td>
  </tr>
  <tr>
    <td>Anita</td>
    <td>21</td>
    <td>Mumbai</td>
  </tr>
</table>

Output Explanation

  • <table> creates the table

  • <tr> creates a row

  • <th> creates a header cell (bold by default)

  • <td> creates a data cell

  • border="1" adds a visible border (for learning only)

Step 2: Understanding Table Tags

<table>

Defines the table container.

<tr> (Table Row)

Creates a horizontal row.

<th> (Table Header)

Used for headings (bold & centered by default).

<td> (Table Data)

Used for regular data cells.

 

Step 3: Add Table Caption (Optional but Useful)

Example

<table border="1">
  <caption>Student Details</caption>
  <tr>
    <th>Name</th>
    <th>Class</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Amit</td>
    <td>10</td>
    <td>85</td>
  </tr>
</table>

Explanation

The <caption> tag gives a title to the table, improving readability and accessibility.

 

Step 4: Add Table Borders Using CSS (Best Practice)

Old Method:

<table border="1">

Modern Method (Recommended):

HTML

<table class="student-table">

CSS

.student-table {
  border-collapse: collapse;
  width: 100%;
}

.student-table th,
.student-table td {
  border: 1px solid #333;
  padding: 10px;
  text-align: center;
}

Why CSS Is Better

  • Cleaner HTML

  • More control over design

  • Professional standard

  • SEO-friendly

Step 5: Table Head, Body, and Footer (Professional Tables)

<table border="1">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Laptop</td>
      <td>₹50,000</td>
    </tr>
    <tr>
      <td>Mobile</td>
      <td>₹20,000</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>Total</td>
      <td>₹70,000</td>
    </tr>
  </tfoot>
</table>

✅ Explanation

  • <thead> → Table header

  • <tbody> → Main data

  • <tfoot> → Summary/footer

Step 6: Merge Cells Using Colspan and Rowspan

Merge Columns (colspan)

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

 Merge Rows (rowspan)

<td rowspan="2">Math</td>
Example
<table border="1">
  <tr>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td rowspan="2">Math</td>
    <td>90</td>
  </tr>
  <tr>
    <td>95</td>
  </tr>
</table>

HTML Tables vs CSS Layouts (Important Concept)

FeatureHTML TableCSS Layout
Used ForTabular dataPage layout
SEO Friendly✅ Yes✅ Yes
Responsive❌ Limited✅ Better
Recommended for Layout❌ No✅ Yes

Use tables only for data, not page layout.

Common Beginner Mistakes

  • Forgetting <tr> inside <table>
  •  Using tables for page layout
  • Missing closing tags
  • Not using <th> for headers
  • Overusing border attribute

Best Practices for HTML Tables

  • Use tables only for data
  •  Use CSS for styling
  •  Add <caption> for clarity 
  • Keep tables simple
  • Use <thead>, <tbody>, <tfoot>

Real-World Example: Student Marksheet Table

<table class="marks-table">
  <caption>Student Marksheet</caption>
  <tr>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>English</td>
    <td>88</td>
  </tr>
  <tr>
    <td>Science</td>
    <td>92</td>
  </tr>
</table>

FAQs: HTML Tables

1. How do I create a table in HTML?

Use <table>, <tr>, <th>, and <td> tags.

2. Is the border attribute still used?

It works, but CSS is recommended.

3. Can tables be responsive?

Yes, with CSS and media queries.

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

<th> is for headings; <td> is for data.

5. Should I use tables for layout?

No. Use CSS layouts like Flexbox or Grid.