Table Data Cell Formatting

We've talked quite a bit about attributes, but those attributes related to the overall presentation of the table. In addition to changing the presentation of the table, you can also affect the presentation of each Table Data (<TD>) cell with the following attributes:

The structure of these attributes is as follows:


<TABLE  align="align_value"  valign="v_align_value"   rowspan="numer_of_rows"  colspan="number_of_columns>
       rowspan = the number of Table Data cells to merge down a row
       colspan = the number of Table Data cells to merge across a column
       align = "left" or "center" or "right" or "justify"
       valign = "top" or "middle" or "bottom"

We'll leave the align attributes for the next page...let's tackle the rowspan & colspan attributes first.

In the HTML TABLE world, spanning simply means merging cells.

     
  these two cells have been merged with colspan = "2"

  
these three rows have been merged with rowspan = "3"

 

    
     
     
       

The value passed to the span attributes indicates the number of cells to span (including the current cell). Thus, the colspan="2" attribute specifies the spanning of 2 columns:

<tr>
<td> column 1
<td colspan="2">these two cells have been merged with colspan = 2 column 2 & 3
<td> column 4
</tr>

Notice the table above is a 4-row, 4-column table, but there are only 3 Table Data cell (<TD>) definitions in this row. That is because you are spanning the second <TD> tag across two columns, virtually taking the place of two <TD> tags. In fact, if you try to add the fourth <TD> tag, guess what happens ... you got it! The browser creates a 5-column table.

The same is true with the rowspan, only it affects multiple rows. Thus a table cell with the attribute "rowspan="3" (as above), means that the next three Table Row <TR> definitions must have only three Table Data cells in each row (i've organized the tags horizontally for easier reading...which, by the way, is perfectly legal in HTML!):

<TR><TD><TD><TD><TD> defines a 4 column table
<TR><TD><TD colspan="2"><TD> specifies that the second and third cells are merged
<TR><TD rowspan="3"><TD><TD><TD> specifies that first cell for 3 rows are merged
<TR><TD><TD><TD> only 3 Table Data cells defined (first one "reserved" above)
<TR><TD><TD><TD> only 3 Table Data cells defined (first one "reserved" above)
<TR><TD><TD><TD><TD> returns to 4 column table

 

 

 

Copyright © 2001 Michael J. Doyle
All Rights Reserved.

Designed & Developed by Mike Doyle
using Macromedia Dreamweaver & CourseBuilder

See Mike's Training Schedule for
HTML, Dreamweaver, & CourseBuilder Courses

Email Mike Doyle