ptg16476052
Sizing Tables, Borders, and Cells 253
10
It’s nearly always a better idea to specify your table widths as percentages rather than as
specific pixel widths. Because you don’t know how wide the browser window will be,
using percentages allows your table to be reformatted to whatever width the browser is.
Using specific pixel widths might cause your table to run off the page. Also, if you make
your tables too wide using a pixel width, your pages might not print properly.
Changing Table Borders
The border attribute, which appears immediately inside the opening
tag, is the
most common attribute of the element. With it, you specify whether border lines
are displayed around the table. This also serves as an indicator of the type of content the
table contains. But this attribute is nonconforming in HTML5. This means that if you use
it, your HTML isn’t 100% correct.
In HTML4, it was incorrect to use tables for layout, but many people continued to do so
because they were easier to visualize and understand than many of the CSS methods for
layout. So, HTML5 made it valid again, but with a few rules.
Tables are bad for layout because they are not accessible. They can be difficult for assis-
tive technology to read correctly, but with a few tweaks, you can adjust your tables to use
them for layout. If you use one or more of the following features, you are indicating that
your table is probably a layout table and does not contain tabular data:
n Use the role attribute with the value presentation.
n Use the border attribute with a value of 0.
n Use the nonconforming cellspacing or cellpadding attributes with the value of 0.
By using the caption tag and the border="1" attribute, we are indicating that our table is
almost certainly a nonlayout table and contains tabular data.
If you make your table too narrow for whatever you put in it, the
browser will ignore your settings and make the table as wide as
it needs to be to display the content unless you use the CSS
overflow property to specify otherwise. The overflow property was
discussed in Lesson 8, “Using CSS to Style a Site.”
CAUTION
