EZ

EZNotes

📅 Practical 78: Creating table in a webpage showing datesheet of SSC exams

Learn how to create a table in HTML to display the datesheet for SSC (Secondary School Certificate) exams with proper structure and styling.

🎯 Aim

To create an HTML webpage that displays a datesheet for SSC (Secondary School Certificate) exams using an HTML <table> with proper structure, headings, and styling.

🛠️ What You Need

  • Notepad++ or any text editor
  • A web browser to view the result

📖 Introduction

Tables in HTML are created using the <table> tag with:

  • <thead> — Table header (column headings)
  • <tbody> — Table body (data rows)
  • <tr> — Table row
  • <th> — Table header cell
  • <td> — Table data cell
💡 Tip: An exam datesheet typically includes columns like Date, Day, Subject, Time, and Paper Type. Use colspan to merge cells when needed.

📊 Preview of the Output

📅 SSC Exam Datesheet 2025

Board of Intermediate and Secondary Education (BISE)

📅 Date 📆 Day 📚 Subject ⏰ Time 📄 Paper
March 1, 2025 Saturday English (Compulsory) 9:00 AM - 12:00 PM Paper I
March 3, 2025 Monday Urdu (Compulsory) 9:00 AM - 12:00 PM Paper II
March 5, 2025 Wednesday Mathematics 9:00 AM - 12:00 PM Paper I
March 7, 2025 Friday Physics 9:00 AM - 12:00 PM Paper I
March 10, 2025 Monday Pakistan Studies 9:00 AM - 11:00 AM Paper I

* Timings and dates are subject to change. Check official notification for updates.

📝 Step‑by‑Step: Creating the HTML Page

Step 1: Open Notepad++ and Write the Code

  1. Launch Notepad++.
  2. Set the language to HTML (Language → H → HTML).
  3. Write the following simplified HTML code:
