CSS Table Gallery
In this tutorial we'll build a table, display information from a database (mySQL), then apply style with CSS.
Check out this site: CSS Table Gallery < http://icant.co.uk/csstablegallery/index.php?css=68 >
The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results.
This site has over 50 CSS styles that are compatiable with the table we'll build.
For the CSS to work your table needs to have tags like:
<div id="itsthetable">
<table summary="Submitted table designs">
<caption>Table designs</caption>
<thead>
<tr>
<th scope="col">Design Name</th>
<th scope="col">Author</th>
<table summary="Submitted table designs">
<caption>Table designs</caption>
<thead>
<tr>
<th scope="col">Design Name</th>
<th scope="col">Author</th>
<th scope="col">Country</th>
<th scope="col">Comment</th>
<th scope="col">Download</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Total</th>
<th scope="col">Comment</th>
<th scope="col">Download</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Total</th>
<td colspan="4">70 designs</td>
</tr>
</tfoot>
<tbody>
<tr >
<th scope="row"><a href="index.php?css=69">Clear Blue</a></th>
<td>Robert Hartl</td>
</tr>
</tfoot>
<tbody>
<tr >
<th scope="row"><a href="index.php?css=69">Clear Blue</a></th>
<td>Robert Hartl</td>
<td>Germany</td>
<td>It's a clear but individual white-blue design with subdued hover-effects for modern browsers.</td>
<td>content</a></td>
</tr>
<tr class="odd">
<th scope="row"><a href="index.php?css=68">Blix Theme</a></th>
<td>Newton de Góes Horta</td>
<td>It's a clear but individual white-blue design with subdued hover-effects for modern browsers.</td>
<td>content</a></td>
</tr>
<tr class="odd">
<th scope="row"><a href="index.php?css=68">Blix Theme</a></th>
<td>Newton de Góes Horta</td>
<td>Brasil</td>
<td>Table design based on Sebastian Schmieg's Blix Theme for Wordpress 2.0. Icons by Kevin Potts</td>
<td>content</td>
</tr>
<td>Table design based on Sebastian Schmieg's Blix Theme for Wordpress 2.0. Icons by Kevin Potts</td>
<td>content</td>
</tr>
</tbody>
</table>
</div>
</table>
</div>
