George and Susan Welcome to our HTML help page!
Home | HTML-Index | Basic HTML | HTML Structure

SPAN CELL


Spanning cells allows you to combine two or more cells in a row or column into one large cell. This is useful when you want to display a title across the top or down the side of your table. Spanning cells is also useful when you want to display a heading across multiple rows or columns.

Use the COLSPAN attribute with the <TH> (table header) or <TD> (table data) tag to span across columns. Use the ROWSPAN attribute with the <TH> or <TD> tag to span a cell down rows.

When spanning a cell across columns or down rows, you must specify the number of cells you want the cell to span across.

Using the COLSPAN in the same <TH> or <TD> tag allows you to span a cell across columns and down rows at the same time.

Type this:
down
<TABLE BORDER=3 ALIGN=CENTER>
<TR>
<TH COLSPAN="3">New Products</TH>
</TR>
<TR>
        <TH>Product Name and Description</TH>
        <TH>Price Per Unit</TH>
        <TH>Units Available</TH>
</TR>
<TR>
        <TD>Blouse - red silk</TD>
        <TD>$19.95</TD>
        <TD>130</TD>
</TR>
<TR>
        <TD>Pants - black cotton</TD>
        <TD>$29.98</TD>
        <TD>100</TD>
</TR>
</TABLE>



And you get the following:
down
New Products
Product Name and Description Price Per Unit Units Available
Blouse - red silk $19.95 130
Pants - black cotton $29.98 100

Back to Top


Type this:
down
<TABLE BORDER=3 ALIGN=CENTER>
<TR>
        <TH ROWSPAN="3">George's Products</TH>
        <TH>Product Name and Description</TH>
        <TH>Price Per Unit</TH>
        <TH>Units Available</TH>
</TR>
<TR>
        <TD>Blouse - red silk</TD>
        <TD>$19.95</TD>
        <TD>130</TD>
</TR>
<TR>
        <TD>Pants - black cotton</TD>
        <TD>$29.98</TD>
        <TD>100</TD> </TR>
</TABLE>



And you get the following:
down
George's Products Product Name and Description Price Per Unit Units Available
Blouse - red silk $19.95 130
Pants - black cotton $29.98 100

Back to Top


Type this:
down
<TABLE BORDER=3 ALIGN=CENTER>
<TR>
        <TD COLSPAN="4"ALIGN=CENTER>text or image here</TD>
</TR>
<TR>
        <TD ALIGN=CENTER>text or image here</TD>
        <TD COLSPAN="2" ROWSPAN="2" ALIGN=CENTER>text or image here</TD>
        <TD ALIGN=CENTER>text or image here</TD>
</TR>
<TR>
        <TD ALIGN=CENTER>text or image here</TD>
        <TD ALIGN=CENTER>text or image here</TD>
</TR>
</TABLE>



And you get the following:
down
text or image here
text or image here text or image here text or image here
text or image here text or image here



My home page
Back to Top