Strip the presentation from data tables, and refinish with CSS

1. Strip the presentation from data tables, and refinish with CSS Hongwei Cao

2. In this chapter we address styling the table. Instead of dovetailing the presentation in with the table’s data, we strip that presentation from the markup and move it to CSS. The result is less code, a more accessible table, and a flexible design that’s easily changed or updated.

3. A Common Approach • Just like with the other common components we have explored, we can create stylish tables by using spacer GIF shims and additional table cells • But from a flexibility and accessibility view it is quite a mess.

4. Figure 7.2

5. Why it’s not Bulletproof • All table cells are outlined with red lines. Extra cells are used to control spacing between the cells of data, to add borders and lines, and to add the drop shadow behind the table. I say “extra” because these cells have nothing to do with describing the data and everything to do with the design and appearance of the table.

6. Why it’s not Bulletproof • This common method is the commingling of design and content. This commingling means you’ll run into more difficulty when changing the design at a later date. It also means more code is required and that you’ll need to use extra table cells and graphics to achieve what a few lines of CSS can do when applied to a fraction of the code. • Secondly, in addition to the bulky code and deep tangling of design and data, this table could also benefit from some accessibility enhancements—markup that will make it easier for those browsing with screen readers and text browsers to understand the table’s structure and the data it represents. • As it stands now, the table scores very low points in terms of accessibility, with screen readers having to navigate a universe of nonessential code in order to find the real date contained within.

7. A Bulletproof Approach • To bulletproof table design, let’s strip away the excess presentational code from the markup, add accessibility enhancements, and then use CSS to refinish the table. Along the way we’ll keep the code light and flexible and still maintain the interesting design. • To begin, let’s structure the data with a single table, using the appropriate markup—and nothing more. At this point we’re focusing on the correct structure for the data being presented.

8. The Markup Structure:In a basic framework, the table shows the forum name, topics/messages, and the data of the last post, also includes each column’s heading as well, putting each grouping in its own column. <table> <tr> <td>Forum Name </td> <td>Topics/Messages</td> <td>Last Post</td> </tr> <tr> <td><a href=“/forum/”>Name of Forum </a>This is the description of the the forum. This is another line of descriptive text.</td> <td>9313/163773</td> <td>Feb 28, 2005 04:21 PM</td> </tr>

9. <tr> <td><a href=“/forum/”>Name of Forum</a>This is the description of the forum. This is another line of descriptive text.</td> <td>9313/163773</td> <td>Feb 28, 2005 04:21PM<Td> </tr> <tr> <td><a href=“/forum/”>Name of Forum</a>this is the description of the forum. This is another line of descriptive text.</td> <td>9313/1633</td> <td>Feb 28, 2005 04:21PM</td> </tr> </table>

10. Figure 7.4

11. The previous markup sets up each row and column in the right order. <table> <tr> <th>Forum Name </th> <th>Topics/Message</th> <th>Last Post</th> </tr> <tr> <td><a href=“/forum/”>Name of Forum </a>This is the description of the the forum. This is another line of descriptive text.</td> <td>9313/163773</td> <td>Feb 28, 2005 04:21 PM</td> </tr> Previous codes: <td>Forum Name </td> <td>Topics/Message</td> <td>Last Post</td>

12. A slightly different style F7.5

13. Adding scope attribute Previous codes: <td>Forum Name </td> <td>Topics/Message</td> <td>Last Post</td> <table> <tr> <th scope=“col”>Forum Name </th> <th scope=“col”>Topics/Message</th> <th scope=“col”>Last Post</th> </tr> <tr> <td><a href=“/forum/”>Name of Forum </a>This is the description of the the forum. This is another line of descriptive text.</td> <td>9313/163773</td> <td>Feb 28, 2005 04:21 PM</td> </tr>

14. Adding the title <table> <caption>The Films</caption> <tr> <th scope=“col”>Forum Name </th> <th scope=“col”>Topics/Message</th> <th scope=“col”>Last Post</th> </tr> <tr> <td><a href=“/forum/”>Name of Forum </a>This is the description of the the forum. This is another line of descriptive text.</td> <td>9313/163773</td> <td>Feb 28, 2005 04:21 PM</td> </tr>

15. 7-6

16. Eliminating the gaps between cells • <table cellspacing=“0”>; • Table { Border-collapse:collapse; }

