HTML and CSS Reference
In-Depth Information
<
td
>
A rubber ball
<
td
>
Clean tank and air bubbles
</
table
>
</
body
>
</
html
>
Figure 6-3 shows the results, but before looking at it, examine the CSS3 code carefully. Also,
the value
§
is a character code for a symbol entered using code instead of the keyboard.
All UTF-8 characters can be entered this way. Certain symbols such as the greater-than
(
>
) and less-than (
<
) characters must be entered using this method; otherwise, the
parser reads them as part of a tag. Now, take a look at Figure 6-3 to see the page with the
borders.
116
Figure 6-3: Borders can interfere with data clarity.
When trying to read the dif erent data elements, the borders get in the way. To i x that, all you
have to do is add padding to the borders and height to the cells. In the style, change the
td
and
th
element dei nitions to the following:
td
,
th
{
height
:
50px
;
border
-
style
:
solid
;
border
-
width
:
thin
;
border
-
color
:
#000;
padding
:
20px
;
}
All that you changed is the height of the cell and the space between the border and the text
(padding). However, the dif erence is signii cant, as you can see in Figure 6-4.
With the added space around the data, the cell value is far clearer. h e cells aren't too pretty,
but that's easy to take care of — just remove them.
