Foundation HTML5 with CSS3

Chapter 7 Like the thead and tbody elements, the tfoot element may only have tr elements as children. Those tr elements, in turn ...

Building Tables Listing 7-18. A table including a colgroup and two col elements Utility Belts 9 You may define multiple ...

Chapter 7 Figure 7-8 shows the rendered output of the code from Listing 7-19. Column groupings, much like the row groupings disc ...

Building Tables Optional Attributes In addition to the global attributes, the col element has an additional optional attribute. ...

Chapter 7 Grappling Hooks 27 Smoke Pellets 623 Totals 659 Figure 7-9 shows the browser output of the code in Listing ...

Building Tables Required Attributes There are no required attributes for the caption element. Optional Attributes There are no a ...

Chapter 7 Listing 7-21. A simple table Product Quantity Price Totals Utility Belts 9 $129.99 $1,169.91 Grappling Hooks ...

Building Tables Figure 7-10. It’s not much to look at, but it’s a serviceable table. Adding just the little bit of CSS, shown in ...

Chapter 7 tables. If you want to be more specific, you could use a class attribute to distinguish some tables from others or an ...

Building Tables cells are spaced apart evenly using that value around all four sides of the cell. If two values are supplied, th ...

Chapter 7 The :nth-child pseudo-class matches an element or set of elements based on the keyword or formula passed to it in pare ...

Building Tables Smoke Pellets 623 $4.99 $3,108.77 Totals 659 $6,438.41 The browser’s output of this code is identical ...

Chapter 7 quantities { width: 200px; } prices { background: #ddd; } The output of the CSS in Listing 7-24 is shown in Figure 7-1 ...

Building Tables Styling Captions The caption element, as you saw earlier, will typically appear above its parent table element. ...

Chapter 7 $6,438.41 Listing 7-26. CSS for styling the table and its caption from Listing 7-25 table { width: 600px; font-fam ...

Building Tables tfoot th { text-align: left; } #quantity-column { width: 200px; } #price-column { background: #ddd; } Rendering ...

Chapter 7 Figure 7-14. The caption now appears below the table. Remember: regardless of the visual position of the table caption ...

Chapter 8 Assembling Forms and Applications We’ve referred to the Web as a conduit for the movement of information, distributing ...

Chapter 8 The still-growing HTML5 specification first germinated as two other specifications, originally dubbed “Web Forms 2.0” ...

Assembling Forms and Applications Instead, the rest of this chapter focuses on the markup you’ll need to be familiar with to ass ...