Spanning Rows and Columns

Part of the Fundamentals section of Coddy's HTML journey — lesson 50 of 60.

In HTML, you can make table cells span multiple rows or columns using the rowspan and colspan attributes. These attributes allow you to create more complex table layouts by merging cells together.

The colspan attribute is used to specify the number of columns a cell should span. It is added to the <td> or <th> tag of the cell that you want to expand.

Here's an example of how to use colspan:

<table border="1">
	<tr>
		<th colspan="2">Name</th>
	</tr>
	<tr>
		<td>John</td>
		<td>Doe</td>
	</tr>
</table>

In this example, the header cell with the text "Name" spans two columns. This is useful for creating a header that covers multiple columns. This is how it looks like:

The rowspan attribute is used to specify the number of rows a cell should span. It is also added to the <td> or <th> tag of the cell that you want to expand.

Here's an example of how to use rowspan:

<table border="1">
  <tr>
    <th>Employee</th>
    <th>Shift</th>
  </tr>
  <tr>
    <td rowspan="2">Alex</td>
    <td>Morning</td>
  </tr>
  <tr>
    <td>Evening</td>
  </tr>
</table>

Here, rowspan is used to show that Alex works both morning and evening shifts without repeating the name.

You can use both colspan and rowspan in the same table to create complex layouts. Just remember to adjust the number of cells in each row accordingly to accommodate the spanned cells.

Challenge

Easy

Create an HTML document that includes a table with cells that span multiple rows and columns. The table should have the following structure:

A <table> tag to define the table, with a border attribute set to "1" for visibility.
A table row (<tr>) with a header cell (<th>) that spans two columns and contains the text "Student Information".
Another table row (<tr>) with a header cell (<th>) that says "Name" and a data cell (<td>) that spans two rows and contains the text "John Doe".
Another table row (<tr>) with a header cell (<th>) that says "Age".
A final table row (<tr>) with a data cell (<td>) that says "Jane Smith" and a data cell (<td>) that says "25".

Cheat sheet

Use colspan to make a cell span multiple columns:

<th colspan="2">Name</th>

Use rowspan to make a cell span multiple rows:

<td rowspan="2">John</td>

Example table with both spanning attributes:

<table border="1">
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Exams</th>
  </tr>
  <tr>
    <th>Math</th>
    <th>Science</th>
  </tr>
  <tr>
    <td>Kim</td>
    <td>A</td>
    <td>B+</td>
  </tr>
</table>

Try it yourself

<!DOCTYPE html>
<html>
    <body>
        <table border="1">
            <!-- Write code here -->
        </table>
    </body>
</html>

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

All lessons in Fundamentals

1HTML Basics

What is HTML?Basic Structure of an HTML Tags and Elements Nesting and Closing Tags Comments in HTML

4Recipe Card

Project Overview Recipe Title and Description

Ingredients

Steps

7Personal Profile Page

Project Overview Header Section

Profile Picture

About Me Section

Social Links

10Tables

Table Basics Adding CaptionsSpanning Rows and ColumnsRecap - Tables

2Text and Formatting

Headings Paragraphs Line Breaks Bold and Italic Text Bold and Italic Again Recap - Formatting

5Adding Content

HTML Attributes Links New Page Links Images Image Attributes

8Forms and Inputs Part 1

Form Basics Text Inputs Input Attributes Password Field Labels for Inputs Recap - Basic Form

11Event Registration Page

Project Overview Header Section

Event Details Section

Registration Form

Footer Section

3Working with Lists

Unordered List Ordered List Nested Lists Recap - Lists

6Page Layout

Divisions Inline Spans Semantic Tags Sections and Articles Recap - Layout

9Forms and Inputs Part 2

Radio Buttons Checkboxes Dropdowns Buttons Buttons in Forms Recap - Forms #1 Recap - Forms #2

12Final Challenges

Simple Profile Card Event Invitation Card Simple Article Page Favorite Books List