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 rowspan=3, you would need three separate <td> </td> 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. 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 Rowspan (HTML)

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. 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> Example of Colspan (HTML)

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.