3.3. Creating Tables (30 minutes)

• Introduction to the <table> tag and its components: <tr>, <th>, <td>. • Example

Introduction to the <table> Tag and Its Components

HTML tables are a structured way to display data in rows and columns. Tables are created using the <table> tag, and inside the table, you define rows and cells with specific tags:

• <table>: The main tag that wraps the entire table.

• <tr> (table row): Used to create a row in the table.

• <th> (table header): Defines header cells in the table, usually bold and centered by default. Typically used in the first row to label columns.

• <td> (table data): Represents standard data cells in the table.

Example of a Simple Table

Here’s an example of an HTML table displaying names and ages:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>30</td>
  </tr>
</table>

Explanation of the Code:

• <table border="1">: The border attribute adds a visible border around the table and its cells. You can adjust the thickness of the border by changing the value.

• <th>: The table headers ("Name" and "Age") are bold by default.

• <tr>: Each row is defined by the <tr> tag. Inside each row, we have:

  • <td>: Table data cells, containing the values (e.g., "John", "25").

Tables are useful for organizing and displaying data in a grid-like format, making it easier to compare information side by side.

Students Activity

Objective:

Students will create a simple table using the <table>, <tr>, <th>, and <td> tags to display a list of products, their prices, and quantities.

Activity Steps:

1. Open the Existing HTML File:

   • Instruct students to open their existing HTML file (e.g., exercise.html) using a text editor (such as Notepad or Visual Studio Code).

2. Add a Simple Table:

   • Ask students to create a table that lists their favorite products, including the product name, price, and quantity. The table should have headers for each column and data rows for each product.

   • Example:

     <h2>Product List</h2>
     <table border="1">
       <tr>
         <th>Product Name</th>
         <th>Price</th>
         <th>Quantity</th>
       </tr>
       <tr>
         <td>Apple</td>
         <td>$1.00</td>
         <td>10</td>
       </tr>
       <tr>
         <td>Banana</td>
         <td>$0.50</td>
         <td>20</td>
       </tr>
       <tr>
         <td>Orange</td>
         <td>$0.75</td>
         <td>15</td>
       </tr>
     </table>

3. Save and Preview the Table:

   • After adding the table, students should save their HTML file and open it in a browser to view the table.

   • They should see a table with three columns (Product Name, Price, Quantity) and three rows of data.

4. Experiment with Table Features (Optional):

   • Encourage students to experiment with additional features:

     • Adjust the border thickness or remove it entirely by setting the border value to 0.

     • Change the alignment of table cells (text-align: left, right, center) using CSS.

     • Example of styling the table with CSS:

       <style>
         table {
           border-collapse: collapse; /* Ensures borders do not have gaps */
           width: 100%; /* Sets table width to 100% of the parent element */
         }
         th, td {
           border: 1px solid black;
           padding: 8px;
           text-align: center; /* Centers text in cells */
         }
         th {
           background-color: #f2f2f2; /* Light background for header cells */
         }
       </style>

Discussion and Reflection:

After students have completed the activity, initiate a discussion about the following topics:

• What is the difference between the <th> and <td> elements in a table?

• How does the <tr> tag help in organizing rows in the table?

• What kinds of content would be best displayed in a table format on a webpage?

Encourage students to share their experience with creating tables and discuss any challenges they encountered while formatting or organizing data.

Extended Activity (Optional):

For students who finish early or want additional practice, suggest the following:

1. Add More Rows and Columns:

   • Ask students to add more rows to their table, with additional products, or create a new table for a different dataset (e.g., a list of their favorite movies, books, or countries).

   • Example:

     <tr>
       <td>Grapes</td>
       <td>$2.50</td>
       <td>8</td>
     </tr>

2. Merge Cells Using colspan and rowspan:

   • Introduce the colspan and rowspan attributes to allow students to merge table cells.

   • HTML Table Colspan & Rowspan

   • Example of merging two columns:

   <table border="1" cellspacing="3" width="80%">
         <tr>
           <th>Product Name</th>
           <th>Price</th>
           <th>Quantity</th>
         </tr>
         <tr>
           <td>Apple</td>
           <td>$1.00</td>
           <td>10</td>
         </tr>
         <tr>
           <td>Banana</td>
           <td colspan="2">Total:$0.50 x 20=$10.00</td>
         </tr>
         <tr>
           <td>Grapes</td>
           <td colspan="2">Total:$2.50 x 8=$20.00</td>
         </tr>
       </table>

Product Name	Price	Quantity
Apple	$1.00	10
Banana	Total:$0.50 x 20=$10.00
Grapes	Total:$2.50 x 8=$20.00

1. Create a Table with Nested Rows or Headers:

   • Encourage students to create a more complex table with additional headers or nested rows to represent subcategories or more detailed information.

By the end of this activity, students will understand how to create and format tables in HTML, allowing them to organize and display data clearly on their webpages. They will also gain experience working with table attributes and understand how to control the presentation of tabular data.