Building a Simple HTML Table with Rows and Columns
📖 Scenario: You are creating a simple webpage to show a small table of fruits and their colors. This is like making a list on paper but using a table so it looks neat and organized.
🎯 Goal: Build a basic HTML table with a header row and two data rows. The table will have two columns: one for the fruit name and one for its color.
📋 What You'll Learn
Use semantic HTML table elements: , , ,
| , and | . Create exactly two columns: 'Fruit' and 'Color'. Add a header row with column titles. 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 everywhere on websites to show organized data like schedules, prices, or lists. 💼 Career Knowing how to build and structure tables is a basic skill for web developers and content creators. Progress0 / 4 steps 1 Create the basic table structure Write the opening and closing <table> tags and inside them add a <thead> section with one row <tr>. Inside this row, add two header cells <th> with the exact text Fruit and Color.HTML Need a hint? Remember to use 2 Add the table body section Below the <thead>, add a <tbody> section inside the <table> tags. Leave it empty for now.HTML Need a hint? The 3 Add the first data row for Apple Inside the <tbody>, add a row <tr> with two cells <td>. The first cell should contain the exact text Apple and the second cell should contain Red.HTML Need a hint? Use 4 Add the second data row for Banana Below the first data row inside <tbody>, add another row <tr> with two cells <td>. The first cell should contain Banana and the second cell should contain Yellow.HTML Need a hint? Remember to add the new row inside the |
|---|