Transcript Colspan and Rowspan ppt

Rowspan and Colspan
Rowspan and Colspan
• Remember that tables are built by rows
and columns.
• The rowspan attribute allows you to have
one cell span more than one row.
• Remember that rowspan is “how many down”
• The colspan attribute allows you to have
one cell span more than one column.
• Remember that colspan is “how many across”
http://www.idocs.com/tags/tables/index_famsupp_30.html
Rowspan and Colspan
Rules
• When using rowspan, you must be careful
to make sure that there is not an existing
corresponding cell in the row/column that
you are spanning.
• The number of Table Datas in one
row/column must be equal to the number
of Table Datas in the corresponding
row/column.
Equal Number of Table
Datas
• Using the rowspan= attribute in your
Table Data will indicate how many
Table Datas you have for one row.
• What does this mean?
• For example, if you indicated that
rowspan=3, you would need three
separate <td> </td> on the following
row.
Table
• Imagine that this is your original table
for the proceeding examples:
Example of Rowspan
• You would like to create a
6 cell table with a letter in
each cell.
• You would like the cell
contents for cell “a” to
span 2 rows.
• You would also like a
border for your table.
• Please note how the
rowspan for “a” has
affected cell “d”.
Example of Rowspan
(HTML)
This is what your
HTML would look like
for the previous
example:
Why is <td>d</td>
missing?
Do you have to manually
remove <td>d</td>?
<table border=1>
<tr>
<td rowspan=2>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
</tr>
</table>
Example of Colspan
• You would like to create a
6 cell table with a letter in
each cell.
• You would like the cell
contents for cell “a” to
span 2 columns.
• You would also like a
border for your table.
• Please note how the
rowspan for “a” has
affected cell “b”.
Example of Colspan
(HTML)
This is what your
HTML would look like
for the previous
example:
Why is <td>b</td>
missing?
Do you have to manually
remove <td>b</td>?
<table border=1>
<tr>
<td colspan=2>a</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
What Is This Good For?
• Utilizing colspan and rowspan can do many
things such as help you make calendars and
other organizational charts.
• Colspan and rowspan are also extremely
useful in helping you design the base table
for your web pages.