Tables — Data in Rows and Columns! 📊

Tables organise information into a grid of rows and columns. Think of a school timetable, a leaderboard, or a price comparison chart!

Table Structure

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
    <th>Rank</th>
  </tr>
  <tr>
    <td>Alex</td>
    <td>950</td>
    <td>🥇 1st</td>
  </tr>
  <tr>
    <td>Sam</td>
    <td>820</td>
    <td>🥈 2nd</td>
  </tr>
</table>

This creates:

| Name | Score | Rank | |------|-------|------| | Alex | 950 | 🥇 1st | | Sam | 820 | 🥈 2nd |

The Table Tags

| Tag | Stands For | What It Does | |-----|-----------|-------------| | <table> | Table | The outer container | | <tr> | Table Row | One horizontal row | | <th> | Table Header | Bold heading cell | | <td> | Table Data | Regular data cell |

A Full Example: Weekly Timetable

<table>
  <tr>
    <th>Day</th>
    <th>Subject</th>
    <th>Time</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>🧮 Maths</td>
    <td>9:00 AM</td>
  </tr>
  <tr>
    <td>Tuesday</td>
    <td>💻 Coding</td>
    <td>10:00 AM</td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>🎨 Art</td>
    <td>11:00 AM</td>
  </tr>
</table>

Adding a Border (with inline style)

Without CSS, tables look plain. Add a quick border like this:

<table border="1">
  <tr>
    <th>Game</th>
    <th>Players</th>
  </tr>
  <tr>
    <td>Minecraft</td>
    <td>238 million</td>
  </tr>
</table>

🌟 Tables on Real Websites

• 📊 Leaderboards in games
• 💰 Pricing pages (Basic / Pro / Enterprise)
• 📅 Schedules and timetables
• 🛒 Shopping cart (item, quantity, price)