Master HTML From Scratch

Clear, interactive, and structured HTML lessons designed for beginners.

COURSE SYLLABUS
1. Introduction to HTML
Introduction to HTML HTML Document Structure How HTML Works HTML vs CSS vs JavaScript
2. Basic HTML
Basic HTML HTML Elements HTML Attributes Headings Paragraphs Comments Line Breaks Horizontal Rules
3. HTML Tags
HTML Tags
4. Text Formatting
Text Formatting Text Formatting Elements Bold & Strong Italic & Emphasis Underline & Highlight Subscript & Superscript Quotations Abbreviations Special Characters
5. Links & Media
Links & Media Hyperlinks Link Attributes Images Image Attributes Audio Video Iframes
6. Lists & Tables
Lists & Tables Unordered Lists Ordered Lists Description Lists Nested Lists Tables Table Headers Colspan & Rowspan
7. HTML Forms
Forms Form Basics Form Attributes Input Types Labels Text Area Select & Option Radio Buttons Check Boxes Buttons Form Validation
8. Semantic HTML
Semantic HTML Semantic Elements Header Nav Main Section Article Aside Footer HTML Page Layout
9. HTML5 Features
HTML5 Features HTML5 Introduction New Input Types Audio & Video Canvas SVG Progress & Meter Details & Summary Data Attributes
10. Advanced HTML
Advanced HTML Global Attributes Meta Tags Viewport HTML Accessibility ARIA Basics HTML Best Practices SEO-Friendly HTML

HTML Tables

HTML tables are used to organize and present structured data in rows and columns.

1. What is an HTML Table?

An HTML table displays information in a grid-like structure consisting of rows and columns.

Tables are useful for structured data such as:

  • Student records
  • Employee information
  • Product details
  • Course schedules
  • Reports
  • Price lists

2. Basic Table Structure

A basic HTML table is created using the <table> element. 

<table>

    <tr>
        <th>Name</th>
        <th>Course</th>
        <th>Marks</th>
    </tr>

    <tr>
        <td>John</td>
        <td>HTML</td>
        <td>85</td>
    </tr>

</table>
Output:
Name Course Marks
John HTML 85

3. The table Element

The <table> element is the main container for all table rows and cells. 

<table>

    <!-- Table content goes here -->

</table>

4. The tr Element

The <tr> element defines a table row. 

<tr>
    <td>John</td>
    <td>HTML</td>
    <td>85</td>
</tr>

5. The th Element

The <th> element defines a table header cell. It identifies the data represented by a column or row. 

<tr>

    <th>Student Name</th>
    <th>Course</th>
    <th>Marks</th>

</tr>

6. The td Element

The <td> element defines a normal data cell. 

<tr>

    <td>John</td>
    <td>HTML</td>
    <td>85</td>

</tr>

7. Table with Multiple Rows

<table>

    <tr>
        <th>Name</th>
        <th>Course</th>
        <th>Marks</th>
    </tr>

    <tr>
        <td>John</td>
        <td>HTML</td>
        <td>85</td>
    </tr>

    <tr>
        <td>David</td>
        <td>CSS</td>
        <td>90</td>
    </tr>

    <tr>
        <td>Sarah</td>
        <td>JavaScript</td>
        <td>88</td>
    </tr>

</table>

8. Adding Borders with CSS

CSS is commonly used to add borders to tables and cells. 

<style>

    table,
    th,
    td {
        border: 1px solid black;
    }

</style>

9. border-collapse

The border-collapse property controls whether adjacent table borders are separated or merged. 

<style>

    table {
        border-collapse: collapse;
    }

    th,
    td {
        border: 1px solid black;
        padding: 10px;
    }

</style>
Common Choice: border-collapse: collapse; gives a clean, compact table appearance.

10. Table Width

CSS can be used to control the width of a table. 

<style>

    table {
        width: 100%;
    }

</style>

A percentage-based width can make the table adapt to the available container.

11. Cell Padding

The padding property adds space inside table cells. 

<style>

    th,
    td {
        padding: 12px;
    }

</style>

12. Text Alignment

The text-align property can control horizontal text alignment. 

<style>

    th,
    td {
        text-align: left;
    }

    .center {
        text-align: center;
    }

</style>

13. Table Header Styling

<style>

    th {
        background-color: #212529;
        color: white;
        padding: 12px;
    }

</style>

14. Table Row Styling

CSS selectors can be used to style table rows. 

