Chapter 10 - Data Tables
The 3.2 release of HTML in 1997 included table elements for the purpose of organizing tabular data in rows and columns. Web designers quickly realized they could use the table elements to build print-like design structures that allowed them to break away from the left-alignment constraints of basic HTML. With tables, web designers had the control and the tools to build columnar layouts, align text, add white space, and structure pages. This misuse of the table elements, although well intentioned, created problems with web site accessibility and compatibility. CSS has long offered the potential for an alternate page layout system, but browser support had to catch up before CSS could become a viable method. The flexibility, accessibility, and ease of maintaining layouts created with CSS makes them the clear choice for designing web pages, as detailed in Chapter . Now that CSS page layouts are broadly supported, tables should be used only to present data, as described in this chapter.
When you complete this chapter, you will be able to:
- Use table elements
- Use table headers and footers
- Style table borders
- Apply padding, margins, and floats to tables
- Style table background colors
- Apply table styles
Table Examples
Figure 10-2: Table with borders collapsed
Figure 10-3: Table with a column span
Figure 10-4: Table with row span
Figure 10-5: Table with styled headers and borders
Figure 10-6: Applying styles to column groups
Figure 10-7: Selecting one column and applying a background color
Figure 10-9: Table with outside border only
Figure 10-10: Table with outside borders and cell borders
Figure 10-11: Table header row with custom bottom border
Figure 10-12: Table with 5 pixels of padding in each cell
Figure 10-13: Table with 5 pixels of padding in each data cell and 10 pixels in header cell
Figure 10-14: Table floated to the left with right and bottom margins
Figure 10-15: Styling table background colors
Figure 10-16: Styling alternate table rows
Figure 10-17: Table cell hover
Activity Files
Download the Chapter Ten activity files.