HTML and CSS Reference
I used <th> here, but it could be <td> just as easily. Because
there's nothing in the cell, its formatting doesn't matter.
If you try it again, you should get the right result with all the headings over the right
columns, as the original example in Figure 10.4 shows.
With the basics out of the way, now you'll look at some of the attributes that can change
the overall appearance of your tables. The attributes you'll learn about in this section
control the width of your tables and cells, the amount of spacing between cell content
and rows and columns, and the width of the borders. As is the case with most attributes
relating to formatting, you can also use some CSS properties with the same effect.
Setting Table Widths
The table in the preceding example relied on the browser itself to decide how wide the
table and column widths were going to be. In many cases, this is the best way to make
sure that your tables are viewable on different browsers with different screen sizes and
widths. Just let the browser decide.
In other cases, however, you might want more control over how wide your tables and
columns are, particularly if the defaults the browser comes up with are strange. In this
section, you'll learn a couple of ways to do just this.
The width attribute of the <table> element defines how wide the table will be on the
page. width can have a value that is either the exact width of the table (in pixels) or a
percentage (such as 50% or 75%) of the current browser width, which can therefore
change if the window is resized. If width is specified, the width of the columns within
the table can be compressed or expanded to fit the required size.
To make a table as wide as the browser window, you add the width attribute to the table,
as shown in the following line of code:
< table border=“1” width=“100%” >
Figure 10.6 shows the result.