HTML, CSS & JavaScript · Chapter 1.5 · Intermediate level

Tables (Report Card & Cricket Scorecard)

टेबल बनाना (रिपोर्ट कार्ड और क्रिकेट स्कोरकार्ड)

How are school time-tables, exam mark-sheets, and IPL scorecards built? With HTML <table>! Just remember the hierarchy from outside to inside: <table> is the whole board → <tr> (Table Row) is one horizontal line → <th> (Table Heading) makes bold column titles in the top row → <td> (Table Data) holds normal cells in every row below!

स्कूल का टाइम-टेबल, मार्कशीट और IPL क्रिकेट स्कोरकार्ड कैसे बनते हैं? <table> से! इसे बाहर से अंदर ऐसे याद रखो: <table> पूरा बड़ा बोर्ड है → <tr> (Table Row) एक आड़ी पंक्ति है → <th> (Table Heading) सबसे ऊपर की बोल्ड हेडिंग है → <td> (Table Data) नीचे की पंक्तियों के डेटा डिब्बे हैं!

Open this chapter in the live classroom HTML, CSS & JavaScript course outline

In the classroom you can run and edit this code in your browser, get hints and mark the chapter as done. क्लास में यह code ब्राउज़र में चलाकर बदल सकते हो।

Words and symbols in this chapter

<table> ... </table>: Outer container that starts and finishes the entire table.; पूरी टेबल शुरू और बंद करने वाला मुख्य डिब्बा।
<tr> ... </tr>: Table Row — creates one horizontal row across the table.; Table Row — टेबल में एक नई आड़ी लाइन (पंक्ति) बनाता है।
<th> ... </th>: Table Header — bold heading cell (used in the first row).; Table Heading — सबसे ऊपर वाले मोटे अक्षर के हेडिंग खाने।
<td> ... </td>: Table Data — normal cell holding values like 'Rohit' or '100'.; Table Data — सामान्य खाने जिनमें नाम या नंबर ('Rohit', '100') रखते हैं।

Ready example

<h3>🏏 India Cricket Scorecard</h3>
<table border="1">
  <tr>
    <th>Batsman</th>
    <th>Runs</th>
    <th>Sixes</th>
  </tr>
  <tr>
    <td>Rohit Sharma</td>
    <td>104</td>
    <td>7</td>
  </tr>
  <tr>
    <td>Virat Kohli</td>
    <td>95</td>
    <td>4</td>
  </tr>
</table>

What you will see: A clean bordered scorecard / report-card table renders immediately in the browser preview!

प्रिव्यू में बॉर्डर के साथ साफ़-सुथरा स्कोरकार्ड / रिपोर्ट कार्ड टेबल बनकर आ जाएगा!

Line by line

<table border="1">: Starts a bordered table.; बॉर्डर वाली टेबल शुरू करता है।
<tr> <th>Batsman</th> <th>Runs</th> <th>Sixes</th> </tr>: Row 1: creates 3 bold column headers.; पहली पंक्ति (<tr>): 3 बोल्ड कॉलम हेडिंग्स (<th>) बनाईं।
<tr> <td>Rohit Sharma</td> <td>104</td> <td>7</td> </tr>: Row 2: fills data cells under each column.; दूसरी पंक्ति (<tr>): हर कॉलम के नीचे डेटा (<td>) भरा।

Common mistake

✗ Wrong

<table><th>Naam</th><td>Ravi</td></table>

✓ Right

<table>
  <tr><th>Naam</th></tr>
  <tr><td>Ravi</td></tr>
</table>

Every <th> or <td> cell MUST sit inside a <tr> (Table Row) tag!

टेबल का हर खाना (<th> या <td>) हमेशा एक पंक्ति <tr>...</tr> के अंदर होना चाहिए!

Your task

Build a <table> with 2 <th> headings (Name and Marks) and at least 1 data row <tr> containing a friend's name and marks in <td>!

एक <table> बनाओ जिसमें 2 <th> हेडिंग्स (Name और Marks) हों और नीचे <tr> रो में दोस्त का नाम और मार्क्स <td> में लिखे हों!

Create <table>...</table>.
<table>...</table> बनाओ।
First <tr>: add <th>Name</th> and <th>Marks</th>.
पहली <tr> में <th>Name</th> और <th>Marks</th> लिखो।
Second <tr>: add <td>Friend Name</td> and <td>95</td>, then Run!
दूसरी <tr> में <td>नाम</td> और <td>95</td> लिखकर Run दबाओ!

Starter code for the task

<h3>📊 Student Report Card</h3>
<table border="1">
  <tr>
    <th>Name</th>
    <!-- TODO 1: doosra heading cell banao: Marks (th tag) -->
  </tr>
  <!-- TODO 2: nayi row (tr) banao jisme 2 td cells hon: dost ka naam aur uske marks -->
</table>

Do this task in the classroom: your code is checked automatically and you get hints if something is missing.

Recap

<table> is the whole table and <tr> is one row.
<th> = bold heading cell (top row), <td> = normal data cell.
Every <th> and <td> must sit inside a <tr>.

<table> पूरी टेबल है और <tr> एक row (पंक्ति)।
<th> = मोटा हेडिंग खाना (ऊपर की row), <td> = सामान्य data खाना।
हर <th> और <td> किसी <tr> के अंदर होना चाहिए।

Quick quiz

In an HTML <table>, what does <tr> create?

HTML <table> में <tr> टैग क्या बनाता है?

Bold heading cell
A horizontal Table Row
Table border
Form button

Show the answer

Answer: B (A horizontal Table Row)

<tr> creates a Table Row; <th> is header cell and <td> is data cell.

<tr> (Table Row) टेबल की एक आड़ी पंक्ति बनाता है।

Practice problems for this chapter

Report Card Table · Intermediate · Write the code
रिपोर्ट कार्ड टेबल

Solve them in the Practice Zone, where each answer is checked automatically and two hints are available.