HTML

HTML Introduction
HTML Structure
Text & Formatting
Links & Media
HTML Lists
HTML Tables
Forms & Input
Containers & Layout
HTML Advanced
Tutorials /HTML /HTML Tables

HTML Tables

💡 Key Points on HTML Tables
  • HTML tables organize data in rows and columns using the <table> tag.
  • Rows are defined with <tr>, and cells with <td> or <th> for headers.
  • Tables can be styled with CSS for better presentation.
  • They are ideal for tabular data, like schedules or price lists, but not for layout design.
  • Accessibility is improved with proper headers and captions.

HTML Tables: A Beginner's Guide

HTML tables are used to display data in a structured, grid-like format with rows and columns. The <table> tag creates the table, with <tr> for rows, <td> for data cells, and <th> for header cells. This tutorial explains how to create tables with examples and previews, making it easy for beginners to present data effectively.

What Are HTML Tables?

Tables organize data into rows and columns, perfect for displaying schedules, comparison charts, or datasets. They ensure content is easy to read and understand. While tables were once used for webpage layouts, modern web design uses CSS for layouts and reserves tables for tabular data.

Why Use Tables? Tables provide a clear, organized way to present data, making it easy for users to compare and analyze information.


Syntax of an HTML Table

The basic structure of a table includes a <table> tag, with rows and cells defined inside:

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

Preview

Cell 1 Cell 2
Cell 3 Cell 4

Key components:

  • <table>: Defines the table.
  • <tr>: Defines a table row.
  • <td>: Defines a table data cell.
  • <th>: Defines a table header cell (bold and centered by default).



Creating HTML Tables

Let’s explore how to create tables with examples and their previews.

1. Basic Table with Headers

A simple table with headers for a class schedule:

<table>
  <tr>
    <th>Day</th>
    <th>Subject</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>Math</td>
  </tr>
  <tr>
    <td>Tuesday</td>
    <td>Science</td>
  </tr>
</table>

Preview

Day Subject
Monday Math
Tuesday Science


2. Table with Multiple Rows and Columns

A table displaying product prices:

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Category</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>$999</td>
    <td>Electronics</td>
  </tr>
  <tr>
    <td>Book</td>
    <td>$20</td>
    <td>Stationery</td>
  </tr>
</table>

Preview

Product Price Category
Laptop $999 Electronics
Book $20 Stationery


Key Attributes for Tables

Tables support attributes to enhance functionality, though many are now styled with CSS:

  • border: Adds a border (e.g., <table border="1">). Prefer CSS for modern styling.
  • width: Sets the table width (e.g., <table width="100%">). Use CSS instead for responsiveness.
  • align: Aligns the table (deprecated; use CSS margin or text-align).
Warning: Avoid using tables for webpage layouts. Use CSS Grid or Flexbox for layouts, reserving <table> for tabular data to ensure accessibility and semantic correctness.



Best Practices for HTML Tables

To make your tables effective and user-friendly:

  • Use tables only for tabular data, not for design or layout.
  • Include <th> headers to clarify column purposes.
  • Use CSS for styling (e.g., borders, padding, or colors) for better control.
  • Ensure tables are responsive using CSS (e.g., width: 100% or media queries).
  • Test tables on different devices for readability and accessibility.

Common Mistakes to Avoid

Beginners often make these errors:

  • Forgetting to close <tr>, <td>, or <th> tags, causing rendering issues.
  • Using tables for layout instead of data, which harms accessibility.
  • Not adding headers, making tables harder to understand.
Pro Tip: Use CSS properties like border-collapse: collapse and padding to create clean, professional-looking tables.


Try It Yourself

Create a simple HTML file and experiment with tables. Add headers and multiple rows to see how they work.

<!DOCTYPE html>
<html lang="en">
<body>
  <h3>Weekly Schedule</h3>
  <table>
    <tr>
      <th>Time</th>
      <th>Activity</th>
    </tr>
    <tr>
      <td>9:00 AM</td>
      <td>Meeting</td>
    </tr>
    <tr>
      <td>10:00 AM</td>
      <td>Coding</td>
    </tr>
  </table>
</body>
</html>

Preview

Weekly Schedule

Time Activity
9:00 AM Meeting
10:00 AM Coding

By mastering the <table> tag and its components, you can create clear, organized data presentations that enhance your website’s usability. Practice regularly to get comfortable!

The Coding Journey provides high-quality, beginner-friendly, and advanced web development tutorials. Learn React, Next.js, JavaScript, Tailwind CSS, and more with hands-on projects. Build faster, code smarter, and level up your skills! 🚀

Tutorials

Online Compilers

Other Links

Company

© 2025 All Rights Reserved | The coding journey