Prev Next

HTML Tables

HTML tables are used to display data in rows and columns. They provide a structured, grid-like layout that can be useful for comparing information. The basic elements of a table include <table>, <tr> for table rows, and <td> for table cells.

Key Topics

Basic Table Usage

Example: A basic table with three rows and two columns.

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

A Simple Table Example

This example demonstrates how a table can be structured to represent data clearly. A code box is provided for copying the full HTML structure.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Simple Table</title>
</head>
<body>
    <h1>Product List</h1>
    <table>
        <tr>
            <td>Apples</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Oranges</td>
            <td>30</td>
        </tr>
    </table>
</body>
</html>

Explanation: The table above organizes fruit data into rows and columns, making it easier to read and compare the quantities.

Tables in Layouts

Tables were historically used for page layouts, but with modern HTML and CSS, this practice is discouraged for layout purposes. Still, tables remain the best choice for displaying tabular data due to their inherent structure and semantics.

<table>
    <tr>
        <td>Name</td>
        <td>Age</td>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
    </tr>
</table>

Explanation: Although you can still find tables in older page layouts, their intended use is to display data. For structuring entire web pages, use CSS layout techniques.

Key Takeaways

  • Use <table>, <tr>, and <td> to organize data into rows and columns.
  • Tables are ideal for presenting tabular information in a clear, structured format.
  • Avoid using tables for page layout; instead, use modern CSS techniques.
  • Enhance table readability with headings, borders, and spacing (covered in other sections).
  • Keep your HTML code clean and well-structured for better maintainability.
Prev Next