HTML Table

:dart: Learning Objectives

By the end of this lesson, you'll be able to:

• Create tables using HTML blocks in EduBlocks
• Understand how rows and columns work together
• Add headers to make your tables easier to read
• Style your tables with the border-collapse property
• Build your own data tables for websites

:clipboard: Before You Start

Make sure you:

• Have EduBlocks open in your browser
• Completed the previous HTML lessons
• Know how to drag and connect blocks
• Can preview your web pages

What is an HTML Table? :bar_chart:

:information_source: HTML Table is a way to organize information in rows and columns on a web page. Think of it like a grid where you can put text, numbers, or even images in each box!

Tables help you display data clearly. You can use them for:

• School schedules :emoji:
• Sports scores :emoji:
• Game leaderboards :video_game:
• Price lists :emoji:

To create a table, you'll use special blocks:

• The Table block <table> is like a container that holds everything
• Inside, you'll add rows and columns to organize your data

:emoji: Table Building Blocks

Let's learn about the blocks you'll use to build tables:

Block	What It Does
	Table Header <th> - Creates bold headings for your columns (like "Name" or "Score")
	Table Row <tr> - Creates a new row in your table (horizontal line of data)
	Table Data <td> - Creates a cell where you put your actual information

:bulb: Tip Think of building a table like building with LEGO:

• <table> is your baseplate
• <tr> blocks are the rows you stack
• <th> and <td> blocks are the pieces you put in each row

:art: Making Tables Look Better with Border-Collapse

:information_source: Border-collapse is a special property that makes your table borders look cleaner. It decides if the lines between cells should be separate or joined together.

When you use tables, each cell has its own border. This can make your table look messy with double lines everywhere! The border-collapse block helps by:

• Joining all the borders into single lines
• Making your table look more professional
• Removing gaps between cells

:emoji: See the Difference

With Border-Collapse :white_check_mark:

Notice how clean it looks? All borders are single lines!

Without Border-Collapse :x:

See the double lines? That's what happens without border-collapse!

:memo: Note Most professional websites use border-collapse to make their tables look neat and organized.

:hammer_and_wrench: Let's Build a Table Together!

Here's how to create a complete table step by step:

Code 1	Code 1 Continuation	Code 2 Continuation

:dart: Final Result

*You may view the whole list of code blocks HERE.

:wrench: Troubleshooting Tips

Having problems with your table? Check these common issues:

1. Table not showing?

   • Make sure you have the <table> block at the start and end
   • Check that all blocks are connected properly

2. Rows looking weird?

   • Each row needs a <tr> block
   • Make sure you have the same number of cells in each row

3. Headers not bold?

   • Use <th> blocks for headers, not <td> blocks
   • Headers should be in the first row

4. Borders not working?

   • Add CSS styling to your table
   • Try using the border-collapse property

:memo: Summary

In this lesson, you learned:

• Tables organize data in rows and columns
• You need four main blocks: <table>, <tr>, <th>, and <td>
• Headers (<th>) make your table easier to understand
• Border-collapse makes your table look professional
• Tables are perfect for displaying organized information

:movie_camera: Video Tutorial

Ready to see tables in action? Watch this video to learn more!

:rocket: Practice Time!

Now it's your turn! Try these challenges:

1. Easy: Create a simple 2x2 table with your favorite foods
2. Medium: Build a class schedule table with days and subjects
3. Hard: Make a scoreboard for your favorite game with player names, scores, and rankings

:bulb: Tip Start small! Build a simple table first, then add more rows and columns as you get comfortable.

:star2: Real-World Connection

Tables are everywhere on the web! You'll find them in:

• Online shopping sites (product comparisons)
• School websites (class schedules)
• Sports websites (team standings)
• Weather websites (weekly forecasts)

When you master HTML tables in EduBlocks, you're learning the same skills real web developers use every day!