All technologies that support CSS
This technique relates to:
Web designers sometimes use spacer images (usually 1x1 pixel, transparent GIFs) for better control over layout, for example in tables or to indent a paragraph. However, Cascading Style Sheets (CSS) allow sufficient control over layout to replace spacer images. The CSS properties for margins and padding can be used on their own or in combination to control the layout. The margin properties ('margin-top', 'margin-right', 'margin-bottom', 'margin-left', and the shorthand 'margin') can be used on any element that is displayed as a block; they add space at the outside of an element. The padding properties ('padding-top', 'padding-right', 'padding-bottom', 'padding-left', and the shorthand 'padding') can be used on any element; they add space inside the element.
The following example consists of two parts: the CSS code, which specifies a margin on all sides of the table, and padding for the table cells; and the HTML code for the table, which does not contain spacer images and is not nested inside another table.
Example Code:
table { margin: .5em; border-collapse: collapse; }
td, th { padding: .4em; border: 1px solid #000; }
...
<table summary="Titles, authors and publication dates of books in Web development category">
<caption>Books in the category 'Web development'</caption>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>How to Think Straight About Web Standards</td>
<td>Andrew Stanovich</td>
<td>1 April 2007</td>
</tr>
</tbody>
</table>
Resources are for information purposes only, no endorsement implied.
No tests available for this technique.
Techniques are informative—that means they are not required. The basis for determining conformance to WCAG 2.0 is the success criteria from the WCAG 2.0 standard—not the techniques. For important information about techniques, please see the Understanding Techniques for WCAG Success Criteria section of Understanding WCAG 2.0.