Need help converting a table to div/css

T

Thierry Lam

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>
 
C

Chris F.A. Johnson

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>
Click to expand...


<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>
 
C

Chris F.A. Johnson

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

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

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

GreatDomainz

Thierry said:
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>
Click to expand...

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.
 
B

Bergamot

Chris said:
<p class="label">Province:</p><p><input type='Text'
name='province' size='40' maxlength='50'>
Click to expand...

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

Beauregard T. Shagnasty

Thierry said:
Can I get some help on how to convert the following table layout into
a div/css?
Click to expand...

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

GreatDomainz

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

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

Don.
 
T

Thierry Lam

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.
 
B

Beauregard T. Shagnasty

Thierry said:
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.
Click to expand...

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.]
 
D

dorayme

"Beauregard T. Shagnasty said:
All my sites have tables ... but only where there is real tabular data.
Otherwise, nary a table (for layout) can be found anywhere.
Click to expand...

Can you please stop making these statements as it causes me
distress from guilt. I am not making new tables for layout in
spite of a few arguments that rattle around my brain saying some
of it is justified... but I have yet to go though a lot of stuff
and be rid of the remaining table structures.
 
B

Beauregard T. Shagnasty

dorayme said:
Can you please stop making these statements as it causes me distress
from guilt. I am not making new tables for layout in spite of a few
arguments that rattle around my brain saying some of it is
justified... but I have yet to go though a lot of stuff and be rid of
the remaining table structures.
Click to expand...

LOL! Distress? Take two aspirin and call me in the morning.
 
D

dorayme

"Luigi Donatello Asero said:
I do not translate it here because I think that it is copyrighted.
Click to expand...

And any indication to convey the message in any language other
than Swedish to a third party can bring in a 10 year jail
sentence. I don't blame you for being careful.
 
L

Luigi Donatello Asero

dorayme said:
And any indication to convey the message in any language other
than Swedish to a third party can bring in a 10 year jail
sentence. I don't blame you for being careful.
Click to expand...

Do you also know which law and paragraph you are referring to?
 
V

Vaxius

By the way, as far as I remember, you wrote that you had been in Rome.
Well,
did you read this (in Swedish about something happening in Italy)?
http://www.dn.se/DNet/jsp/polopoly.jsp?d=148&a=576007&previousRenderType=6
Click to expand...

I don't believe it's time to switch to using pure CSS for layouts. My
reasoning? IE. I could launch off on a tangent about all the retarded
things IE does with CSS, but the fact remains that over 80% of people on
the Internet use IE, and I don't want my site butchered it (I did a recent
check and made a CSS layout for the hell of it, looked great in Firefox
and Opera, looked absolutely horrible in IE). And though there are hacks
to get around IE's deficiencies, I can't bring myself to dirty
up my code like that. Therefore, I believe the ugly tables solution will
have to do for the immediate future.
 
D

dorayme

Vaxius said:
I don't believe it's time to switch to using pure CSS for layouts. My
reasoning? IE. I could launch off on a tangent about all the retarded
things IE does with CSS, but the fact remains that over 80% of people on
the Internet use IE, and I don't want my site butchered it (I did a recent
check and made a CSS layout for the hell of it, looked great in Firefox
and Opera, looked absolutely horrible in IE). And though there are hacks
to get around IE's deficiencies, I can't bring myself to dirty
up my code like that. Therefore, I believe the ugly tables solution will
have to do for the immediate future.
Click to expand...

What you will be told here is that you are already dirtying up
your code with tables, that you should smarten up.

I am glad you are all **** a hoop about it. I am a defeated
being, battered by the power of this church, guilt-ridden about
every layout table I have on old existing sites and the task of
changing so much is altogether too daunting. It is cheaper to
feel bad, to skulk about and lie low... occasionally neighbours
who are probably alt.html church members come out and beat me
with rolled up old newspapers as I try to sneak past their houses
early to get the latest daily to read...

You will feel differently when you get better at providing for IE
6. You can easily make a separate CSS sheet just for IEs eyes.
Your reluctance to "dirty up" your "code" sounds to me based on a
a few misunderstandings. For a start, the HTMl, ideally, will be
as pure as the driven snow. It is the CSS sheets that are linked
that can provide the solution. And it is fun. Have you got better
things to do or something?

Don't be like that US senator going on about morality but
secretly doing dirty things anyway. Wise up young Roman! The past
is the past. But the future is under your control.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Javascript DOM 1
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
Help needed with thank you message 5
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Filter table rows based on multiple checkboxes value 2
How to have two html audio players on one page? 0
Function call from button to automatic 7

Members online

Total: 25 (members: 1, guests: 24)
Robots: 473

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,053
Latest member
BrodieSola

Latest Threads

Top