I am creating a simple HTML table with a variable number of rows as the
information is SELECTed from a MySQL database.
How can I make my table look nicer? I've heard of CSS but am unsure if
CSS can be applied to just one table, leaving the rest of my site/pages
unaffected.
If you set the styles for the table specifically, they shouldn't effect
other parts of the page. If you want to target one table, single it out by
giving it a class.
For the first option all you need are the selectors table, th, td (maybe a
smart use of thead th, tfoot th and col). For the second option, you could
use a selector like table#smartlooking to make it look different from
other tables in your site.
A rather simple example with html 4.01 strict and css 2.
markup:
<table id="prices" summary="example table, two columns; first
description of product, secondly the price of the product">
<colgroup><col id="description"><col id="price"></colgroup>
<thead>
<tr>
<th>product description</th>
<th>product price<span>$/ea.</span></th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="2">
Using styles to set indentation at the decimal point!
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>First flight in a glider, with a skilled pilot as your
host</td>
<td>40.00</td>
</tr>
<tr>
<td>Three flights with an instructor, as a 'mini course' to see if
gliding is something you like</td>
<td>110.00</td>
</tr>
<tr>
<td>First year membership, forty flights included, liablility
insurance included</td>
<td>1,000.00</td>
</tr>
</tbody>
</table>
styles:
table {
border:2px outset; }
col#description {
width:28em; }
col#price {
width:9em;
text-align:right; }
th, td {
border: 2px inset;
padding:.2em .3em; }
thead {
font-family: "Arial MS", Arial, sans-serif;
font-size:1.3em; }
th {
white-space:nowrap;
vertical-align:top; }
th span {
display:block;
font-size:1.1em;
font-weight:normal; }
--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog |
http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp |
http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen |
http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
)