/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] General question re: css vs. tables for making forms look good

Copy linkTweet thisAlerts:
Oct 03.2008

Hi all,

I want to make a form that will allow users to input their name, address, phone number, etc., and I want it to be in two columns, roughly like this:

Name: xxxxxxxxxx
Address: xxxxxxxxxx
Phone: xxxxxxxxxx

(The xxxxs represent the input boxes.)

I also want the left column to be aligned right so that the colons line up vertically, and I want the input boxes to line up too. In other words, NOT how it looks on the screen right now.

I only use CSS, and never use tables to control presentation. I use tables only to present data that must be presented in tabular form. But, I don’t know if this counts. Should I be using CSS to create two columns here, or is this a situation where using tables is legitimate? I’m a volunteer hack webmaster for an academic department, and I’m trying hard to follow best practices, but some things like this I just don’t know.

Mods, please move this thread if I’ve posted to the wrong forum.

Thanks!

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@FourCourtJesterOct 03.2008 — putting div's side by side to encapsulate 'columns' is perfectly legitimate, and used often. using widths, heights, floats and margins to achieve neat, tidy and aligned presentations is usually a good way to go.
Copy linkTweet thisAlerts:
@boycottIEauthorOct 03.2008 — Thanks for the speedy reply! I'm glad to know I was right to think I should keep it in css and not tables.

Thanks,

boycottIE
Copy linkTweet thisAlerts:
@FangOct 03.2008 — Table are acceptable.

A way with css:<style type="text/css">
label {display:block; width:15em;text-align:right;}
</style>

</head>
<body>
<label>Name:<input type="text"></label>
<label>Address:<input type="text"></label>
<label>Phone<input type="text"></label>
</body>
×

Success!

Help @boycottIE spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.8,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...