HTML and CSS Reference
In-Depth Information
To set the width of the table:
◗
1.
Return to the
tables.css
file in your text editor. Add the following style to the
table
element, as shown in Figure 5-40:
width: 100%;
Figure 5-40
Setting the width of the schedule table
◗
2.
Save your changes to the file and then reload
schedule.htm
in your Web browser.
Figure 5-41 shows the layout of the enlarged table.
Figure 5-41
Table width set to 100%
You notice that the column widths are inconsistent, with very little width given to the
Time column and varying widths given to different days of the week. This results from
browsers allotting space to each column as a function of the column's content. A Web
browser will attempt to fi t the most content possible within each column without having
the text wrap to a new line. This means that columns with more text are wider than those
with less text. When the width of the entire table is increased, the added space is divided
evenly among the table columns.
You can set column widths using the same CSS
width
property you applied to the
table itself. The column width is expressed either in a CSS unit of measure or as a per-
centage of the entire width of the table. You decide to set the width of the fi rst column to
7% of the entire table width, while setting each of the seven remaining columns to 13%
of the table width. Added together, 98% of the table width will be allotted to the eight
table columns. The remaining table width is reserved for table and cell borders.
Always set the total width
of table columns to be
less than 100% of the
table width to allow space
for table borders and
padding.
