Topic: Mini Table to CSS (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=25155" title="Pages that link to Topic: Mini Table to CSS (Page 1 of 1)" rel="nofollow" >Topic: Mini Table to CSS <span class="small">(Page 1 of 1)</span>\$

bitdamaged Maniac (V) Mad Scientist From: 100101010011 <-- right about here Insane since: Mar 2000	posted 03-02-2005 21:58 Alright I'm trying to get rid of most tables in my layouts. So I have a pretty simple table for laying out a form. Looks like so: (there's a little smarty template code in there which you can ignore) code: <table cellpadding="2" cellspacing="0" width="90%"> <tr> <td>Username:</td> <td> <input type="text" name="user" value="{$user}" class="inputText"> </td> </tr> <tr> <td>Password:</td> <td> <input type="text" name="pass" value="{$pass}" class="inputText"> </td> </tr> </table> Is there an easy way to do this with CSS or are tables best? .:[ Never resist a perfect moment ]:.
poi Paranoid (IV) Inmate From: France Insane since: Jun 2002	posted 03-02-2005 22:06 To do that kind of layout you should put the Username: and Password: texts in a label tag. quote: Is there an easy way to do this with CSS or are tables best? Tables for layout are evil. They give prostate cancer and attract the thunder of the standard advocates on your sites. (Edited by poi on 03-02-2005 22:08)
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 03-02-2005 22:23 Forms are one of those questionable cases where, in a sense they are tabular data, yet they're so simple in structure (label, input, label, input) that it seems like using a table is just the easy way out. Sometimes you can use divs and CSS to get the layout looking right for forms, usually using float:left in a couple places. But in cases where that's too difficult, I think simple tables are an acceptable markup for forms. Of course, get rid of that cellpadding/spacing/width style information and put it in the CSS. Finally, as poi said, be sure to use the <label> tag to associate the labels with their inputs.
Nathus Bipolar (III) Inmate From: Minnesota Insane since: Aug 2003	posted 03-02-2005 22:24 You could do something similar to this. code: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> <!-- form { width:90%; } label { width:49%; display:block; float:left; margin:0; } input { width:50%; } --> </style> </head> <body> <form> <label for="user">Username:</label><input type="text" id="user" name="user" value="" class="inputText"> <label for="pass">Password:</label><input type="text" id="pass" name="pass" value="" class="inputText"> </form> </body> </html>

Topic: Mini Table to CSS (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=25155" title="Pages that link to Topic: Mini Table to CSS (Page 1 of 1)" rel="nofollow" >Topic: Mini Table to CSS <span class="small">(Page 1 of 1)</span>\$

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted 03-02-2005 21:58

Alright I'm trying to get rid of most tables in my layouts. So I have a pretty simple table for laying out a form. Looks like so: (there's a little smarty template code in there which you can ignore)

code:

<table cellpadding="2" cellspacing="0" width="90%">

			<tr>

				<td>Username:</td>

				<td>

					<input type="text" name="user" value="{$user}" class="inputText">

				</td>

			</tr>

			<tr>

				<td>Password:</td>

				<td>

					<input type="text" name="pass" value="{$pass}" class="inputText">

				</td>

			</tr>

		</table>

Is there an easy way to do this with CSS or are tables best?

.:[ Never resist a perfect moment ]:.

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted 03-02-2005 22:06

To do that kind of layout you should put the Username: and Password: texts in a label tag.

quote:
Is there an easy way to do this with CSS or are tables best?

Tables for layout are evil. They give prostate cancer and attract the thunder of the standard advocates on your sites.

(Edited by poi on 03-02-2005 22:08)

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 03-02-2005 22:23

Forms are one of those questionable cases where, in a sense they *are* tabular data, yet they're so simple in structure (label, input, label, input) that it seems like using a table is just the easy way out.

Sometimes you can use divs and CSS to get the layout looking right for forms, usually using float:left in a couple places. But in cases where that's too difficult, I think simple tables are an acceptable markup for forms. Of course, get rid of that cellpadding/spacing/width style information and put it in the CSS.

Finally, as poi said, be sure to use the <label> tag to associate the labels with their inputs.

Nathus
Bipolar (III) Inmate

From: Minnesota
Insane since: Aug 2003

posted 03-02-2005 22:24

You could do something similar to this.

code:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title></title>

<style type="text/css">

<!--

form {

  width:90%;

}

label {

  width:49%;

  display:block;

  float:left;

  margin:0;

}

input {

  width:50%;

}

-->

</style>



</head>

<body>

<form>

<label for="user">Username:</label><input type="text" id="user" name="user" value="" class="inputText">

<label for="pass">Password:</label><input type="text" id="pass" name="pass" value="" class="inputText">

</form>

</body>

</html>

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: Mini Table to CSS (Page 1 of 1)

Insert Slimies »

Insert UBB Code »

Topic: Mini Table to CSS (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=25155" title="Pages that link to Topic: Mini Table to CSS (Page 1 of 1)" rel="nofollow" >Topic: Mini Table to CSS <span class="small">(Page 1 of 1)</span>\$