Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

  • Print
  • + Share This
Like this article? We recommend

Like this article? We recommend

Space Between Table Cells

The space between the table cells is controlled by the CELLSPACING attribute in the TABLE tag. By setting CELLSPACING to zero, you can remove all the space between the cells of your table.

Let's start by setting CELLSPACING and BORDER to zero for our example (the rest of the code remains the same):


This removes all the space between the cells of our table (see Figure 9).

Figure 9 Our example with CELLSPACING=0.

Notice that this example leaves all the text jammed up against the edges of the cells. You can adjust the space inside of the cell borders with the CELLPADDING attribute (see Figure 10).


Figure 10 The table with CELLSPACING=0 and CELLPADDING=5.

This gives a little breathing room for the text inside the cells.

This technique can be nicely applied to columnar-type data, giving you some design flexibility that would otherwise be difficult without using large graphics files:

  You will find designs in our catalog which cover a 
vast array of categories:
 <TR><TD BGCOLOR="#CCCC99"> floral images 
 <TR><TD> humor
 <TR><TD BGCOLOR="#CCCC99"> holiday stamps
 <TR><TD> border designs
 <TR><TD BGCOLOR="#CCCC99"> decorative imagery 

In this decorative table (shown in Figure 11), we use a separate row for each element of the list. Remember: You need both a TR and a TD to create a row. In this example, we used a BGCOLOR in the TABLE tag as a default and then changed the color in every other row.

Figure 11 A decorative table for listing options.

There are many other interesting designs you can create by using tables. Hopefully, we've given you enough tools to be able to experiment on your own, and use your creativity.

  • + Share This
  • 🔖 Save To Your Account