Building a Simple HTML Table
📖 Scenario: You are creating a simple webpage to display a list of fruits and their colors in a table format. This will help visitors quickly see the fruit names and their colors.
🎯 Goal: Build a basic HTML table with a header row and two data rows showing fruit names and their colors.
📋 What You'll Learn
Use semantic HTML table elements: , , ,
| , and | Create a header row with column titles 'Fruit' and 'Color' Add two rows of fruit data: 'Apple' with color 'Red' and 'Banana' with color 'Yellow' Ensure the HTML is valid and renders correctly in a browser 💡 Why This Matters 🌍 Real World Tables are used on websites to organize and display data like schedules, prices, or lists clearly. 💼 Career Knowing how to build accessible and semantic tables is important for web developers to present data effectively and meet accessibility standards. Progress0 / 4 steps 1 Create the basic HTML table structure Write the opening and closing <table> tags to start and end your table.HTML Need a hint? Think of the table as a box that holds rows and columns. Start by creating the box with 2 Add the table header row Inside the <table>, add a <thead> section containing one <tr> row with two header cells: <th>Fruit</th> and <th>Color</th>.HTML Need a hint? The header row uses 3 Add the table body with fruit data rows Below the <thead>, add a <tbody> section containing two <tr> rows. The first row should have <td>Apple</td> and <td>Red</td>. The second row should have <td>Banana</td> and <td>Yellow</td>.HTML Need a hint? The body rows go inside 4 Add a caption to describe the table Add a <caption> element immediately inside the <table> tags with the text Fruit Colors to describe the table's content.HTML Need a hint? The |
|---|