Topic 2 : Tables (row span, col span), misc. tags, heading tag(h1,h2….h6)

Lesson: Mastering Tables and Tags in HTML

Introduction to Advanced Table Techniques

Imagine you’re organizing a big dinner party. You’ve got a huge table, but not everyone needs the same amount of space. Some dishes might take up two or three spots, and some guests might need extra room. In HTML, when you need to manage space in tables, you use rowspan and colspan. Let’s see how that works.

What is Rowspan and Colspan?

• Rowspan: Lets a cell span over multiple rows. It’s like if a centerpiece extends upwards through two or three layers of your dinner table.
• Colspan: Lets a cell extend across multiple columns. Think of it as a really long platter that needs extra space horizontally.

For example with Rowspan and Colspan

Heading into Headings

Next, let’s tidy up the room (our webpage) by clearly labeling each part. That’s where headings come in handy.

Using Heading Tags (h1 to h6)

• Headings: Serve as titles and subtitles on your page, like signs hanging over different sections of your party, telling guests where to find drinks, food, or games.
• Hierarchy: <h1> is the main event, like the big “Welcome” sign. <h2> to <h6> are smaller signs guiding to various spots.

Miscellaneous Tags

There are also a bunch of other handy tags, like little tools that help with specific tasks:

• <br>: Inserts a line break, like saying, “Okay, everyone, let’s take a brief pause here.”
• <hr>: Draws a horizontal line across the page, perfect for separating different areas or topics, like laying down a decorative divider on the table.
• <strong> and <em>: Make text bold or italic to emphasize important bits, like highlighting the chef’s special on a menu.

Task for You Create a webpage for a small event. Use tables with rowspan and colspan to layout the seating arrangement and headings to label different sections like “Menu”, “Schedule”, and “Guest List”. Use miscellaneous tags to format content details.