Categories


HTML Tables: Column Spanning

We’ve seen how using borders, rules, cellpadding, cellspacing  and background colors for tables can give you a lot of control over how your information will display; however, there may be times when you will want to change the way the cells. i.e, columns display.

In this post, we’re going to see how to change the way columns display within a specific row.  All HTML code will be shown in blue(Note:  The terms column and cell can be used interchangeably.)

You can control the number of columns, i.e, cells,  a line of text is to span by using colspan=N where N is the number of columns to span. This allows manipulation of the columns within individual rows. For each of our examples below, we’ll be using a table that has 3 rows and 3 columns (cells), a border of 1 and cellpadding of 10.

Example 1

Our first table will have a heading in row 1 that we want to span all 3 columns and be centered (Figure 1:4):

Our Heading
Row 2 Cell-1 Row 2 Cell-2 Row 2 Cell-3
Row 3 Cell-1 Row 3 Cell-2 Row 3 Cell-3

Note: There are no vertical borders in row 1 since we are spanning all three (3) columns but the remainder of the table displays with all 3 columns.

Example 2

Next, let’s say we want our table to have a heading in row 1 that again spans all three columns, have our second row display with 2 columns where the first column spans columns 1 and 2 of row 3. Row 3 has no changes. (Figure 2:5)

Our Heading
Row 2 Cell-1
Row 2 Cell-2
Row 3 Cell-1 Row 3 Cell-2 Row 3 Cell-3

 

Example 3

In our final example, we will have our heading spanning 3 columns, row 2 will have no changes, and row 3 will have 2 columns … where the first column remains as is but with the second column spanning columns 2 and 3. (Figure 3:6)

Our Heading
Row 2 Cell-1 Row 2 Cell-2 Row 2 Cell-3
Row 3 Cell-1
Row 3 Cell-2

Conclusion

From these simple examples, you can see how using colspan= offers a lot of flexibility with many useful applications. Want to learn more about writing HTML tables?

Get the HTML Quick Start Guide by Elizabeth Castro available from Amazon

. . . where  you’ll  learn much more about writing tables, i.e, tables and forms, captions, column groups – as well as everything else you need to write your own HTML web pages.   These quick start guides are the best because they use  pictures rather than lengthy explanations.

Comments are closed.