<style>

    tr:nth-child(even) {
        background-color: #f2f2f2;
    }

</style>

The :nth-child(even) selector can create alternating row styles.

15. Hover Effect

The :hover pseudo-class can highlight a row when the user moves the pointer over it. 

<style>

    tr:hover {
        background-color: #e9ecef;
    }

</style>

16. Table Caption

The <caption> element gives the table a visible title or description. 

<table>

    <caption>Student Details</caption>

    <tr>
        <th>Name</th>
        <th>Course</th>
    </tr>

    <tr>
        <td>John</td>
        <td>HTML</td>
    </tr>

</table>

17. thead Element

The <thead> element groups the header rows of a table. 

<table>

    <thead>

        <tr>
            <th>Name</th>
            <th>Course</th>
            <th>Marks</th>
        </tr>

    </thead>

</table>

18. tbody Element

The <tbody> element groups the main data rows. 

<tbody>

    <tr>
        <td>John</td>
        <td>HTML</td>
        <td>85</td>
    </tr>

    <tr>
        <td>David</td>
        <td>CSS</td>
        <td>90</td>
    </tr>

</tbody>

19. tfoot Element

The <tfoot> element groups summary or footer rows. 

<tfoot>

    <tr>
        <td colspan="2">Average</td>
        <td>87.5</td>
    </tr>

</tfoot>

20. Complete Table Structure

<table>

    <caption>Student Results</caption>

    <thead>
        <tr>
            <th>Name</th>
            <th>Course</th>
            <th>Marks</th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <td>John</td>
            <td>HTML</td>
            <td>85</td>
        </tr>

        <tr>
            <td>David</td>
            <td>CSS</td>
            <td>90</td>
        </tr>

    </tbody>

    <tfoot>

        <tr>
            <td colspan="2">Average</td>
            <td>87.5</td>
        </tr>

    </tfoot>

</table>

21. Colspan

The colspan attribute allows one cell to span across multiple columns. 

<table>

    <tr>
        <th colspan="3">
            Student Information
        </th>
    </tr>

    <tr>
        <td>John</td>
        <td>HTML</td>
        <td>85</td>
    </tr>

</table>

22. Rowspan

The rowspan attribute allows a cell to span across multiple rows. 

<table>

    <tr>
        <th rowspan="2">Frontend</th>
        <td>HTML</td>
    </tr>

    <tr>
        <td>CSS</td>
    </tr>

</table>

23. Table with Colspan and Rowspan

<table>

    <tr>
        <th rowspan="2">Course</th>
        <th colspan="2">Performance</th>
    </tr>

    <tr>
        <th>Theory</th>
        <th>Practical</th>
    </tr>

    <tr>
        <td>HTML</td>
        <td>85</td>
        <td>90</td>
    </tr>

</table>

24. Table with Links

Table cells can contain hyperlinks. 

<table>

    <tr>
        <th>Course</th>
        <th>Details</th>
    </tr>

    <tr>
        <td>HTML</td>
        <td>
            <a href="html.html">View Course</a>
        </td>
    </tr>

</table>

25. Table with Images

Images can also be placed inside table cells. 

<table>

    <tr>
        <th>Product</th>
        <th>Image</th>
        <th>Price</th>
    </tr>

    <tr>
        <td>Laptop</td>
        <td>
            <img src="laptop.jpg"
                 alt="Laptop"
                 width="100">
        </td>
        <td>50000</td>
    </tr>

</table>

26. Table with Numeric Data

Tables are commonly used to display numeric information. 

<table>

    <tr>
        <th>Product</th>
        <th>Quantity</th>
        <th>Price</th>
    </tr>

    <tr>
        <td>Laptop</td>
        <td>2</td>
        <td>100000</td>
    </tr>

    <tr>
        <td>Mouse</td>
        <td>5</td>
        <td>5000</td>
    </tr>

</table>

27. Column Alignment

Different columns can use different alignment styles. 

<style>

    .name-column {
        text-align: left;
    }

    .marks-column {
        text-align: center;
    }

    .price-column {
        text-align: right;
    }

</style>

<table>

    <tr>
        <th class="name-column">Product</th>
        <th class="marks-column">Quantity</th>
        <th class="price-column">Price</th>
    </tr>

</table>

28. Responsive Tables

Wide tables may require horizontal scrolling on smaller screens. A wrapper can be used to allow horizontal scrolling. 

