Chromebook/Laptop/PC
Chromebooks, laptops, and PCs are crucial tools for coding and digital skills education. Chromebooks are ideal for web-based applications and collaborative projects, while laptops and PCs support a wider range of programming environments and software for more intensive tasks like software development and data analysis.Equipped with full keyboards and the ability to run specialized coding software, these devices enable students to learn programming languages, debug code, and understand software architecture. Their versatility supports both individual learning and group projects, making them indispensable for developing critical digital and computational thinking skills in the classroom.
Crafting Complex Tables
- Understand the fundamental structure and components of HTML tables.
- Implement header and footer rows to enhance table organisation.
- Apply rowspan to merge cells vertically across multiple rows.
- Use colspan to merge cells horizontally across multiple columns.
- Create complex table layouts by combining various HTML attributes.
- Create a basic HTML table with multiple rows and columns using the
element.
- Add a header row to a table using the
element to label columns. - Apply the rowspan attribute to merge cells vertically across multiple rows.
- Use the colspan attribute to merge cells horizontally across multiple columns.
- Insert a footer row in a table to display summary information spanning all columns.
Teacher NotesPrepare to guide students through the process of crafting complex HTML tables. Ensure they understand basic table creation before introducing headers and footers. Highlight the importance of the 'rowspan' and 'colspan' attributes for merging cells. Encourage experimentation with these attributes to see their effects. Finally, review the completed table to ensure understanding.Live Class Feed
This is a live feed of the latest activity by your students on this lesson. It will update in real-time as they work on the lesson.Load previous activityWarning: Your screen size is quite small for viewing this. Rotate your device into landscape mode if you can.1 - Create a basic table
First, let's create a basic HTML table with a few rows and columns. Use the following code to create a table with 4 rows and 3 columns:
<table border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> </tr> <tr> <td>Cell 7</td> <td>Cell 8</td> <td>Cell 9</td> </tr> <tr> <td>Cell 10</td> <td>Cell 11</td> <td>Cell 12</td> </tr> </table>Now, let's add this code to the embedded playground below:
👇 Mark your steps as done as you complete them.
+5 XP2 - Add a header row
A table header is a row at the top of a table that contains labels for each column. It helps users understand the data in the table by providing context. In HTML, table headers are created using the
<th>element, which stands for 'table header'. Now, let's add a header row to our table. Add the header code above the rows:<tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr>👇 Mark your steps as done as you complete them.
+10 XP3 - Add Rowspan
In this step, we will use the
rowspanattribute to merge cells vertically. A rowspan lets a table cell stretch vertically across multiple rows. Imagine one long box covering several smaller ones stacked on top of each other.Update the first cell of the second row (Cell 4) with the following code and also delete the first cell of the third row (Cell 7):
<td rowspan="2">Cell 4</td>So the code should look like this:
<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td rowspan="2">Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> </tr> <tr> <td>Cell 8</td> <td>Cell 9</td> </tr> <tr> <td>Cell 10</td> <td>Cell 11</td> <td>Cell 12</td> </tr> </table>When you run the code, notice how Cell 4 now spans two rows, merging with Cell 7.
Try changing the rowspan to 3 and removing Cell 10. What happens to the table?+15 XP4 - Add colspan
Next, we will use the
colspanattribute to merge cells horizontally. A colspan lets a table cell stretch horizontally across multiple columns. Picture one wide box covering several smaller ones side by side.Update the first cell of the first row (Cell 1) with the following code and also delete the second cell of the first row (Cell 2):
<td colspan="2">Cell 1</td>So the code should look like this:
<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td colspan="2">Cell 1</td> <td>Cell 3</td> </tr> <tr> <td rowspan="2">Cell 4</td> <td>Cell 5</td> <td>Cell 6</td> </tr> <tr> <td>Cell 8</td> <td>Cell 9</td> </tr> <tr> <td>Cell 10</td> <td>Cell 11</td> <td>Cell 12</td> </tr> </table>When you run the code, notice how Cell 4 now spans two rows, merging with Cell 7.
Try changing the colspan to 3 and removing Cell 3. What happens to the table?+15 XP5 - Add a footer row
In this step, we will add a footer row to our table. A table footer is typically used to display summary information, such as totals or averages, for the data in the table. To create a footer row that spans all three columns, add the following code after the last row:
<tr> <td colspan="3">Footer</td> </tr>Now, let's add the footer row to our table. Add the code inside the
<table>element, after the last row:+20 XP
Unlock the Full Learning Experience
Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.
Copyright Notice
This lesson is copyright of DigitalSkills.org. Unauthorised use, copying or distribution is not allowed.New Badge 😃
Series
?Series
You've earned a new award from the series!!!
Your new award has been added to your collection!
0/250🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more - Add a header row to a table using the