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:

Table Examples

Figure 10-1: Basic HTML table

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

Figure 10-18: Table row hover

Activity Files

Download the Chapter Ten activity files.