Site Development
Downloads
Help!!
Home
What Is "Spanning"?"Spanning" refers to making a cell spread across two or more cells in other rows and columns. So far, our cells have been sized into consistent rows and columns. We use the ROWSPAN and COLSPAN attributes in the <td> tag to make a cell stretch across rows and columns like in the examples below
COLSPANLets analyze the first example. It has a single cell in the top row (first <tr>) and two cells in the second row. To span the two cells (columns) below, the top cell uses COLSPAN=2:
<table width=200 height=200 align="center" cellspacing=0 cellpadding=5 border=2 bordercolor="red"> There are a couple of things to note here. First, the COLSPAN attribute isn't hard to figure out. You just put in the number of columns you want the cell to span across. Not as obvious is the fact that you must adjust your WIDTH to allow for the spanning. The first cell goes 100% across the table, whereas, the bottom two cells only span 50% of the table each. If you hadn't put a WIDTH in the first cell, it would still have spanned the two cells below due to COLSPAN. It would've been sized by the bottom cells as opposed to its own WIDTH attribute. In practice, it's best to use a WIDTH in all of the cells and make sure that the WIDTHs add up properly. ROWSPANROWSPAN is a little trickier to use than COLSPAN. This is due to positioning the <tr> tags in the right places to start new rows. Here's the code that produced the second sample table above:
<table width=200 height=200 align="center" cellspacing=0 cellpadding=5 border=2 bordercolor="red"> First notice that we used ROWSPAN=2 to get the effect in the first cell. The trick is to remember to code the other cell (cell # 2) in the same column as cell #1, and cell #3 in another row. The spanned cell will drop into the next row(s) as ROWSPAN dictates. Remember to code ROWSPANned cells in the row that the top of the cell is in. Begin building the table by coding the total number of rows. Two in this case. This means to go ahead and type in two sets of <tr> tags. Now find the row you want the top of the spanning cell to be in and code the spanning cell with ROWSPAN. Other cells in this row are then coded. Cells to the left of the spanning cell are coded before the spanning cell in the same row. Cells to the right of the spanning cell are coded after the spanning cell. Finally, code in the cells in the other rows. Keep in mind what rows the spanning cell occupies and adjust the other cells WIDTH accordingly. For example, if the spanning cell was 20% wide, the cells it spans would be 80% wide. Lets try another simple ROWSPAN example. This time we'll just move the spanning cell to the right of the table instead of the left:
<table width=200 height=200 align="center" cellspacing=0 cellpadding=5 border=2 bordercolor="red"> By coding the ROWSPAN cell after cell #2, it appears on the left:
Again, the best way to start coding these is to make the row with the ROWSPAN cell normally and then add ROWSPAN to the appropriate cell. LimitsThere are a few limits to spanning. The biggest one is using COLSPAN and ROWSPAN in the same <td>. This rarely works like you'd want it to. You cannot make "L-shaped" cells by using both attributes in one <td>. There are other techniques for doing this, so don't worry. Spanning across more rows and columns than there are in the table can cause a lot of distortion. ExercisesWe'll be working a lot more with spanning in the next lesson, so I'm just giving you a few simple exercises to complete before moving on to the next lesson.
| |||||||||||||||||||
To Next Advanced HTML Lesson
Back To Advanced HTML Index