HTML and CSS Reference
In-Depth Information
Chapter 14
Styling Tables
For years, tables were the only way to build a grid structure to lay out web pages. Thankfully, tables are no longer
necessary—or indeed recommended—for page layout. Normally, they should be used only for the display of data
that needs to be presented in a grid format—timetables, price lists, sports results, and so on. That's the focus of
this chapter: styling tables that contain data.
There are no plans to add any new features to tables in CSS3. However, using the CSS3 selectors described in
the preceding chapter makes it considerably easier to style tables without the need for extra markup in the HTML.
In this chapter, you'll learn about the following:
Styling borders around tables and individual cells
Adjusting the space between table cells and inside them
Moving the position of the table caption
Suppressing the display of empty cells
Preventing columns from exceeding a fixed width
Controlling the horizontal and vertical alignment of content in table cells
Before diving into the details of styling tables with CSS, it's important to understand the basic structure of
tables and how browsers lay out the various components.
Basic Table Structure
In HTML 4.01 and XHTML 1.0, you can add a border to the table, give it a width, and adjust the space around
the data by adding the border , width , cellpadding , and cellspacing attributes to the opening <table> tag. In
HTML5, only the border attribute is valid and, if used, its value must either be an empty string or 1 .
Removing the width , cellpadding , and cellspacing attributes from the <table> tag produces only the bare
bones of a data table like the one in basic_table.html, which looks like this:
<table border="1">
<td>Row 1-1</td>
<td>Row 1-2</td>
<td>Row 2-1</td>
<td>Row 2-2</td>
Search WWH ::

Custom Search