HTML Tables - Column & Row Spanning

---

Column Spanning
How to span or stretch a cell horizontally so it spans across the top and/or bottom of cells and columns below or above it.

Table 1

Costa Rica		Mexico
Nicaragua	Honduras	El Salvador
Belize	Guatemala	Los Angeles
Chicago	Miami	Dallas

Source Code For Table 1

NOTE:

1. The colspan="2" attribute in the first table data <TD> cell in the first row below.
2. Row 1, Cell 2 that originally had Panama in it is no longer there. The colspan attribute deletes however many <TD> cells it replaces.
3. The column widths are now set in the <TD> tags in the SECOND row.
4. This is because you may wish to continue to define column width, but will not be able to set the width values of the first two columns in the top row as it now contains a cell that replaces the top two cells with one cell spanning the two rows below.
5. In this case, the width values set for each cell in ROW TWO, will define the width of the cells in the columns ABOVE and BELOW row two.

<TABLE BORDER="1" CELLSPACING="2" CELLPADDING="1" WIDTH="400">

<TR> (note in this row that the original <TD> Panama is no longer there)

<TD colspan="2">Costa Rica</TD>

<TD>Mexico</TD>

<TR>

<TD WIDTH="150">Nicaragua</TD>

<TD WIDTH="100">Honduras</TD>

<TD WIDTH="150">El Salvador</TD>

</TR>

<TR>

<TD>Belize</TD>

<TD>Guatemala</TD>

<TD>Los Angeles</TD>

</TR>

<TR>

<TD>Chicago</TD>

<TD>Miami</TD>

<TD>Dallas</TD>

</TR>

</TABLE>

---

Row Spanning
How to span or stretch a cell vertically so it spans adjacent column cells.

Table 2a

Costa Rica	Panama	Mexico
	Honduras
	Guatemala
Chicago	Miami	Dallas

Source Code For Table 2

NOTE:

1. In this example, you can continue to control column width with the width attribute in the <TD> cells of the FIRST ROW as they are now only spanning rows.
2. Alternate method, enter the width attributes in the <TD> tags in row four.

<TABLE BORDER="1" CELLSPACING="2" CELLPADDING="1" WIDTH="400">

<TR>

<TD width="150" rowspan="3">Costa Rica</TD>

<TD width="100">Panama</TD>

<TD width="150" rowspan="3">Mexico</TD>

</TR>

<TR>

<TD>Honduras</TD>

</TR>

<TR>

<TD>Guatemala</TD>

</TR>

<TR>

<TD>Chicago</TD>

<TD>Miami</TD>

<TD>Dallas</TD>

</TR>

</TABLE>

---

Row Spanning and Column Spanning at The Same Time

Table 3

Costa Rica		Mexico
		El Salvador
Belize	Guatemala	Los Angeles
Chicago	Miami	Dallas

Source Code For Table 3

<TABLE BORDER="1" CELLSPACING="2" CELLPADDING="1" WIDTH="400">

<TR>

<TD ROWSPAN="2" COLSPAN="2">Costa Rica

<TD>Mexico</TD>

</TR>

<TR>

<TD>El Salvador</TD>

</TR>

<TR>

<TD WIDTH="150">Belize</TD>

<TD WIDTH="100">Guatemala</TD>

<TD WIDTH="150">Los Angeles</TD>

</TR>

<TR>

<TD>Chicago</TD>

<TD>Miami</TD>

<TD>Dallas</TD>

</TR>

</TABLE>

tables level 2 | tables index

---