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 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 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 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 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:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu