Practice Problems

Create a new HTML file for each problem to apply the concepts of tables.

Problem 1: Simple Student Grade Table

File Name: problem1.html
Create a table showing at least 3 students and their grades in two subjects.
Use <thead> for a header row labeled: “Name,” “Subject A,” “Subject B.”
Use <tbody> for student rows.
Optionally, add a <tfoot> row indicating “Average” or “Total.”

Problem 2: Product Inventory

File Name: problem2.html
Build a table with columns for “Item,” “Quantity,” and “Price.”
Include at least 4 rows of data.
Use the border="1" attribute to quickly visualize table boundaries.
End the page with a paragraph summarizing how to read the table.

Problem 3: Combining Tables and Forms

File Name: problem3.html
Experiment by placing a small form inside a table:
- One row for “Username” with a text <input>.
- Another row for “Password” with a password <input>.
- A final row for a <button type="submit"> or <input type="submit">.
Label each <input> with a <th> or <td> to describe the field.
Write a short note on whether you find this approach user-friendly.

Advanced Problems

Problem 4: Employee Directory Table

File Name: problem4.html

Instructions:

Table Structure:
- Create a table to display an employee directory.
- Use <thead> for the header row, labeling columns as: "Employee Name", "Department", and "Email".
Table Body:
- Within <tbody>, include at least four rows of employee data.
- Ensure each row contains cells (<td>) corresponding to the header columns.
Table Footer (Optional):
- Optionally, add a <tfoot> row that displays a summary (for example, "Total Employees: 4").
Additional Details:
- Use the border="1" attribute to quickly visualize table boundaries.
- End the page with a paragraph explaining how the table organizes employee information.

Objective:

Practice constructing a well-organized table with separate header, body, and footer sections to represent an employee directory.

Problem 5: Restaurant Menu Table

File Name: problem5.html

Instructions:

Table Structure:
- Create a table to represent a restaurant menu.
- Use <thead> for the header row with the columns: "Dish Name", "Ingredients", "Price", and "Spicy" (indicating whether the dish is spicy).
Table Body:
- Within <tbody>, add at least five rows, each representing a menu item.
- Fill in each cell with relevant data, such as the dish’s name, a brief list of ingredients, its price (e.g., "$12.99"), and a note such as "Yes" or "No" in the "Spicy" column.
Table Caption (Optional):
- Add a <caption> at the top of the table that reads "Today's Special Menu" to provide context.
Additional Details:
- Use the border="1" attribute for clear visual boundaries.
- Include a paragraph below the table explaining the purpose of each column.

Objective:

Build a detailed restaurant menu table that employs semantic grouping with a caption, headers, and data rows to display dish information clearly.

Problem 6: Travel Itinerary Table

File Name: problem6.html

Instructions:

Table Structure:
- Create a table to outline a travel itinerary.
- Use a <caption> element to title the table "My Travel Itinerary".
- Within <thead>, define header cells with the column titles: "Date", "Destination", and "Activity".
Table Body:
- In <tbody>, include at least four rows that detail your travel plans.
- For each row, provide:
  - The date of the activity.
  - The destination or city name.
  - A brief description of the planned activity (e.g., "City Tour", "Museum Visit", "Local Cuisine Tasting").
Table Footer (Optional):
- Optionally, use <tfoot> to add a summary row, such as a final note or total number of days traveled.
Additional Details:
- Use the border="1" attribute to easily see table divisions.
- Conclude with a paragraph summarizing how the itinerary table helps organize travel plans.

Objective:

Develop a travel itinerary table that uses a caption along with separate header, body, and optional footer sections, demonstrating clear organization of schedule data.

HTML Tables