Putting It All Together - Web Standards: Mastering HTML5, CSS3, and XML - page 414

Listing 12-12. Bullet Image

ul.tick {
list-style-image: url('images/tick.png')
}

Listing 12-13. Application of the Custom Bullet Style Presented in Listing 12-12
<h1>The major benefits of standard compliance</h1>
< ul class="tick" >
<li>Resolution independence</li>
<li>Browser independence</li>
<li>Interoperability</li>
<li>Robust functionality</li>
</ul>

The result is visually more appealing (and more specific) than a list with ordinary bullets (Figure 12-2 ).

Figure 12-2. Custom bullets with CSS

Tables
Let's assume that a 5×5 comparison table of the first 4 iPhone models needs to be presented on a web page
(Table 12-1 ).

Table 12-1. A Sample Table to Be Coded

Model iPhone iPhone 3G iPhone 3GS iPhone 4

Preinstalled OS iPhone OS 1.0 iPhone OS 2.0 iPhone OS 3.0 iOS 4.0

Display resolution 480×320 480×320 480×320 960×640

CPU clockrate 620 MHz 620 MHz 833 MHz 1 GHz

Camera 2 MP 2 MP 3 MP 5 MP (rear), 0.3 MP (front)