HTML and CSS Reference
In-Depth Information
Input
▼
<table border=“1” width=“80%”>
<caption>
Vital Statistics
</caption>
<tr>
<th width=“40%”>
Name
</th>
<th width=“20%”>
Height
</th>
<th width=“20%”>
Weight
</th>
<th width=“20%”>
Eye Color
</th>
</tr>
</table>
.
Output
FIGURE 10.14
A modified table
with manually set
column widths.
10
If you are going to specify cell widths, make sure to either specify the widths for cells
only on one row or to the same values for every row. If you specify more than one value
for the width of a column (by specifying different values on multiple rows of a table),
there's no good way to predict which one the browser will use.
You can also specify widths using CSS, using the
width
property. Here's how you create
the preceding table using CSS for the cell widths:
<table border=“1” style=”width: 80%”>
<caption>
Vital Statistics
</caption>
<tr>
<th style=”width: 40%”>
Name
</th>
<th style=”width: 20%”>
Height
</th>
<th style=”width: 20%”>
Weight
</th>
<th style=”width: 20%”>
Eye Color
</th>
</tr>
</table>
One advantage of using CSS approach is that you can use any units you like to specify
the width, rather than just pixels or percentages.
