Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Need help converting a table to div/css

Reply
Thread Tools

Need help converting a table to div/css

 
 
Thierry Lam
Guest
Posts: n/a
 
      09-27-2006
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>

 
Reply With Quote
 
 
 
 
Chris F.A. Johnson
Guest
Posts: n/a
 
      09-27-2006
On 2006-09-27, 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>



<head>
<style type="text/css">
p {
margin:0;
padding: .2em 0;
}

p.label {
width: 6em;
float: left;
clear: both;
}

p.r {
margin-left: 7em;
padding-left: 7em;
}

</style>
</head>
<body>

<div id="form">
<p class="label">Province:</p><p><input type='Text'
name='province' size='40' maxlength='50'>
<p class="label">City: </p><p><input type='Text'
name='city' size='40' maxlength='50' >

<p class="label">Time in:</p>
<p class="r"><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)

<p class="label">Time out:</p>
<p class="r"><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)
</div>


--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
 
Reply With Quote
 
 
 
 
Chris F.A. Johnson
Guest
Posts: n/a
 
      09-27-2006
On 2006-09-27, Chris F.A. Johnson wrote:
> On 2006-09-27, 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>

>
>
><head>
><style type="text/css">
> p {
> margin:0;
> padding: .2em 0;
> }
>
> p.label {
> width: 6em;
> float: left;
> clear: both;
> }


In IE, the two look the same without this next section:

> p.r {
> margin-left: 7em;
> padding-left: 7em;
> }


></style>
></head>
><body>
>
><div id="form">
> <p class="label">Province:</p><p><input type='Text'
> name='province' size='40' maxlength='50'>
> <p class="label">City: </p><p><input type='Text'
> name='city' size='40' maxlength='50' >
>
> <p class="label">Time in:</p>
> <p class="r"><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)
>
> <p class="label">Time out:</p>
> <p class="r"><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)
></div>
>
>



--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
 
Reply With Quote
 
GreatDomainz
Guest
Posts: n/a
 
      09-27-2006
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...
-------------------------------------------------------------------

 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      09-27-2006
Chris F.A. Johnson wrote:

> <p class="label">...</p>


Yucky.

<p class="labelholder"><label for="some_id">...</label></p>

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
Bergamot
Guest
Posts: n/a
 
      09-27-2006
Chris F.A. Johnson wrote:
> <p class="label">Province:</p><p><input type='Text'
> name='province' size='40' maxlength='50'>


um, why don't you just use the <label> element?
Seems to me, that's what it's for...

--
Berg
 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      09-27-2006
Thierry Lam wrote:

> Can I get some help on how to convert the following table layout into
> a div/css?


And then this question: isn't your example actual tabular data? For
which a table is designed? It even looks like .. um .. a "timetable!"

--
-bts
-Motorcycles defy gravity; cars just suck.
 
Reply With Quote
 
GreatDomainz
Guest
Posts: n/a
 
      09-27-2006

Beauregard T. Shagnasty wrote:
> Thierry Lam wrote:
>
> > Can I get some help on how to convert the following table layout into
> > a div/css?

>
> And then this question: isn't your example actual tabular data? For
> which a table is designed? It even looks like .. um .. a "timetable!"
>
> --
> -bts
> -Motorcycles defy gravity; cars just suck.


lmao. Got a good chuckle out of that... thanks.

Don.

 
Reply With Quote
 
Thierry Lam
Guest
Posts: n/a
 
      09-27-2006
You might be right, I've been too focused to remove table layout from
my web pages that I forgot to leave actual tables where they should be.


Beauregard T. Shagnasty wrote:
> Thierry Lam wrote:
>
> > Can I get some help on how to convert the following table layout into
> > a div/css?

>
> And then this question: isn't your example actual tabular data? For
> which a table is designed? It even looks like .. um .. a "timetable!"
>
> --
> -bts
> -Motorcycles defy gravity; cars just suck.


 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      09-27-2006
Thierry Lam wrote:

> Beauregard T. Shagnasty wrote:
>> Thierry Lam wrote:
>>
>>> Can I get some help on how to convert the following table layout into
>>> a div/css?

>>
>> And then this question: isn't your example actual tabular data? For
>> which a table is designed? It even looks like .. um .. a "timetable!"

>
> You might be right, I've been too focused to remove table layout from
> my web pages that I forgot to leave actual tables where they should
> be.


Yup, sometimes you get too close to the forest.

All my sites have tables ... but only where there is real tabular data.
Otherwise, nary a table (for layout) can be found anywhere.

[Please note that replies go down here instead of on top. Thanks.]

--
-bts
-Motorcycles defy gravity; cars just suck.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Declare the table variable "tbl"... -.-' !?! I just need a table NAME there! -.-' Andrea Raimondi ASP .Net 2 07-18-2008 02:21 PM
Re: Need help converting a table to div/css Luigi Donatello Asero HTML 0 09-28-2006 08:42 PM
Table/table rows/table data tag question? Rio HTML 4 11-05-2004 08:11 AM
need help converting string in double in one line!! lang C pop Java 4 06-17-2004 12:20 AM
Could not load type VTFixup Table from assembly Invalid token in v-table fix-up table. David Williams ASP .Net 2 08-12-2003 07:55 AM



Advertisments