Re: drop down
- From: dorayme <doraymeRidThis@xxxxxxxxxxxxxxx>
- Date: Sat, 18 Mar 2006 09:51:34 +1100
In article <1142601249@xxxxxxxxxxxxxxxxxxxxxx>,
NOSPAM.STOP.gbbsg@xxxxxxx (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
.
- References:
- Re: drop down
- From: Toby Inkster
- Re: drop down
- From: Gufus
- Re: drop down
- Prev by Date: Re: HTML to PDF
- Next by Date: Re: How do I put random quotes on my web site?
- Previous by thread: Re: drop down
- Next by thread: Re: drop down
- Index(es):
Relevant Pages
|
