TABLES: HOW NATURE (AND THE W3C) INTENDED
247
6
Required files styling-the-playlist-table-starting-point.html, stylingthe-
playlist-table-starting-point.css, and table-headerstripe.
gif from the chapter 6 folder.
What you??™ll learn How to style a table.
Completed files styling-the-playlist-table.html and styling-the-playlisttable.
css in the chapter 6 folder (along with the GIF image,
which isn??™t amended).
1. Set things up. If they still exist, remove the border, cellpadding, and cellspacing
attributes within the table start tag. Add the universal selector rule (*) to remove
margins and padding, as shown a bunch of times already in this book. Also, set the
default font by using the html and body rules, as detailed in Chapter 3 of this book.
Because we??™re creating a playlist based on the iTunes interface, it may as well be a
little more Apple-like, hence the use of Lucida variants as the primary fonts. Note
that the padding value in the body rule is there to ensure that the table doesn??™t hug
the browser window when you??™re previewing the page.
* {
padding: 0;
margin: 0;
}
html {
font-size: 100%;
}
body {
font: 62.5%/1.5 "Lucida Grande", "Lucida Sans Unicode", Arial,
?? Helvetica, sans-serif;
padding: 20px;
}
2. Style the table borders. As per the ???Adding borders to tables??? section, style the
table borders.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid #c9c9c9;
}
3. Style the caption.
Pages:
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345