You are here: Re: How can i improve the look of my table easily? « HTML « IT news, forums, messages
Re: How can i improve the look of my table easily?

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]


Удаленная работа для программистов  •  Как заработать на Google AdSense  •  England, UK  •  статьи на английском  •  PHP MySQL CMS Apache Oscommerce  •  Online Business Knowledge Base  •  DVD MP3 AVI MP4 players codecs conversion help
Home  •  Search  •  Site Map  •  Set as Homepage  •  Add to Favourites

Copyright © 2005-2006 Powered by Custom PHP Programming

Сайт изготовлен в Студии Валентина Петручека
изготовление и поддержка веб-сайтов, разработка программного обеспечения, поисковая оптимизация