Page 8 - LoudOffice_Guide-to-HTML_Part-II_Advanced.PDF

The first thing you should notice is that although the basic structure of the table is 7
columns and 3 rows, that some of the cells actually span across multiple rows or columns.
This is accomplished by using two different attributes of the < t d > tag:
Ø The r o w s p a n attribute allows cells to merge down multiple rows. For example, in
the table above, the ‘Game-by-Game Score’ cell spans three rows. The HTML
markup for this would be:
< t h r o w s p a n = ” 3 ” > G a m e - b y - G a m e S c o r e < / t h >
Ø The c o l s p a n attribute allows cells to merge across multiple columns. For example,
in the table above, the ‘Team’ cell spans two columns and the ‘Congratulations’ cell
spans three. The HTML markup for the ‘Team’ column would be:

< t h c o l s p a n = ” 2 ” > T e a m < / t h >
Ø One word of caution. When you are writing your HTML code and you use either of
these attributes, you must make sure not to declare cells (with the < t d > tag) for
the rows and columns being spanned. For example the row marked by the ‘Team’
cell differs from the row bellow it as follows:

< t r >
< t d > & n b s p ; < / t d >
< t d c o l s p a n = " 2 " > T e a m < / t d >
< / t r >
< t r >
< t d > & n b s p ; < / t d >
< t d > < b > B o s t o n B o w l e r s < / b > < / t d >
< t d > < b > L a n e D a n c e r s < / b > < / t d >
< / t r >
Notice that the first row only has two < t d > tags. Since the ‘Team’ cell carries into
two different columns, there is no need to use the third < t d > tag. In fact, if you
were to use a third < t d > tag, your table would not display properly.

This is also true for the < c o l s p a n > attribute. Notice the ‘Game-by-Game Score’ cell
above. This cell spans over three rows. For each of the effected rows, you will
notice that there are only two < t d > tags called within.

LoudOffice.com Guide to HTML – Part II Page 8