table.md

📝 HTML Table Exercise

👨‍🏫 Instructor: Mr. Khem Puthea

📧 Email: puthea.khem@gmail.com 💬 Telegram: t.me/iamputhea

---

🎯 Learning Outcomes

By the end of this exercise, students will be able to:

• Create HTML tables using <table>, <tr>, <th>, and <td>
• Use colspan and rowspan attributes
• Add captions and padding to tables
• Understand border collapsing and spacing

---

🧩 Part A – Create a Basic Table

Instructions:

1. Create an HTML file named basic-table.html.
2. Build a table displaying the following student grades:

Name	Math	Science	English
Alice	85	90	88
Bob	78	82	79
Charlie	92	87	91

3. Add a caption: "Student Grades - Semester 1"
4. Add borders to the table and collapse them.
5. Apply padding of 10px to each cell.

---

🎨 Part B – Spanning Columns

Instructions:

1. Create a file named colspan-example.html.
2. Create a table to display ticket sales:

	Saturday	Sunday
Tickets Sold	120	135
Total Sales	$600	$675

3. Add a caption: "Weekend Ticket Sales"
4. Use <th> and <td> properly and apply the scope attribute.

---

🧱 Part C – Spanning Rows

Instructions:

1. Create a file named rowspan-example.html.
2. Create a TV schedule table:

Time	ABC	BBC	CNN
6pm–7pm	Movie	Comedy	News
7pm–8pm		Sport	Current Affairs

• The "Movie" entry under ABC should span two rows.
• Use the rowspan attribute properly.

---

Challenge Task – Design Your Own Table

Create a custom HTML table for your weekly class schedule:

• Include at least 5 rows and 5 columns.
• Use colspan or rowspan where necessary.
• Add a styled caption.
• Apply CSS styles for border, padding, and spacing.

---

📚 Reference:

• W3Schools - HTML Tables
• MDN - <table>
• HTML Table Generator