Tuesday, 1 May 2012

Table exercise.

Table exercise CSS:

@charset "UTF-8";
/* CSS Document */

<div class="forums">
    <table cellspacing="0">
     ...
     </table>
</div>

table {
    border-collapse:collapse;
}

body {
margin: 0;
padding: 30px;
font-family: "Lucida Grande", Arial, sans-serif;
font-size: small;
background: #b5b5b5;
}

a { color: #77985C; }

.forums {
background: #919191;
}

table {
position: relative;
top: -4px;
left: -4px;
width: 100%;
border: 1px solid #000;
background: #fff;
}

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

table th, table td {
margin: 0;
padding: 8px 20px;
text-align: center;
border-bottom: 1px solid #b5b5b5;
}

table th { color: #999;
}

table .name {
text-align: left;
}

table tr { background: #e6e6e6;
}

table tr.alt { background: #f1f1f1;
}

table td a { display: block; font-weight: bold;
}

Things to remember:


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.

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>.

No comments:

Post a Comment