How to style a table: Css Turorial

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, henc
Note that, in the following code block, CSS shorthand is used for three values for
setting padding; as you may remember from Chapter 2, the three values set the
top, horizontal (left and right), and bottom values, respectively; meaning the caption
will have 0px padding everywhere except at the bottom, where the padding
will be 5px.
caption {
font-weight: bold;
font-size: 1.3em;
text-transform: uppercase;
padding: 0 0 5px;
}



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. The borders have been dealt with already, so the next step is
to style the caption, which currently lacks impact. The caption is effectively a title,
and titles should stand out. Therefore, place some padding underneath it, set
font-weight to bold, font-size to 1.3em, and text-transform to uppercase

4. Style the header cells. To make the header cells stand out more, apply the CSS rule
outlined in the following code block. The url value set in the background property
adds a background image to the table headers, which mimics the subtle metallic
image shown in the same portion of the iTunes interface; the 0 50% values vertically
center the graphic; and the repeat-x setting tiles the image horizontally. From a
design standpoint, the default centered table heading text looks iffy, hence the
addition of a text-align property set to left. These settings ensure that the table
header contents stand out from the standard data cell content.
th {
background: url(table-header-stripe.gif) 0 50% repeat-x;
text-align: left;
}

5. Set the font and pad the cells. At the moment, the table cell text hugs the borders,
so it needs some padding; the text is also too small to comfortably read, so its size
needs increasing. This is dealt with by adding font-size and padding pairs to the
th, td rule, as shown:
th, td {
border: 1px solid #c9c9c9;
font-size: 1.1em;
padding: 1px 4px;
}e 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;
}