HTML Table Colspan & Rowspan 🎯

Welcome to the fascinating world of HTML tables! Today, we'll delve into the powerful colspan and rowspan attributes that will help you create visually appealing and well-structured tables.

Understanding the Basics 📝

Before we dive into colspan and rowspan, let's quickly review the HTML table structure.

A basic table looks like this:

html

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

In the above example, <table> defines the table, <tr> represents a row, <th> is used for table headers, and <td> is for table data.

Colspan 💡

The colspan attribute is used to span multiple columns within a single cell. It tells the browser to extend a table cell across multiple columns.

Here's an example:

html

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td colspan="2">Cell spanning 2 columns</td>
    <th>Header 3</th>
  </tr>
</table>

In the above example, the cell with the text "Cell spanning 2 columns" spans across columns 1 and 2.

Quick Quiz

Question 1 of 1

In the given table, what does the `colspan="2"` attribute do?

Rowspan 💡

The rowspan attribute works similarly to colspan, but it's used to span multiple rows within a single cell. It tells the browser to extend a table cell across multiple rows.

Here's an example:

html

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td rowspan="2">Cell spanning 2 rows</td>
    <th>Header 4</th>
  </tr>
  <tr>
    <th>Header 5</th>
  </tr>
</table>

In the above example, the cell with the text "Cell spanning 2 rows" spans across rows 1 and 2.

Quick Quiz

Question 1 of 1

In the given table, what does the `rowspan="2"` attribute do?

Practical Application 💡

Let's create a practical example of a table that uses both colspan and rowspan. We'll create a seating chart for a meeting with three attendees.

html

<table>
  <tr>
    <th>Name</th>
    <th colspan="2">Table</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td rowspan="2">Table 1</td>
    <td>Assistant</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>Project Manager</td>
  </tr>
  <tr>
    <td>Mike Johnson</td>
    <td rowspan="2">Table 2</td>
    <td>Intern</td>
  </tr>
  <tr>
    <td>Alice Brown</td>
    <td>Designer</td>
  </tr>
</table>

In the above example, we have two tables, each with a chair and an assistant. The Project Manager and Designer sit at separate tables.

Recap 💡

Now that we've covered the basics, let's recap what we've learned today:

colspan is used to span multiple columns within a single cell.
rowspan is used to span multiple rows within a single cell.
Both colspan and rowspan help create visually appealing and well-structured tables.

Quick Quiz

Question 1 of 1

In the given example, which table does Mike Johnson sit at?

Keep practicing, and happy coding! 🤖🎉