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;
}
/* 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