Rowspan and Colspan

1
Rowspan and Colspan
2
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
3
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.

4
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 rowspan3, you
  would need three separate lttdgt lt/tdgt on the
  following row.

5
Table

• Imagine that this is your original table for the
  proceeding examples

6
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.

7
Example of Rowspan (HTML)

• This is what your HTML would look like for the
  previous example
• Why is lttdgtdlt/tdgtmissing?
• Do you have to manually remove lttdgtdlt/tdgt?

• lttable border1gtlttrgtlttd rowspan2gtalt/tdgtlttdgtblt
  /tdgtlttdgtclt/tdgtlt/trgtlttrgtlttdgtelt/tdgtlttdgtflt/tdgtlt
  /trgtlt/tablegt

8
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.

9
Example of Colspan (HTML)

• This is what your HTML would look like for the
  previous example
• Why is lttdgtblt/tdgtmissing?
• Do you have to manually remove lttdgtblt/tdgt?

• lttable border1gtlttrgtlttd colspan2gtalt/tdgtlttdgtclt
  /tdgtlt/trgtlttrgtlttdgtdlt/tdgtlttdgtelt/tdgtlttdgtflt/tdgtlt
  /trgtlt/tablegt

10
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.