|
|||||||||
|
|||||||||
|
|||||||||
 |
|||||||||
| |
||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
ASP Free Forums Sponsor:
|
|
|
|
#1
February 8th, 2005, 02:42 PM
|
||||
|
||||
|
CSS vs. Tables
I'm adding this thread as a takeoff of the following thread:
http://forums.aspfree.com/t42935/s.html Since I didn't want to hijack pgd22's thread, but had a related question. Quote:
I've seen many examples of using CSS instead of tables for formating the flow of data on a page and essentially I agree with it. What I have not seen is a way to reconstruct the following using CSS instead of a table. I would actually like to know of a way as formatting of this type with tables is still far from perfect. The part I have not seen in CSS is having data entry flow between the multiple columns so that in this example you will fill in Last Name, First Name, Middle Intial, DOB, etc... In that order. Although I'm sure this is possible I have yet to see an example of it. If you know of a tutorial or example that shows this type of formatting I would be grateful. Code:
<table cellpadding="0" cellspacing="0"> <tr> <td> Last Name </td><td align=left><input type=text name="LName"> </td> <td> First Name </td><td align=left><input type=text name="FName"></td> <td> Middle Initial </td><td align=left><input type=text size=1 name="MI"></td> </tr> <tr> <td> DOB </td><td align=left><input type=text name="DOB"></td> <td> SSN </td><td align=left><input type=text name="SSN"></td> <td> Sex </td><td align=left><select name="Sex"><option selected value="F">F</option><option value="M">M</option></select></td> </tr> <tr> <td> Address1 </td><td colspan=5 align=left><input type=text size=50 name="Address1"></td> </tr> <tr> <td> Address2 </td><td colspan=5 align=left><input type=text size=50 name="Address2"></td> </tr> <tr> <td> City </td><td align=left><input type=text name="City"></td> <td> State </td><td align=left><input type=text name="state" size=2></td> <td> Zip </td><td align=left><input type=text name="Zip" size="10"></td> </tr> <tr> <td> Home Phone </td><td align=left><input type=text name="HomePhone"></td> <td> Work Phone </td><td align=left><input type=text name="WorkPhone"></td> <td colspan=2> </td> </tr> </table> Thanks,
__________________
Neal Schafer The early worm gets eaten.
|
|
#2
February 8th, 2005, 04:33 PM
|
||||
|
||||
|
Well... forms are tabular data.... think about it (loosly)... title/value fields, a lot of the WSG members won't flame you for using tables for form field design, but there is a "pure" way:
Yes, there is a way to semantically (and strictly, too) markup and style input forms in a "tabular"-like manner: Code:
<form action="whatever.ext" method="post"> <fieldset> <legend>Personal Details Form</legend> <dl> <dt><label for="txtNameLast">Last Name</label></dt> <dd><input id="txtNameLast" type="text" name="LName" /></dd> <dt><label for="txtNameFirst">First Name</label></dt> <dd><input id="txtNameFirst" type="text" name="FName" /></dd> <dt><label for="txtMiscDOB">Date of Birth</label></dt> <dd><input id="txtMiscDOC" type="text" name="DOB" /></dd> <dt><label for="txtMiscSSN">Social Security #</label></dt> <dd><input id="txtMiscSSN" type="text" name="SSN" /></dd> <dt><label for="slcMiscSex">Gender</label></dt> <dd> <select name="sex" id="slcMiscSex"> <option value="m">Male</option> <option value="f">Female</option> <option value="o">Other</option> <option value="?">Don't know</option> </select> </dd> <dt><label for="txtAddr1">Address Line 1</label></dt> <dd><input id="txtAddr1" type="text" name="Address1" /></dd> <dt><label for="txtAddr2">Address Line 2</label></dt> <dd><input id="txtAddr2" type="text" name="Address2" /></dd> <dt><label for="txtAddrCity">City</label></dt> <dd><input id="txtAddr1" type="text" name="City" /></dd> <dt><label for="txtAddrState">State</label></dt> <dd><input id="txtAddr1" type="text" name="state" /></dd> <dt><label for="txtAddrZip">Zip</label></dt> <dd><input id="txtAddrZip" type="text" name="Zip" /></dd> <dt><label for="txtPhoneHome">Home Phone</label></dt> <dd><input id="txtPhoneHome" type="text" name="HomePhone" /></dd> <dt><label for="txtPhoneWork">Work Phone</label></dt> <dd><input id="txtPhoneWork" type="text" name="WorkPhone" /></dd> </dl> </fieldset> <button type="submit">Submit Form</button> </form> As for styling: Code:
dt, dd {
line-height: 1.2em; }
dd {
float: right;
margin-bottom: -1.2em; }
Simple  Its semantic because <dl><dt><dd> is used to describe items that come in two parts... a "title" and a "definition" or value... they can have multiple values too (hence, multiple <dd> elements) And the style rules just tell it to remove <dd> from the flow and shift it up a row (negative margins) ....However, you will have issues regarding presentation with older browsers (IE5.0 Win and previous and Nav4 obviously) ...But it will remain to be accessible to them And if a phone or handheld user is viewing the media, they can override the stylesheet, or perhaps use a different sheet for handheld users (<link rel="stylesheet" media="handheld, portable" />) then the lack of tables ensures that they wont have horizontal scrollbars You can see an example of this type of form on http://www.w3bdevil.com/planetearth/contact.asp HTH * Webstandards man flies away!
|
|
#3
February 8th, 2005, 08:37 PM
|
||||
|
||||
|
Thanks, I'm unfamiliar with the dl, dt, and dd tags. I'll look into them in greater detail and post back after I've had an opportunity to try them out.
|
|
#5
February 9th, 2005, 05:16 PM
|
||||
|
||||
|
thanks again WSM for the informative tutorial. I had never thought of using <dl><dd><dt> elements for this purpose, but it makes perfect sense.
|
|
#6
February 9th, 2005, 05:21 PM
|
||||
|
||||
|
"All in a days work!"
Web Standards Man and Captain ASP along with sidekick ShadowWizard will stop at nothing to prove that cri...er... bad code doesn't pay!
|
|
#7
February 10th, 2005, 01:30 PM
|
||||
|
||||
|
Quote:
I sit corrected 
|
|
#8
February 10th, 2005, 01:47 PM
|
||||
|
||||
|
I'm having difficulty with with positioning in IE Win 6 as well.
I was able to make this work by changing "margin-bottom" to "margin-top".
|
|
#10
February 10th, 2005, 05:01 PM
|
||||
|
||||
|
LOL! We can't ALWAYS be right can we? Nevertheless, it's a great technique, and I vow to use it from now on! Now go and spread CSS goodness to the four corners.
|
|
#11
February 10th, 2005, 05:47 PM
|
||||
|
||||
|
I already do, however some people find my alter-egos: Web Standards Man and Captain ASP rather offensive.... mainly because they're overly critical of other's work... I guess I'm lucky to not have received any flame-bait PMs yet.
Although its just that I can't stand people who post their sites made in FrontPage (using Themes) in the Site Reviews section and actually expect positive comments ....Someone's got to tell them the truth, and as it happens, that seems to be my job If only my side-kick, ShadowWizardBoy was more concerned about standards rather than pander to my arch-nemises's demands to know how to layout with tables or use non-W3C DOM JavaScript
|
|
#13
February 28th, 2005, 10:40 PM
|
||||
|
||||
|
Quote:
See this is what I don't understand about CSS layouts...wouldn't it be just as easy to make a table class and use tables?
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
