Hero

HTML Tables Learn how to create structured, two-dimensional grids using HTML tables to perfectly organize and display complex data. Learning Outcomes: Master the <table>, <tr>, <th>, and <td> tags to build fundamental data tables. Prerequisites: Basic HTML tags and elements. Reading Time: 5 min read Difficulty: Beginner

Introduction

Imagine trying to display a list of 50 users along with their email addresses, ages, and registration dates using only paragraphs and lists. It would be an unreadable mess! This is exactly why HTML Tables were created. A table allows web developers to arrange data into rows and columns, making complex information instantly scannable and easy to digest.

Why This Matters

For a platform like himubey.in, tables are crucial for building analytical components like an Admin Dashboard, a project pricing tier grid, or a feature comparison chart. While they used to be heavily relied upon for full webpage layouts in the 1990s, today they are strictly (and importantly) used for displaying tabular data.

Core Concepts

To build an HTML table, you need to understand four core tags:

<table>: The grand container for the entire table.
<tr> (Table Row): Defines a single horizontal row within the table.
<th> (Table Header): Defines a header cell. It makes the text bold and centered by default. It's usually placed in the very first <tr>.
<td> (Table Data): Defines a standard data cell. It holds the actual information for that column and row.

Syntax

Tables are built row by row. You open a row (<tr>), fill it with cells (<th> or <td>), close the row, and repeat!

<table>
  <!-- First Row: The Headers -->
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <!-- Second Row: The Data -->
  <tr>
    <td>Data A1</td>
    <td>Data B1</td>
  </tr>
</table>

Real World Example

Let's build a simple "Course Pricing" table for the Learn with Himanshu platform.

<section class="pricing">
  <h2>Pricing Plans</h2>
  
  <table border="1">
    <!-- Header Row -->
    <tr>
      <th>Plan Type</th>
      <th>Monthly Cost</th>
      <th>Access Level</th>
    </tr>
    
    <!-- First Data Row -->
    <tr>
      <td>Beginner Tier</td>
      <td>Free</td>
      <td>HTML & CSS Only</td>
    </tr>
    
    <!-- Second Data Row -->
    <tr>
      <td>Pro Developer</td>
      <td>1500rs/month</td>
      <td>Full Stack (Next.js, React, Node)</td>
    </tr>
  </table>
</section>

(Note: The border="1" attribute is considered outdated in modern HTML5, but it's a helpful trick while learning so you can actually see the cell borders before we start using CSS!)

Best Practices

Never Use Tables for Page Layout: Never try to build your website's header, sidebar, and footer using a giant table. This ruins web accessibility (screen readers cannot navigate it) and breaks mobile responsiveness. Use CSS Grid or Flexbox for layout!
Consistent Columns: Make sure every <tr> has the exact same number of <th> or <td> tags. If row one has 3 cells, row two must also have 3 cells, otherwise your table will look broken.

Common Mistakes

Mistake: Putting a <td> directly inside a <table> without a <tr>.

<!-- WRONG: A cell must always live inside a row! -->
<table>
  <td>Himanshu Dubey</td>
  <td>Himubey.Dev@example.com</td>
</table>

Correct Approach:

<!-- CORRECT -->
<table>
  <tr>
   <td>Himanshu Dubey</td>
  <td>Himubey.Dev@example.com</td>
  </tr>
</table>

💡 Himubey Tip

Without CSS, HTML tables look very squished and primitive. To instantly make a table look better, apply some basic CSS styling: border-collapse: collapse; on the table, and padding: 10px; on the th and td elements. This gives your data room to breathe!

Interview Questions

What is the difference between the <th> and <td> tags?
How do you create a new row in an HTML table?
Why is it considered a bad practice to use HTML tables for designing a website's layout?

Mini Challenge

Task: Build a "Tech Stack Comparison" Table.

Create a <table>.
Add a header row (<tr>) with three headers (<th>): "Framework", "Language", and "Difficulty".
Add two data rows (<tr>), one for "Next.js" and one for "React", filling out their respective <td> cells.

Summary

The <table> tag, combined with <tr>, <th>, and <td>, is the standard way to present multi-dimensional data on the web. By building tables row-by-row, you ensure your data remains structured, semantic, and easy for both users and screen readers to understand.

Next Lesson

Next Lesson: More on Tables