Be able to create a table with a specified number of rows and columns

13 Layout – Creating Tables

What is a Table?

Tables are like Lego grids that organise information into rows and columns. Each intersection is a cell where you can put text, numbers, or even emojis 😊.

Why Use Tables?

• Organise data neatly.
• Make comparison easy.
• Help browsers understand structure.

Basic HTML Table Syntax

1. Start with <table>.
2. Add rows with <tr>.
3. Inside each row, add cells with <td> (or <th> for headers).
4. Close the table with </table>.

Example: 3 Rows × 4 Columns

How to Change Rows & Columns

To create a table with $n$ rows and $m$ columns, simply add <tr> tags for each row and <td> tags for each column inside that row.

For example, a 5×2 table:

Quick Tips

• Use <thead> for header rows to give them a bold look.
• Use <tbody> for the rest of the rows.
• Apply border-collapse: collapse; to remove double borders.
• Use background-color to highlight headers.

Practice Exercise 🚀

Create a table that shows the schedule for a week: 7 rows (days) and 4 columns (time slots). Add headers like Monday, Tuesday, etc., and fill in a few activities.

Analogy Recap

Think of a table as a grid of Lego bricks. Each brick (cell) can hold a piece of information. By deciding how many bricks (rows) and how many columns you need, you build the perfect structure for your data.