Learn to Use TABLE Row and Column Spanning

A Beginner's Primer by Professor Al Fichera

Web Page Essentials, Part VI.II
TABLE COLUMN & ROW SPAN

Merging Columns & Rows In Tables

Column Spanning Table Code Plus Result

<TABLE BORDER=8 WIDTH=70%>
  <CAPTION><b>THIS TABLE SHOWS COLUMN SPANNING</CAPTION>
  <TR ALIGN="CENTER">      I have 3 sets of THs
    <TH> COL 'A' </TH>    (Table Headers) here.
    <TH> COL 'B' </TH>
    <TH> COL 'C' </TH>
  </TR>

  <TR ALIGN="CENTER">      I have 1 set of TDs (Table Data) here.
    <TD BGCOLOR="#ffcccc" COLSPAN="3">  colspan="3" used up two TDs.
    COL 'A' the 1st Cell in ROW 1 <BR /> 
    Now spans 3 Cols A + B + C <BR />
    in the 1st row of the Table. </TD>
  </TR>
  <TR ALIGN="CENTER">      I have 3 sets of TDs here.
    <TD> ROW 2 </TD>
    <TD> ROW 2 </TD>
    <TD> ROW 2 </TD>
  </TR>
  <TR ALIGN="CENTER">      I have 3 sets of TDs here.
    <TD> ROW 3 </TD>
    <TD> ROW 3 </TD>
    <TD> ROW 3 </TD>
  </TR>
  <TR ALIGN="CENTER">      I have 3 sets of TDs here.
    <TD> ROW 4 </TD>
    <TD> ROW 4 </TD>
    <TD> ROW 4 </TD>
  </TR>
</TABLE>

THIS TABLE SHOWS COLUMN SPANNING
COL 'A' COL 'B' COL 'C'

COL 'A' the 1st Cell in ROW 1
Now spans 3 Cols A + B + C
in the 1st row of the Table.

ROW 2 ROW 2 ROW 2

ROW 3 ROW 3 ROW 3

ROW 4 ROW 4 ROW 4

**THIS TABLE SHOWS COLUMN SPANNING**
COL 'A'	COL 'B'	COL 'C'
COL 'A' the 1st Cell in ROW 1 Now spans 3 Cols A + B + C in the 1st row of the Table.
ROW 2	ROW 2	ROW 2
ROW 3	ROW 3	ROW 3
ROW 4	ROW 4	ROW 4

————————————?

Row Spanning Table Code Plus Result

<TABLE BORDER=8 WIDTH=70%>
  <CAPTION><b>THIS TABLE SHOWS ROW SPANNING</CAPTION>
  <TR ALIGN="CENTER">      I have 3 sets of THs (Table Headers) here.
    <TH> COL 'A' </TH>
    <TH> COL 'B' </TH>
    <TH> COL 'C' </TH>
  </TR>
  <TR ALIGN="CENTER">      I have 3 sets of TDs (Table Data) here.
    <TD BGCOLOR="#ffcccc" ROWSPAN="3">
    COL 'A' the 1st Cell in ROW 1 <BR /> 
    Now spans 3 Rows <BR />
    in the 1st column of the Table.</TD>
    <TD BGCOLOR="#FFB86F">ROW 1</TD>
    <TD BGCOLOR="#FFB86F">ROW 1</TD>
  </TR>
  <TR ALIGN="CENTER">      I have 2 sets of TDs here. 
    <TD> ROW 2 </TD>      rowspan="3" used up one of the TDs.
    <TD> ROW 2 </TD>
  </TR>
  <TR ALIGN="CENTER">      I have 2 sets of TDs here, 
    <TD> ROW 3 </TD>      rowspan="3" used up one of the TDs.
    <TD> ROW 3 </TD>
  </TR>
  <TR ALIGN="CENTER">      I'm back to 3 sets of TDs here.
    <TD> ROW 4 </TD>
    <TD> ROW 4 </TD>
    <TD> ROW 4 </TD>
  </TR>
</TABLE>

THIS TABLE SHOWS ROW SPANNING
COL 'A' COL 'B' COL 'C'

COL 'A' the 1st Cell in ROW 1
Now spans 3 Rows
in the 1st column of the Table. ROW 1 ROW 1

ROW 2 ROW 2

ROW 3 ROW 3

ROW 4 ROW 4 ROW 4

**THIS TABLE SHOWS ROW SPANNING**
COL 'A'	COL 'B'	COL 'C'
COL 'A' the 1st Cell in ROW 1 Now spans 3 Rows in the 1st column of the Table.	ROW 1	ROW 1
ROW 2	ROW 2
ROW 3	ROW 3
ROW 4	ROW 4	ROW 4

————————————?

Combined Row & Column Spanning Table Code Plus Result

<TABLE BORDER=8 WIDTH=70%>
  <CAPTION><b>TABLE SHOWS COMBINED ROW & COLUMN SPANNING
  </CAPTION>
  <TR ALIGN="CENTER">      I have 3 sets of THs (Table Headers) here.
    <TH> COL 'A' </TH>  
    <TH> COL 'B' </TH>
    <TH> COL 'C' </TH>
  </TR>
  <TR ALIGN="CENTER">     I have 2 sets of TDs (Table Data) here.
    <TD BGCOLOR="#FFB86F" ROWSPAN="3"  colspan="2" used up one TD.
    COL 'A' the 1st Cell in ROW 1 <BR />  
    Now spans 3 Rows <BR /> 
    in the 1st column of the Table.</TD>
    <TD BGCOLOR="#FFB86F" COLSPAN="2"
    COL 'B' the 2nd Cell in ROW 1 <BR /> 
    Now spans 2 Cols B + C <BR /> 
    in the 1st row of the Table.</TD>
  </TR>
  <TR ALIGN="CENTER">     I have 2 sets of TDs this row, 
    <TD> ROW 2 </TD>     rowspan="3" used up one of the TDs.
    <TD> ROW 2 </TD>
  </TR>
  <TR ALIGN="CENTER">     I have 2 sets of TDs this row, 
    <TD> ROW 3 </TD>     rowspan="3" used up one of the TDs.
    <TD> ROW 3 </TD>
  </TR>
  <TR ALIGN="CENTER">     I'm back to 3 sets of TDs here.
    <TD> ROW 4 </TD>
    <TD> ROW 4 </TD>
    <TD> ROW 4 </TD>
  </TR>
</TABLE>

TABLE SHOWS COMBINED ROW & COLUMN SPANNING
COL 'A' COL 'B' COL 'C'

COL 'A' the 1st Cell in ROW 1
Now spans 3 Rows
in the 1st column of the Table. COL 'B' the 2nd Cell in ROW 1
Now spans 2 Cols B + C
in the 1st row of the Table.

ROW 2 ROW 2

ROW 3 ROW 3

ROW 4 ROW 4 ROW 4

**TABLE SHOWS COMBINED ROW & COLUMN SPANNING**
COL 'A'	COL 'B'	COL 'C'
COL 'A' the 1st Cell in ROW 1 Now spans 3 Rows in the 1st column of the Table.	COL 'B' the 2nd Cell in ROW 1 Now spans 2 Cols B + C in the 1st row of the Table.
ROW 2	ROW 2
ROW 3	ROW 3
ROW 4	ROW 4	ROW 4

Back to TOC Back to HTML