HTML and CSS Reference
In-Depth Information
below cell contents, depending on the value of the
align
attribute. In general, it
is better to specify table widths and heights using CSS properties.
Adding a
border
attribute with a positive integer to the table tag turns on
the table's grid lines and draws a border around the entire table, excluding any
caption. he table border is always that number of pixels thick. he grid lines,
however, are that size only if there is enough spacing between the cells. he
spacing between cells is controlled by the cellspacing attribute, which can have
any nonnegative integer value. he default value is about 2 pixels (depending
on the browser). Specifying a
table
element with 0 cell spacing and a border of
1 pixel causes the browser to draw a hairline (1-pixel) grid.
Cell padding is the number of pixels that separate the contents of table cells
from the cell walls, and it applies to all cells within a table. his attribute is of
less importance than the cellspacing attribute because web developers have
much more control using the
CSS padding
property, which can be used to add
diferent amounts of padding on each side of the content.
To make it look better, we will add some attributes to the table deined in
Example 2.19, along with some CSS styles. Example 2.20 shows the HTML
that generates the page shown in Figure 2.20.
Example 2.20: providing table alignment and spacing
<!DOCTYPE html>
<html>
<head>
<title>
Example 2.20
</title>
<style type="text/css">
body { padding-top: 36px; }
th, td { padding: 3px 6px; }
thead th { text-align: right; }
th { text-align: left; }
td { text-align: right; }
caption { font-style: italic; }
</style>
</head>
<body>
<table cellspacing="0" border="1" align="center" width="80%">
<caption>
Total Table Items
</caption>
continues
