|
Posted by Barbara de Zoete on 11/18/05 18:24
On Fri, 18 Nov 2005 17:02:49 +0100, <salmondays2000@yahoo.co.uk> wrote:
> 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 |
`-------------------------------------------------- --<--@ ------------'
Navigation:
[Reply to this message]
|