0% found this document useful (0 votes)
16 views8 pages

Ict 9 Lesson 9

Uploaded by

jannryan527
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
16 views8 pages

Ict 9 Lesson 9

Uploaded by

jannryan527
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

INFORMATION AND

COMMUNICATION TECHNOLOGY 9

WEB DEVELOPMENT
At the end of the session, the learners should be able to:

1. Describe the functionality and purpose of the colspan and


rowspan attributes in HTML tables.
2. Use the colspan attribute to merge multiple columns in a
table, creating a single cell that spans several columns.
3. Use the rowspan attribute to merge multiple rows in a table,
creating a single cell that spans several rows.
4. Create complex table layouts by combining both colspan
and rowspan attributes in a single table structure.
The colspan and
rowspan attribute
The colspan and rowspan attributes in
HTML tables are used to merge cells across
multiple columns or rows, respectively,
making it possible to create more complex
and organized table layouts
01 colspan
The colspan attribute allows a cell to span across
multiple columns.
Syntax:
<td colspan="number_of_columns">Content</td>

Sample
Name Age
Charloue Perales 14
Sample Code
<table border="1">
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>30</td>
</tr>
</table>
02 rowspan
The rowspan attribute allows a cell to span across
multiple rows.

Syntax:
<td rowspan="number_of_rows">Content</td>

Sample
Name Name Age
Al Francis Bautista 15
Lombres
Sample Code
<table border="1">
<tr>
<th rowspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
</table>
<h1>Thank You!</h1>

You might also like