Tables: rows and columns टेबल: पंक्तियाँ और कॉलम

1. table, tr, th and td

A table is built row by row:

• <table> wraps everything
• <tr> is one table row
• <th> is a heading cell (bold, centred)
• <td> is a normal data cell

Every row should have the same number of cells, so the columns line up. Use tables only for real data in rows and columns, not for page layout.

                <table>
  <tr><th>Day</th><th>Period 1</th><th>Period 2</th></tr>
  <tr><td>Monday</td><td>Maths</td><td>Hindi</td></tr>
</table>
              

Challenge: Class timetable

Build a timetable with at least 3 rows. The first row has 3 or more <th> headings (Day, Period 1, Period 2…). The other rows use <td> cells for each day.

2. thead, tbody and caption

Bigger tables are split into parts:

• <caption> — the table’s title, right after <table>
• <thead> — the heading row(s)
• <tbody> — the data rows

This helps screen readers and lets you style the header separately. A little CSS makes tables neater: border-collapse: collapse joins the cell borders into single lines.

                <style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #999; padding: 6px; }
</style>
<table>
  <caption>Sample scores</caption>
  <thead><tr><th>Team</th><th>Points</th></tr></thead>
  <tbody><tr><td>Team A</td><td>12</td></tr></tbody>
</table>
              

Challenge: IPL points table

Complete the points table (sample numbers are fine):

• <tbody> needs at least 4 teams
• every team row has the same number of cells as the header (4)
• add a <style> with table { border-collapse: collapse; }