📊 HTML Tables

Learn how to organize and display data in rows and columns

📚 Table Overview

📌 Key Concept

The <table> tag defines an HTML table. Each table row is defined with a <tr> tag. Table header is defined with <th> tag. A table data/cell is defined with a <td> tag.

Tables are useful for arranging data like text, images, links, other tables, etc. into rows and columns of cells.

🏗️ Table Structure Tags

For better semantic structure, tables can be divided into three parts:

  • <thead>: Groups header content (first row).
  • <tbody>: Groups the body content (data rows).
  • <tfoot>: Groups footer content (totals, summaries).

Note: Browsers can use these elements to enable scrolling of the table body independently of the header and footer.

💻 Code Examples

📝 Example 1: Student Score Report

<table border="1">
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>

<tr>
<td>101</td>
<td>Riya Sharma</td>
<td>Maths</td>
<td>92</td>
</tr>

<!-- More rows... -->
</table>

▶️ Output:

Student Score Report
Roll No Name Subject Marks
101 Riya Sharma Maths 92
102 Aditya Singh Science 85
103 Ragini Patel English 89
Average Marks 88.6

📝 Example 2: Merging Cells (Colspan & Rowspan)

Use colspan to span columns and rowspan to span rows.

<table border="1">
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Contact</th>
</tr>

<tr>
<th>Email</th>
<th>Phone</th>
</tr>

<tr>
<td>John Doe</td>
<td>john@example.com</td>
<td>555-1234</td>
</tr>
</table>

▶️ Output:

Name Contact
Email Phone
John Doe john@example.com 555-1234

🔧 Common Table Attributes

Note: Many of these attributes are deprecated in HTML5 and CSS should be used instead, but they are good to know for legacy code.

Attribute Description Example
border Specifies the width of the borders border="1"
cellpadding Space between cell wall and content cellpadding="10"
cellspacing Space between cells cellspacing="5"
width Width of the table width="100%"
bgcolor Background color bgcolor="lightblue"

✍️ Practice Assignments

🎯 Assignment 1: Class Schedule

Easy

Create a simple timetable using table rows and columns.

  • Use <th> for days of the week.
  • Use <td> for subjects.

🎯 Assignment 2: Product List

Medium

Create a product list with images, names, and prices in a table.

  • Use colspan to add a "Total" row at the bottom.
  • Add a caption to the table.

🎓 Key Takeaways

  • Use <table> to create a table.
  • <tr> creates a row.
  • <th> creates a header cell (bold and centered by default).
  • <td> creates a standard data cell.
  • Use colspan and rowspan to merge cells.