I am working mostly on FORMS and still I cannot create and perfect the layout without using tables. I do not want to use tables anymore.
I made a close to table-less by using LISTs but I use 's to come up with a squarish type of form.
NOTE: THE FORM has a lot of FIELDS :(
Jump to PostWhy don't you want to use tables?
Jump to PostI read a convincing article that justifies using tables for forms... because they are still 'tabular' info. (2 columns: col1 is field title, col2 is input field)
But if you really want to, you can avoid having to use by setting each label and input to display as …
Jump to PostThis is going too far on the tableless page movement!
The original reasons they wanted tables removed from page development are:
- Tables announce their presence by row and column number when accessibility features for the blind are used.
- Before we had margins and padding, tables …
Jump to PostI agree with using tables as it is still tabular info. You can use the list function and set it as no-style with blocks on. Then just setup the rest in CSS when your good and ready.
Why don't you want to use tables?
I read a convincing article that justifies using tables for forms... because they are still 'tabular' info. (2 columns: col1 is field title, col2 is input field)
But if you really want to, you can avoid having to use by setting each label and input to display as a block or inline-block and assigning a padding and margin for them.
Or save this caveman-CSS I whipped up for ya and preview it:
div#form
{
background: #000;
width: 20.0em;
COLOR: #666;
}
label
{
line-height: 1.0em;
background: #E0E0E0;
margin: 0.5em 1.0em;
width: 8.0em;
display: inline-block;
clear: left;
vertical-align: top;
}
input, select, textarea
{
margin: 0.5em 1.0em;
width: 8.0em;
display: inline-block;
clear: right;
}Here is a very-short html code to match
<html>
<head>
<title>FORM</title>
<link rel="stylesheet" type="text/css" href="form-block.css" />
</head>
<body>
<div id="form">
<label>Field1</label><input type="text" />
<label>Field2</label><input type="text" />
<label>Textfield</label><textarea></textarea>
<label>Dropdown</label><select><option>1</option><option>2</option><option>3</option><option>4</option>
</div>
</body>
</html>The background color is to show how the elements are placed in their own 'boxes'. The margin or padding applied to the labels and input fields eliminates the need to add 's.
This is going too far on the tableless page movement!
The original reasons they wanted tables removed from page development are:
- Tables announce their presence by row and column number when accessibility features for the blind are used.
- Before we had margins and padding, tables were the only way to put a margin around the content of the web page.
- People were cutting up images and putting them in table cells to get around server file size limitations.
- People were using tables to control layout or provide sidebars (this is not yet fully solved without using tables).
A form is a form of tabular data. So don't be afraid to use tables here. Table isn't deprecated - it's not going away like center did.
I agree with using tables as it is still tabular info. You can use the list function and set it as no-style with blocks on. Then just setup the rest in CSS when your good and ready.
I am working mostly on FORMS and still I cannot create and perfect the layout without using tables. I do not want to use tables anymore.
I made a close to table-less by using LISTs but I use 's to come up with a squarish type of form.NOTE: THE FORM has a lot of FIELDS :(
Can you provide a URL showing the problem?
<style>
.b {width: 99%; }
.l {width:30%; float:left; text-align:right; margin-right:10px;}
.r {width:30%; float:right; text-align:left; margin-left:10px;}
</style>
<div class='b'>
<div class='l'>Prompt for input 1</div>
<input name='1' type='text'></div>
<div class='b'>
<div class='l'>Prompt for input 2</div>
<input name='1' type='radio' value='yes'>Yes <input name='1' type='radio' value='no' checked>No </div>
<div class='b'>
<div class='l'>Prompt for input 3</div>
<input name='3' type='password'></div>
<div class='b'>
<div class='l'>Prompt for input 4</div>
<textarea cols=60 rows=10 name='4'></textarea></div>
<div class='b'>
<div class='l'>Prompt for input 5</div>
<input name='5' type='radio' value='yes' checked>Yes <input name='5' type='radio' value='no'>No </div>
<div class='b'>
<div class='l'>Prompt for input 6</div>
<input name='6' type='text'></div>
<div class='b'>
<div class='l'>Prompt for submit</div>
<input type='submit' onclick="return confirm('Are you sure ?')"></div>How about a URL? What you posted is not a complete page, and may not appear the same as on your page (if anyone takes the trouble to copy it to a file).
How about a URL? What you posted is not a complete page, and may not appear the same as on your page (if anyone takes the trouble to copy it to a file).
of course its not a complete page,
its a code scrap
a css demonstration
tabulated layout without a table
If a person cant be bothered copy and paste, then *expletive deleted *
access to my source code ? I get paid for that
Perhaps a 'scrap' of code that can be copy pasted directly (with head, body, etc). Cfa probably wanted to help you, but you should also help us help you (if that makes any sense). After all, unlike you, we're not being paid to do this.
There's also no call for that language/possessiveness over the HTML code... HTML and CSS code are viewable by anyone as long as the site goes live. :D If it were PHP, that would have been different.
Anyway, have you looked at my previous post? Isn't that what you wanted to do (with less div tags)? Make use of labels, they can also be floated, assigned their own 'block' but are more 'semantically' correct for labeling your fields.
For those who want to help out too but can't be bothered to copy, paste, AND edit the code he provided, here's my caveman-html version. Copy-paste directly.
<html>
<head>
<title></title>
<style>
.b {width: 99%; }
.l {width:30%; float:left; text-align:right; margin-right:10px;}
.r {width:30%; float:right; text-align:left; margin-left:10px;}
</style>
</head>
<body>
<div class='b'>
<div class='l'>Prompt for input 1</div>
<input name='1' type='text'></div>
<div class='b'>
<div class='l'>Prompt for input 2</div>
<input name='1' type='radio' value='yes'>Yes <input name='1' type='radio' value='no' checked>No </div>
<div class='b'>
<div class='l'>Prompt for input 3</div>
<input name='3' type='password'></div>
<div class='b'>
<div class='l'>Prompt for input 4</div>
<textarea cols=60 rows=10 name='4'></textarea></div>
<div class='b'>
<div class='l'>Prompt for input 5</div>
<input name='5' type='radio' value='yes' checked>Yes <input name='5' type='radio' value='no'>No </div>
<div class='b'>
<div class='l'>Prompt for input 6</div>
<input name='6' type='text'></div>
<div class='b'>
<div class='l'>Prompt for submit</div>
<input type='submit' onclick="return confirm('Are you sure ?')"></div>
</body>
</html>When you place your web page online, EVERYONE has access to your source code.
When you place your web page online, EVERYONE has access to your source code.
sematic error (pedantic error :) )
everyone has access to the output
perl and php means that they dont see the source code, I get paid for that
Yes, and we're asking for the html code. Not the php. =)
The reason we need the final code is that we need to see how it renders. There are places where different tags interact strangely.
But playing with JavaScript, PHP, and Perl can cause other rendering errors. One error I have seen is that an object that is not initially rendered is rendered wrongly when inserted later.
I have read a lot using label, fieldsets and legends within the form but it doesn't solved my problem. I think table is still your first choice in making complicated forms but forms with 4-8 fields or lower list will be the best choice.
forms without tables is saving a lot of bandwidth for me, its lighter....
I rest my case here! Thanks for the posters VOLUNTARILY help you know who you are!!!
We are not paid but the idea of helping is a lot of GOOD KARMA.
Thanks Guys!
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.