Posted by dorayme on 03/18/06 00:51

In article <1142601249@f2.n134.z1.fidonet.org>,
NOSPAM.STOP.gbbsg@shaw.ca (Gufus) wrote:

> Well with this sample code you gave me ...
>
> <table>
> <caption>Q3 Sales</caption>
> <thead>
> <tr><th>Product</th><th>Jul</th><th>Aug</th><th>Sep</th></tr>
> </thead>
> <tbody>
> <tr><td>Widgets</td><td>130</td><td>96</td><td>144</td></tr>
> <tr><td>Blibs</td><td>121</td><td>111</td><td>116</td></tr>
> <tr><td>Nibbits</td><td>0</td><td>0</td><td>12</td></tr>
> <tr><td>Arrings</td><td>6</td><td>4</td><td>0</td></tr>
> </tbody>
> </table>
> --------------
>
> It make a nice little table on the right side of the page, but what if I want
> this table spread right across the page (left to right) and I want each cell
> larger. In tables it's easy to do that ie: width=60% hspace=10% vspace=11%
> etc....
>
> Understand what I want?

When I put the above table markup into a browser via an .html
file, the table appears nicely on the left. But then I am in
Australia. Where are you? What side of the world?

If you want to centre things and spread them out etc... you need
to add style info. The traditional way was to put the style specs
into the tags with things like "width=...". It was and is still
open to you to do this. But you need to wrap your head around the
concept of style information that can be separated from the html.
You cannot take out the "width=" and put it anywhere else for it
to act on what you want it to act on. But with a rather different
language/method called css, you can and should.

A quick addition of some css to your table starts to make it take
shape, look at this:

<table style="width:60%;margin:auto" >
<caption style="padding:10px">Q3 Sales</caption>
<thead>
<tr><th>Product</th><th>Jul</th><th>Aug</th><th>Sep</th></tr>
</thead>
<tbody style="text-align:center">
<tr><td style="padding:10px">Widgets</td><td
style="padding:10px">130</td><td style="padding:10px">96</td><td
style="padding:10px">144</td></tr>
<tr><td style="padding:10px">Blibs</td><td
style="padding:10px">121</td><td
style="padding:10px">111</td><td
style="padding:10px">116</td></tr> <tr><td
style="padding:10px">Nibbits</td><td
style="padding:10px">0</td><td style="padding:10px">0</td><td
style="padding:10px">12</td></tr>
<tr><td style="padding:10px">Arrings</td><td
style="padding:10px">6</td><td style="padding:10px">4</td><td
style="padding:10px">0</td></tr>
</tbody>
</table>

OK. What a mouthful eh? So, tidy it up by at least getting all
the style info together separately.

First tidy up would be to put all the styles in the head of your
doc between style tags, like this:

<style type="text/css" title="text/css">
<!--
table {width:60%}
....
td {padding:10px}
....
and so on
-->
</style>

And now you can drop all the "inline styles".

Next step, if you want to go step by step, is to make the stuff
between the script tags into a seperate doc , called - say -
myStyles.css and link it in the head of your html via something
like <link href="myStyles.css" type="css">

Key words for Google tute: tutorial, css. :)

--
dorayme

[Back to original message]