Introduction

Hello, I’m Salman Ahmad, a teacher and web developer.
Welcome to today’s lecture on HTML Tables and Comments, an important part of web development for Class 9 Computer Science. Tables allow us to arrange data neatly into rows and columns, making it easy for users to read, compare, and analyze information. Comments, on the other hand, are used by developers to explain their code or keep notes inside HTML without affecting what the user sees in the browser.

In this lesson, we will cover the structure of tables, the purpose of comments, practical examples, common mistakes to avoid, and real-life applications of both. By the end, you will not only be able to create your own tables but also write clean, well-documented HTML code.

Full Definitions

HTML Tables

Tables in HTML are used to organize and present data in a structured format, making it easier to read and compare information.

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

Example: Student marks, product lists, or schedules can be displayed in a neat grid format using tables.

HTML Comments

Comments in HTML are notes written inside the code that are not displayed in the browser. They help developers explain the code, leave reminders, or temporarily disable parts of code.

Syntax: <!-- This is a comment -->

Browsers completely ignore everything written inside comment tags.

Understanding HTML Tables in Depth

Extra[You can skip this during writing on notebooks. It is just an extra knowledge.]

A table is like a grid made up of rows and columns. Each row contains data cells, and each column represents a category of data. For example, a student report card might have subjects as column headers and marks as rows.

Basic Example of a Table

<table border="1">
  <tr>
    <th>Name</th>
    <th>Class</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>9</td>
    <td>85</td>
  </tr>
  <tr>
    <td>Ayesha</td>
    <td>9</td>
    <td>92</td>
  </tr>
</table>

This code creates a table with a header row and two student entries. Notice how <th> is used for headers and <td> for normal data.

Table Attributes

Extra[You can skip this during writing on notebooks. It is just an extra knowledge.]
  • border → Adds borders to the table.
  • cellpadding → Adds space inside each cell.
  • cellspacing → Adds space between cells.
  • rowspan → Merges cells vertically.
  • colspan → Merges cells horizontally.
  • caption → Adds a title to the table.

Importance of Comments in HTML

Extra[You can skip this during writing on notebooks. It is just an extra knowledge.]

Comments are often overlooked by beginners, but they are extremely valuable in real projects. Imagine working in a team where multiple developers are editing the same file — comments help explain the purpose of each section of code.

Another benefit of comments is that they allow you to temporarily disable parts of code without deleting them. For example, if you want to test a layout without a table, you can wrap it in a comment.

Example of a Comment

<!-- This table shows the marks of students -->
<table border="1">
  <tr>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Sara</td>
    <td>90</td>
  </tr>
</table>

Real-Life Applications of Tables

Extra[You can skip this during writing on notebooks. It is just an extra knowledge.]
  • Timetables in schools and universities.
  • Product pricing lists in e-commerce websites.
  • Sports scoreboards.
  • Restaurant menus.
  • Employee salary sheets.

Common Mistakes to Avoid

Extra[You can skip this during writing on notebooks. It is just an extra knowledge.]
  • Forgetting to close tags like </tr> or </td>.
  • Using tables for layout instead of CSS (not recommended in modern design).
  • Not using headers, which makes tables less accessible for screen readers.

Best Practices

Extra[You can skip this during writing on notebooks. It is just an extra knowledge.]
  • Always use <th> for header cells.
  • Keep tables simple and easy to read.
  • Use comments to explain sections of your code.
  • Combine tables with CSS for better styling.

Quick Notes

Tables in HTML

  • Tables organize data into rows and columns.
  • <table> → Creates the table.
  • <tr> → Defines a table row.
  • <td> → Defines table data cell.
  • <th> → Defines a table header cell.

Comments in HTML

  • Used for notes or reminders inside code.
  • Ignored by browsers.
  • Syntax: <!-- comment here -->

MCQs – HTML Tables & Comments

  1. Which tag is used to create a table in HTML?
    a) <tr>
    b) <table> ✅
    c) <td>
    d) <th>
  2. Which tag is used to define a row in an HTML table?
    a) <td>
    b) <tr> ✅
    c) <table>
    d) <th>
  3. What does the <th> tag represent in an HTML table?
    a) Table row
    b) Table header ✅
    c) Table data
    d) Table border
  4. Which attribute merges cells horizontally?
    a) rowspan
    b) colspan ✅
    c) cellpadding
    d) cellspacing
  5. Which attribute merges cells vertically?
    a) colspan
    b) rowspan ✅
    c) border
    d) caption
  6. What is the purpose of the <caption> tag in a table?
    a) To add column headers
    b) To add a title to the table ✅
    c) To merge rows
    d) To set table borders
  7. Which of the following adds space inside each cell of a table?
    a) border
    b) cellpadding ✅
    c) cellspacing
    d) colspan
  8. Which syntax correctly represents an HTML comment?
    a) // This is a comment
    b) /* This is a comment */
    c) <!-- This is a comment --> ✅
    d) # This is a comment
  9. What happens to the text written inside an HTML comment?
    a) It is shown in the browser.
    b) It is hidden from the browser ✅
    c) It becomes bold.
    d) It appears as table data.

Summary

In this lecture, we explored two important parts of HTML: tables and comments. Tables are useful for presenting structured data, while comments help developers keep their code clean and organized. We learned the syntax, attributes, real-life applications, and best practices of both. With this knowledge, you can now create professional tables and write better HTML code.

FAQs – HTML Tables & Comments

1. Can I use tables for website layouts?

While it was common in the past, modern websites use CSS for layout. Tables should only be used for displaying data.

2. Are comments visible to website visitors?

No, comments are completely ignored by the browser and are only visible in the source code.

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

<td> defines a normal data cell, while <th> defines a header cell that appears bold and centered.

4. Can I add images inside a table?

Yes, tables can contain not just text but also images, links, and even other tables.

5. Why should I use comments?

Comments make your code easier to understand and maintain, especially when working on large projects or with multiple developers.