17. Applying Style • Body • { • margin:0; • padding:30px; • font-family: “Lucida Grande”, Arial, sans-serif; • Font-size:small; • Background:#b5b5b5; • } • a {color: #77985C;} With our lean table markup complete, we can now start applying CSS in order to fold in the design. We’ve already cut in half the amount of markup by removing the extra table cells and keeping only what’s needed to structure the data. To set up the whole page, let’s first add a background color and default font and link colors.

18. Border and background Padding and dividing line Table{ width:100%; border:1px solid #000; background:#fff; } Table th, table td { margin:0; padding:8px 20 px; text-align:center; border-bottom: 1px solid #b5b5b5; }

19. Figure 7.8

20. Custom alignment To left-align the text for only the “Forum Name” header and the column underneath, let’s create a class that we can attach those elements that overrides the text-align: center; previously declared. Table th, table td { margin:0; padding:8px 20 px; text-align:center; border-bottom: 1px solid #b5b5b5; } table .name { text-align: left }

21. Figure 7.9

22. Table{ width:100%; border:1px solid #000; background: #fff; } Table th, table td { margin:0; padding:8px 20 px; text-align:center; border-bottom: 1px solid #b5b5b5; } table .name { text-align: left }

23. <table> <table cellspacing=“0”> <caption>The Films</caption> <tr> <th scope=“col”class=“name”>Forum Name </th> <th scope=“col”>Topics/Message</th> <th scope=“col”>Last Post</th> </tr> <tr> <td class=“name” ><a href=“/forum/”>Name of Forum </a>This is the description of the the forum. This is another line of descriptive text.</td> <td>9313/163773</td> <td>Feb 28, 2005 04:21 PM</td> </tr> <tr> <td class=“name” ><a href=“/forum/”>Name of Forum</a>This is the description of the forum. This is another line of descriptive text.</td> <td>9313/163773</td> <td>Feb 28, 2005 04:21PM<Td> </tr> <tr> <td class=“name” ><a href=“/forum/”>Name of Forum</a>this is the description of the forum. This is another line of descriptive text.</td> <td>9313/1633</td> <td>Feb 28, 2005 04:21PM</td> </tr> </table>

24. Alternating row colors Table{ width:100%; border:1px solid #000; background: #fff; } Table th, table td { margin:0; padding:8px 20 px; text-align:center; border-bottom: 1px solid #b5b5b5; } table .name { text-align: left } Table tr { background: #e6e6e6;} Table tr.alt{background: #f1f1f1;}

25. <table> <table cellspacing=“0”> <caption>The Films</caption> <tr > <th scope=“col” class=“name”>Forum Name </th> <th scope=“col”>Topics/Message</th> <th scope=“col”>Last Post</th> </tr> <tr class=“alt” > <td class=“name” ><a href=“/forum/”>Name of Forum </a>This is the description of the the forum. This is another line of descriptive text.</td> <td>9313/163773</td> <td>Feb 28, 2005 04:21 PM</td> </tr> <tr> <td class=“name” ><a href=“/forum/”>Name of Forum</a>This is the description of the forum. This is another line of descriptive text.</td> <td>9313/163773</td> <td>Feb 28, 2005 04:21PM<Td> </tr> <tr class=“alt” > <td class=“name” ><a href=“/forum/”>Name of Forum</a>this is the description of the forum. This is another line of descriptive text.</td> <td>9313/1633</td> <td>Feb 28, 2005 04:21PM</td> </tr> </table>

26. Table tr { background: #e6e6e6;} Table tr.alt {background: #f1f1f1;} Class=“alt”

27. Put each link in its own line and be boldTurn all <th> elements the color to green table th { color: green; } <tr class=“alt” > <td class=“name”><a href=“/forum/”>Name of Forum </a> This is the description of the the forum. This is another line of descriptive text.</td> table td a { display: block; font-weight: bold; }

28. Styling <caption> table caption { margin:0; padding:8px 20px; text-align: left; border: 1px solid #000; border-bottom: none; background: #fff; }

29. The caption is styled nicely

30. The offset shadow 4px shadow offset

31. For the offset drop shadow on the entire table, the previous table added an extra column and row, placing graphics in those cells to create the shadow effect. • We’re going to achieve the same result without adding unnecessary cells and using no graphics at all. • We will, however need to add a containing <div> around the table, one that will fill in the shadow color as a background. We’ll then bump the table out of the container’s edges by 4 pixels, using a little positioning.

32. <div class=“forums”> <table cellspacing=“0”> ….. </table> </div> Page Background <div> Table

33. So, we can use negative position to nudge the table up and to the left by a few pixels, the containing <div>’s background will be revealed on the bottom and right sides First declaration: .forums { Background: #919191; }

34. Table in negative position Second declaration: table { position: relative; top: -4px; left: -4px; width: 100% border: 1px solid #000; background: #fff; }

36. Why it’s Bulletproof • By stripping the example down to a core, semantic structure, we rebuilt the table using only the essential elements. Along the way, we increased the accessibility of the table while trimming the code down by a gigantic amount. • In addition, we were able to re-create the table’s stylish appearance using no images whatsoever, untangling the design from the markup and moving it over to CSS. Future updates to the design and /or data will be easier, and we won’t have to wade through dozens and dozens of extra table cells– cells that exits solely for the purpose of stylizing the table. • The table itself is also flexible from a height and width point of view. We’ve refrained from specifying a pixel dimension on anything, and since no images are used, this design could be dropped inside any container and will stretch to fit.

37. Summary • When you are creating stylish data tables, it’s important not to abuse the markup structure by attaching extra, unnecessary cells for the sole purpose of the design. By building a meaningful structure for the table first – using only the necessary elements to support the data – you’ll cut down on code and be able to later style the table however you’d like using CSS. • Borders, backgrounds, and colors can all be kept in the style sheet, which leaves the markup clean and lean and highly accessible to whatever device happens to read it.

38. Here are a few things to keep in mind when styling tables: • Collapse the table using <table cellspacing=“0”>(or the border collapse property), and move all other borders, background, and spacing to the style sheet. • Use the <caption>element to properly assign a title to the table. Be aware that Safari and IE/Mac render styled <caption>s differently. • Use <th> elements to properly denote the table’s headers, thus providing better structure and a way to uniquely style those cells with CSS. • Create grid lines by adding borders to the <th>and /or <td> elements. • Add background colors to rows by styling the <tr> elements, Alternate background row colors by adding a class to the desired <tr>.