<!-- Practical 78: SSC Exam Datesheet Table --> <html> <head> <title>SSC Exam Datesheet</title> <style> body { font-family: Arial, sans-serif; max-width: 900px; margin: 0 auto; padding: 20px; } h1 { color: #2c3e50; text-align: center; border-bottom: 3px solid #3498db; padding-bottom: 10px; } .subtitle { text-align: center; color: #555; margin-bottom: 20px; } /* Table styling */ .datesheet { width: 100%; border-collapse: collapse; margin: 15px 0; font-size: 0.95em; } .datesheet th { background: #2c3e50; color: white; padding: 12px 15px; text-align: left; font-weight: 700; } .datesheet td { padding: 10px 15px; border-bottom: 1px solid #ecf0f1; } .datesheet tr:hover td { background: #f8f9fa; } .datesheet .time { font-weight: 600; color: #e74c3c; } .datesheet .subject { font-weight: 600; } .datesheet .science { color: #27ae60; } .datesheet .math { color: #2980b9; } .datesheet .english { color: #8e44ad; } .datesheet .urdu { color: #e67e22; } .datesheet .pak { color: #1a5276; } .datesheet .bio { color: #c0392b; } .note { font-size: 0.85em; color: #888; text-align: center; margin-top: 12px; } </style> </head> <body> <h1>📅 SSC Examination Datesheet 2025</h1> <p class="subtitle">Board of Intermediate and Secondary Education (BISE)</p> <!-- Main Datesheet Table --> <table class="datesheet"> <!-- Table Header --> <thead> <tr> <th>📅 Date</th> <th>📆 Day</th> <th>📚 Subject</th> <th>⏰ Time</th> <th>📄 Paper</th> </tr> </thead> <!-- Table Body --> <tbody> <!-- Row 1: English --> <tr> <td>March 1, 2025</td> <td>Saturday</td> <td class="subject english">English (Compulsory)</td> <td class="time">9:00 AM - 12:00 PM</td> <td>Paper I</td> </tr> <!-- Row 2: Urdu --> <tr> <td>March 3, 2025</td> <td>Monday</td> <td class="subject urdu">Urdu (Compulsory)</td> <td class="time">9:00 AM - 12:00 PM</td> <td>Paper II</td> </tr> <!-- Row 3: Mathematics --> <tr> <td>March 5, 2025</td> <td>Wednesday</td> <td class="subject math">Mathematics</td> <td class="time">9:00 AM - 12:00 PM</td> <td>Paper I</td> </tr> <!-- Row 4: Physics --> <tr> <td>March 7, 2025</td> <td>Friday</td> <td class="subject science">Physics</td> <td class="time">9:00 AM - 12:00 PM</td> <td>Paper I</td> </tr> <!-- Row 5: Pakistan Studies --> <tr> <td>March 10, 2025</td> <td>Monday</td> <td class="subject pak">Pakistan Studies</td> <td class="time">9:00 AM - 11:00 AM</td> <td>Paper I</td> </tr> <!-- Row 6: Chemistry --> <tr> <td>March 12, 2025</td> <td>Wednesday</td> <td class="subject science">Chemistry</td> <td class="time">9:00 AM - 12:00 PM</td> <td>Paper I</td> </tr> <!-- Row 7: Biology --> <tr> <td>March 14, 2025</td> <td>Friday</td> <td class="subject bio">Biology</td> <td class="time">9:00 AM - 12:00 PM</td> <td>Paper I</td> </tr> </tbody> </table> <p class="note"> * Timings and dates are subject to change. Check official notification for updates. </p> </body> </html>

Step 2: Save the File

  1. Go to File → Save As… (or press Ctrl+Shift+S).
  2. Choose a location (e.g., Desktop).
  3. Name the file: "ssc_datesheet.html" or "practical78.html".
  4. In "Save as type", select All types (*.*).
  5. Click Save.

Step 3: Open in Browser

  1. Navigate to the folder where you saved the file.
  2. Double‑click the ssc_datesheet.html file.
  3. It will open in your default web browser.
  4. You will see the complete datesheet table.

📊 Table Elements Used

Element Purpose Example
<table> Defines the table container <table class="datesheet">
<thead> Groups header rows Contains column headings
<tbody> Groups body rows (data) Contains exam schedule data
<tr> Table row <tr>...</tr>
<th> Table header cell (bold) <th>Date</th>
<td> Table data cell <td>March 1, 2025</td>
colspan Merges cells horizontally <td colspan="2">...</td>
rowspan Merges cells vertically <td rowspan="2">...</td>

📊 Datesheet Columns Explained

Column Description Data Type
Date The exact date of the exam Date string
Day The day of the week Weekday name
Subject Name of the subject being tested Subject name
Time Start and end time of the exam Time range
Paper Paper number or type Paper identifier

📊 CSS Styling for Tables

<!-- CSS for table styling --> <style> /* Table border and spacing */ .datesheet { width: 100%; border-collapse: collapse; margin: 15px 0; font-size: 0.95em; } /* Header styling */ .datesheet th { background: #2c3e50; color: white; padding: 12px 15px; text-align: left; font-weight: 700; } /* Row hover effect */ .datesheet tr:hover td { background: #f8f9fa; } /* Alternating row colors */ .datesheet tbody tr:nth-child(even) { background: #f8f9fa; } /* Cell styling */ .datesheet td { padding: 10px 15px; border-bottom: 1px solid #ecf0f1; } </style>

📊 Adding colspan and rowspan

<!-- Using colspan to merge cells --> <table> <tr> <th colspan="2">Morning Session</th> <th colspan="2">Evening Session</th> </tr> <tr> <td>Subject</td> <td>Time</td> <td>Subject</td> <td>Time</td> </tr> </table> <!-- Using rowspan to merge rows --> <table> <tr> <td rowspan="2">Day 1</td> <td>Subject 1</td> </tr> <tr> <td>Subject 2</td> </tr> </table>

📊 Common Mistakes to Avoid

Mistake Why It's Wrong Correct Way
Missing <thead> or <tbody> Poor structure, no semantic meaning Use <thead> and <tbody> for structure
Using <td> for headers Headers should be <th> Use <th> for header cells
Forgetting to close tags Invalid HTML Always close </tr>, </td>, etc.
Not using colspan properly Misaligned columns Ensure colspan values match across rows
Poor color contrast Hard to read Use high-contrast colors for headers

📊 Observations

  • <table> is used to create structured data tables.
  • <thead> and <tbody> provide semantic structure.
  • <th> is used for header cells, <td> for data cells.
  • CSS can be used to style tables with borders, colors, hover effects, and alternating rows.
  • colspan merges cells horizontally, rowspan merges vertically.
  • A well-structured table is readable and accessible.

✅ Result

You have successfully:

  • Created an HTML webpage with a datesheet table for SSC exams.
  • Used <table>, <thead>, <tbody>, <tr>, <th>, and <td> tags.
  • Applied CSS styling to make the table look professional.
  • Added a sample datesheet with subjects, dates, and timings.
  • Viewed the table in a browser.
📌 Important: A well-designed table makes data easy to read and understand. Use <thead> and <tbody> for structure, and CSS for styling. Always ensure your tables are accessible with proper headers and clear design.
💡 Next Steps: Try adding more columns like "Venue" or "Paper Type". Use colspan to create a merged header like "Morning Session" and "Evening Session". Add alternating row colors using CSS nth-child. Create a print-friendly version of the datesheet!

🎯 مقصد

ایک HTML ویب صفحہ بنانا جو SSC (سیکنڈری اسکول سرٹیفکیٹ) امتحانات کا ڈیٹ شیٹ HTML <table> کے ساتھ مناسب ساخت، ہیڈنگز، اور اسٹائلنگ کے ساتھ ظاہر کرتا ہے۔

🛠️ آپ کو کیا چاہیے

  • Notepad++ یا کوئی بھی ٹیکسٹ ایڈیٹر
  • نتیجہ دیکھنے کے لیے ایک ویب براؤزر

📖 تعارف

HTML میں ٹیبلز <table> ٹیگ کے ساتھ بنائے جاتے ہیں:

  • <thead> — ٹیبل ہیڈر (کالم ہیڈنگز)
  • <tbody> — ٹیبل باڈی (ڈیٹا کی قطاریں)
  • <tr> — ٹیبل کی قطار
  • <th> — ٹیبل ہیڈر سیل
  • <td> — ٹیبل ڈیٹا سیل
💡 مشورہ: امتحان کی ڈیٹ شیٹ میں عام طور پر تاریخ، دن، مضمون، وقت، اور پیپر کی قسم جیسے کالم شامل ہوتے ہیں۔ ضرورت پڑنے پر سیلز کو ضم کرنے کے لیے colspan کا استعمال کریں۔

📊 آؤٹ پٹ کا پیش منظر

📅 ایس ایس سی امتحانی ڈیٹ شیٹ 2025

انٹرمیڈیٹ اور سیکنڈری ایجوکیشن بورڈ (BISE)

📅 تاریخ 📆 دن 📚 مضمون ⏰ وقت 📄 پیپر
1 مارچ 2025 ہفتہ انگریزی (لازمی) 9:00 AM - 12:00 PM پیپر I
3 مارچ 2025 پیر اردو (لازمی) 9:00 AM - 12:00 PM پیپر II
5 مارچ 2025 بدھ ریاضی 9:00 AM - 12:00 PM پیپر I
7 مارچ 2025 جمعہ طبیعیات 9:00 AM - 12:00 PM پیپر I
10 مارچ 2025 پیر پاکستان اسٹڈیز 9:00 AM - 11:00 AM پیپر I

* اوقات اور تاریخیں تبدیل ہو سکتی ہیں۔ تازہ ترین معلومات کے لیے سرکاری نوٹیفکیشن چیک کریں۔

📝 مرحلہ وار: HTML صفحہ بنانا

پہلا قدم: Notepad++ کھولیں اور کوڈ لکھیں

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا آسان HTML کوڈ لکھیں:
<!-- Practical 78: SSC Exam Datesheet Table --> <html> <head> <title>SSC Exam Datesheet</title> <style> body { font-family: Arial, sans-serif; max-width: 900px; margin: 0 auto; padding: 20px; } h1 { color: #2c3e50; text-align: center; border-bottom: 3px solid #3498db; padding-bottom: 10px; } .subtitle { text-align: center; color: #555; margin-bottom: 20px; } /* ٹیبل اسٹائلنگ */ .datesheet { width: 100%; border-collapse: collapse; margin: 15px 0; font-size: 0.95em; } .datesheet th { background: #2c3e50; color: white; padding: 12px 15px; text-align: left; font-weight: 700; } .datesheet td { padding: 10px 15px; border-bottom: 1px solid #ecf0f1; } .datesheet tr:hover td { background: #f8f9fa; } .datesheet .time { font-weight: 600; color: #e74c3c; } .datesheet .subject { font-weight: 600; } .datesheet .science { color: #27ae60; } .datesheet .math { color: #2980b9; } .datesheet .english { color: #8e44ad; } .datesheet .urdu { color: #e67e22; } .datesheet .pak { color: #1a5276; } .datesheet .bio { color: #c0392b; } .note { font-size: 0.85em; color: #888; text-align: center; margin-top: 12px; } </style> </head> <body> <h1>📅 ایس ایس سی امتحانی ڈیٹ شیٹ 2025</h1> <p class="subtitle">انٹرمیڈیٹ اور سیکنڈری ایجوکیشن بورڈ (BISE)</p> <!-- مرکزی ڈیٹ شیٹ ٹیبل --> <table class="datesheet"> <!-- ٹیبل ہیڈر --> <thead> <tr> <th>📅 تاریخ</th> <th>📆 دن</th> <th>📚 مضمون</th> <th>⏰ وقت</th> <th>📄 پیپر</th> </tr> </thead> <!-- ٹیبل باڈی --> <tbody> <!-- قطار 1: انگریزی --> <tr> <td>1 مارچ 2025</td> <td>ہفتہ</td> <td class="subject english">انگریزی (لازمی)</td> <td class="time">9:00 AM - 12:00 PM</td> <td>پیپر I</td> </tr> <!-- قطار 2: اردو --> <tr> <td>3 مارچ 2025</td> <td>پیر</td> <td class="subject urdu">اردو (لازمی)</td> <td class="time">9:00 AM - 12:00 PM</td> <td>پیپر II</td> </tr> <!-- قطار 3: ریاضی --> <tr> <td>5 مارچ 2025</td> <td>بدھ</td> <td class="subject math">ریاضی</td> <td class="time">9:00 AM - 12:00 PM</td> <td>پیپر I</td> </tr> <!-- قطار 4: طبیعیات --> <tr> <td>7 مارچ 2025</td> <td>جمعہ</td> <td class="subject science">طبیعیات</td> <td class="time">9:00 AM - 12:00 PM</td> <td>پیپر I</td> </tr> <!-- قطار 5: پاکستان اسٹڈیز --> <tr> <td>10 مارچ 2025</td> <td>پیر</td> <td class="subject pak">پاکستان اسٹڈیز</td> <td class="time">9:00 AM - 11:00 AM</td> <td>پیپر I</td> </tr> <!-- قطار 6: کیمسٹری --> <tr> <td>12 مارچ 2025</td> <td>بدھ</td> <td class="subject science">کیمسٹری</td> <td class="time">9:00 AM - 12:00 PM</td> <td>پیپر I</td> </tr> <!-- قطار 7: بائیولوجی --> <tr> <td>14 مارچ 2025</td> <td>جمعہ</td> <td class="subject bio">بائیولوجی</td> <td class="time">9:00 AM - 12:00 PM</td> <td>پیپر I</td> </tr> </tbody> </table> <p class="note"> * اوقات اور تاریخیں تبدیل ہو سکتی ہیں۔ تازہ ترین معلومات کے لیے سرکاری نوٹیفکیشن چیک کریں۔ </p> </body> </html>

دوسرا قدم: فائل محفوظ کریں

  1. File → Save As… (یا Ctrl+Shift+S) پر جائیں۔
  2. ایک مقام منتخب کریں (مثلاً Desktop)۔
  3. فائل کا نام رکھیں: "ssc_datesheet.html" یا "practical78.html"۔
  4. "Save as type" میں All types (*.*) منتخب کریں۔
  5. Save پر کلک کریں۔

تیسرا قدم: براؤزر میں کھولیں

  1. اس فولڈر میں جائیں جہاں آپ نے فائل محفوظ کی تھی۔
  2. ssc_datesheet.html فائل پر ڈبل‑کلک کریں۔
  3. یہ آپ کے ڈیفالٹ براؤزر میں کھل جائے گی۔
  4. آپ کو مکمل ڈیٹ شیٹ ٹیبل نظر آئے گا۔

📊 استعمال شدہ ٹیبل عناصر

عنصر مقصد مثال
<table> ٹیبل کنٹینر کی وضاحت کرتا ہے <table class="datesheet">
<thead> ہیڈر قطاروں کو گروپ کرتا ہے کالم ہیڈنگز پر مشتمل ہے
<tbody> باڈی قطاروں کو گروپ کرتا ہے (ڈیٹا) امتحانی شیڈول ڈیٹا پر مشتمل ہے
<tr> ٹیبل کی قطار <tr>...</tr>
<th> ٹیبل ہیڈر سیل (بولڈ) <th>تاریخ</th>
<td> ٹیبل ڈیٹا سیل <td>1 مارچ 2025</td>
colspan سیلز کو افقی طور پر ضم کرتا ہے <td colspan="2">...</td>
rowspan سیلز کو عمودی طور پر ضم کرتا ہے <td rowspan="2">...</td>

📊 ڈیٹ شیٹ کے کالمز کی وضاحت

کالم وضاحت ڈیٹا کی قسم
تاریخ امتحان کی صحیح تاریخ تاریخ کا متن
دن ہفتے کا دن دن کا نام
مضمون ٹیسٹ کیے جانے والے مضمون کا نام مضمون کا نام
وقت امتحان کا آغاز اور اختتامی وقت وقت کی حد
پیپر پیپر کا نمبر یا قسم پیپر کا شناخت کنندہ

📊 ٹیبلز کے لیے CSS اسٹائلنگ

<!-- ٹیبل اسٹائلنگ کے لیے CSS --> <style> /* ٹیبل بارڈر اور فاصلہ */ .datesheet { width: 100%; border-collapse: collapse; margin: 15px 0; font-size: 0.95em; } /* ہیڈر اسٹائلنگ */ .datesheet th { background: #2c3e50; color: white; padding: 12px 15px; text-align: left; font-weight: 700; } /* قطار ہوور اثر */ .datesheet tr:hover td { background: #f8f9fa; } /* متبادل قطار کے رنگ */ .datesheet tbody tr:nth-child(even) { background: #f8f9fa; } /* سیل اسٹائلنگ */ .datesheet td { padding: 10px 15px; border-bottom: 1px solid #ecf0f1; } </style>

📊 colspan اور rowspan کا اضافہ

<!-- سیلز کو ضم کرنے کے لیے colspan کا استعمال --> <table> <tr> <th colspan="2">صبح کا سیشن</th> <th colspan="2">شام کا سیشن</th> </tr> <tr> <td>مضمون</td> <td>وقت</td> <td>مضمون</td> <td>وقت</td> </tr> </table> <!-- قطاروں کو ضم کرنے کے لیے rowspan کا استعمال --> <table> <tr> <td rowspan="2">دن 1</td> <td>مضمون 1</td> </tr> <tr> <td>مضمون 2</td> </tr> </table>

📊 عام غلطیاں جن سے بچنا ہے

غلطی یہ کیوں غلط ہے صحیح طریقہ
<thead> یا <tbody> غائب خراب ساخت، کوئی سیمینٹک معنی نہیں ساخت کے لیے <thead> اور <tbody> استعمال کریں
ہیڈرز کے لیے <td> کا استعمال ہیڈرز <th> ہونے چاہئیں ہیڈر سیلز کے لیے <th> استعمال کریں
ٹیگز بند کرنا بھول جانا غلط HTML ہمیشہ </tr>، </td> وغیرہ بند کریں
colspan کا صحیح استعمال نہ کرنا غلط ترتیب والے کالم یقینی بنائیں کہ colspan کی قدریں قطاروں میں مماثل ہوں
ناقص رنگ کنٹراسٹ پڑھنا مشکل ہیڈرز کے لیے ہائی کنٹراسٹ رنگ استعمال کریں

📊 مشاہدات

  • <table> ساختہ ڈیٹا ٹیبلز بنانے کے لیے استعمال ہوتا ہے۔
  • <thead> اور <tbody> سیمینٹک ساخت فراہم کرتے ہیں۔
  • <th> ہیڈر سیلز کے لیے استعمال ہوتا ہے، <td> ڈیٹا سیلز کے لیے۔
  • CSS کو بارڈرز، رنگوں، ہوور اثرات، اور متبادل قطاروں کے ساتھ ٹیبلز کو اسٹائل کرنے کے لیے استعمال کیا جا سکتا ہے۔
  • colspan سیلز کو افقی طور پر ضم کرتا ہے، rowspan عمودی طور پر ضم کرتا ہے۔
  • ایک اچھی ساختہ ٹیبل پڑھنے کے قابل اور قابل رسائی ہے۔

✅ نتیجہ

آپ نے کامیابی سے:

  • ایس ایس سی امتحانات کے لیے ڈیٹ شیٹ ٹیبل کے ساتھ ایک HTML ویب صفحہ بنایا۔
  • <table>، <thead>، <tbody>، <tr>، <th>، اور <td> ٹیگز کا استعمال کیا۔
  • ٹیبل کو پیشہ ورانہ بنانے کے لیے CSS اسٹائلنگ کا اطلاق کیا۔
  • مضامین، تاریخوں اور اوقات کے ساتھ ایک نمونہ ڈیٹ شیٹ شامل کی۔
  • ٹیبل کو براؤزر میں دیکھا۔
📌 اہم: ایک اچھی طرح سے ڈیزائن کردہ ٹیبل ڈیٹا کو پڑھنے اور سمجھنے میں آسان بناتا ہے۔ ساخت کے لیے <thead> اور <tbody> اور اسٹائلنگ کے لیے CSS استعمال کریں۔ ہمیشہ یقینی بنائیں کہ آپ کی ٹیبلز مناسب ہیڈرز اور واضح ڈیزائن کے ساتھ قابل رسائی ہیں۔
💡 اگلے اقدامات: "مقام" یا "پیپر کی قسم" جیسے مزید کالم شامل کرنے کی کوشش کریں۔ colspan کا استعمال کرتے ہوئے "صبح کا سیشن" اور "شام کا سیشن" جیسی ضم شدہ ہیڈنگ بنائیں۔ CSS nth-child کا استعمال کرتے ہوئے متبادل قطار کے رنگ شامل کریں۔ ڈیٹ شیٹ کا پرنٹ کے موافق ورژن بنائیں!
⬅ Back to Practical Notebooks