<div style="overflow-x:auto;">

    <table>

        <tr>
            <th>Name</th>
            <th>Course</th>
            <th>Duration</th>
            <th>Marks</th>
            <th>Status</th>
        </tr>

        <tr>
            <td>John</td>
            <td>HTML</td>
            <td>2 Months</td>
            <td>85</td>
            <td>Completed</td>
        </tr>

    </table>

</div>
Tip: Responsive behavior is especially important when a table contains many columns.

29. Accessible Table Headers

Use proper table headers to clearly identify the meaning of table data. 

<table>

    <thead>

        <tr>
            <th>Student Name</th>
            <th>Course</th>
            <th>Marks</th>
        </tr>

    </thead>

    <tbody>

        <tr>
            <td>John</td>
            <td>HTML</td>
            <td>85</td>
        </tr>

    </tbody>

</table>

30. scope Attribute

The scope attribute can clarify whether a header applies to a column or row. 

<table>

    <tr>
        <th scope="col">Name</th>
        <th scope="col">Course</th>
        <th scope="col">Marks</th>
    </tr>

    <tr>
        <th scope="row">John</th>
        <td>HTML</td>
        <td>85</td>
    </tr>

</table>

31. Table Styling Example

<style>

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

    .student-table th,
    .student-table td {
        border: 1px solid #dee2e6;
        padding: 12px;
    }

    .student-table th {
        background-color: #212529;
        color: white;
    }

    .student-table tr:nth-child(even) {
        background-color: #f8f9fa;
    }

    .student-table tr:hover {
        background-color: #e9ecef;
    }

</style>

<table class="student-table">

    <tr>
        <th>Name</th>
        <th>Course</th>
        <th>Marks</th>
    </tr>

    <tr>
        <td>John</td>
        <td>HTML</td>
        <td>85</td>
    </tr>

    <tr>
        <td>David</td>
        <td>CSS</td>
        <td>90</td>
    </tr>

</table>

32. Complete Student Table

<!DOCTYPE html>
<html>

<head>

    <title>Student Table</title>

    <style>

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

        caption {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        th,
        td {
            border: 1px solid #000;
            padding: 10px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        tr:nth-child(even) {
            background-color: #f8f9fa;
        }

    </style>

</head>

<body>

    <h1>Student Results</h1>

    <table>

        <caption>
            Student Performance
        </caption>

        <thead>

            <tr>
                <th scope="col">Name</th>
                <th scope="col">Course</th>
                <th scope="col">Marks</th>
                <th scope="col">Status</th>
            </tr>

        </thead>

        <tbody>

            <tr>
                <td>John</td>
                <td>HTML</td>
                <td>85</td>
                <td>Pass</td>
            </tr>

            <tr>
                <td>David</td>
                <td>CSS</td>
                <td>90</td>
                <td>Pass</td>
            </tr>

            <tr>
                <td>Sarah</td>
                <td>JavaScript</td>
                <td>88</td>
                <td>Pass</td>
            </tr>

        </tbody>

        <tfoot>

            <tr>
                <td colspan="2">Average Marks</td>
                <td>87.6</td>
                <td>Good</td>
            </tr>

        </tfoot>

    </table>

</body>

</html>

33. Common Mistakes

  • Using tables for general page layout.
  • Forgetting table headers.
  • Incorrectly matching rows and cells.
  • Using rowspan or colspan incorrectly.
  • Creating very wide tables without responsive handling.
  • Using too much inline styling.
  • Creating unclear table structures.

34. Best Practices

  • Use tables for actual tabular data.
  • Use <th> for meaningful headers.
  • Use <caption> when a table needs a title.
  • Use <thead>, <tbody>, and <tfoot> for larger tables.
  • Use CSS for presentation and styling.
  • Use responsive techniques for wide tables.
  • Keep table structures simple and understandable.

35. Practice Task

Create an HTML page containing:

  1. A basic student table.
  2. A table with five rows.
  3. A table with a caption.
  4. A table using thead, tbody, and tfoot.
  5. A table using colspan.
  6. A table using rowspan.
  7. A table containing links.
  8. A table containing images.
  9. A responsive table.
  10. A table with accessible headers using scope.

Summary

HTML tables organize structured information into rows and columns. The main elements are <table>, <tr>, <th>, and <td>. Larger tables can use <caption>, <thead>, <tbody>, and <tfoot>. The colspan and rowspan attributes allow cells to span multiple columns or rows. CSS can be used to create borders, spacing, alignment, hover effects, and responsive table layouts.

← Previous: Nested Lists Next: Table Headers →