|
|
Posted by GreatDomainz on 11/27/97 11:59
Thierry Lam wrote:
> Can I get some help on how to convert the following table layout into a
> div/css?
>
> <table>
> <tr>
> <td width='120px'><p>Province: </td>
> <td align='right'>
> <input type='Text' name='province' size='40' maxlength='50'>
> </td>
> </tr>
> <tr>
> <td width='120px'><p>City: </td>
> <td align='right'>
> <input type='Text' name='city' size='40' maxlength='50' >
> </td>
> </tr>
> <tr>
> <td width='120px'><p>Time in: </td>
> <td align='right'>
> <input type='Text' name='inhours' value='' size='2' maxlength='2'>:
> <input type='Text' name='inminutes' value='' size='2'
> maxlength='2'>:
> <input type='Text' name='inseconds' value='' size='2'
> maxlength='2'> (HH:MM:SS)
> </td>
> </tr>
> <tr>
> <td width='120px'><p>Time out: </td>
> <td align='right'>
> <input type='Text' name='outhours' value='' size='2'
> maxlength='2'>:
> <input type='Text' name='outminutes' value='' size='2'
> maxlength='2'>:
> <input type='Text' name='outseconds' value='' size='2'
> maxlength='2'> (HH:MM:SS)
> </td>
> </tr>
> </table>
Chris beat me to it, but I'd already typed it up so I guess i'll post
anyway... this example uses a 600 pixel table width.
In the CSS file...
/* Table
----- */
..thetable {width:600px;}
/* Rows
---- */
..therows {clear:left}
/* cells
----- */
..cellone {width:120px;float:left;}
..celltwo {width:560px;float:right;text-align:right;}
Then in your page...
<div class="thetable">
<div class="therows"><div class="cellone">Cell One Content</div><div
class="celltwo">Cell Two Content</div></div>
<div class="therows"><div class="cellone">Cell One Content</div><div
class="celltwo">Cell Two Content</div></div>
<div class="therows"><div class="cellone">Cell One Content</div><div
class="celltwo">Cell Two Content</div></div>
</div>
The widths and names I used are just an example and you can always add
padding/color etc to the cells and rows. I just tried to keep it
simple to give you a good starting point. If you're using a fluid
design, you can use a similar format, and just swap out the pixel
widths with percentages.
Hope this helped,
Don.
-------------------------------------------------------------------
http://www.makemoney.ms - Just one idea...
-------------------------------------------------------------------
Navigation:
[Reply to this message]
|