ptg16476052256 LESSON 10: Building Tables
Cell Padding
The cell padding attribute defines the amount of space between the edges of the cells and
the content inside a cell. By default, many browsers draw tables with a cell padding of
two pixels. You can add more space by adding the nonconforming cellpadding attribute
to the <table> element, with a value in pixels for the amount of cell padding you want.
Here’s the revised code for your <table> element, which increases the cell padding to 10
pixels. Figure 10.10 shows the result.Input ▼
<table cellpadding="10" border="1">Output ▼
A cellpadding attribute with a value of 0 causes the edges of the cells to touch the edges
of the cell’s contents. This doesn’t look good when you’re presenting text, but it can
prove useful in other situations.FIGURE 10.10
A table with the
cell padding set to
10 pixels.The tables that I used for these examples included the border
attribute to create a border. If you apply table borders using
CSS, they will override the border attribute, so you don’t need
to remove it. This can be helpful because primitive browsers
(including the browsers on some mobile phones) don’t offer
CSS support, and including the border attribute will ensure that
borders are still displayed. It also, as mentioned previously,
indicates that your table is a data table rather than a layout table.NOTE