Getting rid of tables my !@#$

[Belisarius]

I've been trying to redo some webpages using CSS instead of tables for layout, and it's becoming increasingly frustrating. The pages are forms and form-data, and while there are plenty of examples on how to do the layout of forms in CSS, there aren't any examples on how to layout the resulting form-data in only CSS. At the same time, no one explicitly says not to use CSS for form-data. Grrr . . .

[DavH27]

Uhrm...okay? Isn't that a journal entry??

Anyway I don't see how you're going wrong. While I've never attempted what you are, I don't see how form parts are treated differently?

[sde]

what do you mean by 'the resulting form data in only CSS' ?

i stay far away from a 100% CSS layout. too many inconsistancies between browsers.

[idx]

So the resulting X 'rows' of tabular data will be rendered with CSS instead of tables, eh? I really suck at design, but am trying to use CSS more as I can. Although I still use tables to display rows of data (typically from a DB).

(all the style for the table is based in css though)

-r

[Belisarius]

I mean I have about 30 or so form fields that need to be layed out in a space-efficent form. I had been using a set of nested tables (very, vert nested at times), but I started messing around with CSS and the more I read the more was lamented about using tables to lay things out. I looked at a few examples and though, "Ok, this might do what I need it to". I even looked at some table-less form designs. The problem was that no one showed how to lay out the processed version of the form, the one that doesn't have any "input" fields, just text. I tried to recreate the methods used for form layout, but they failed miserably as the left hand titles didn't line up with multi-row values. Tables handle this automatically, but not the methods employed for table-less CSS apparently.

For example, I have an "address" field. Well, if the address goes on too long, the line wraps down. The only problem is that the title, "Address:" doesn't increase it's space to match, and the result is that "State:" is now directly left of the lower half of the address.

I've been able to get rid of a number of the nested tables, but I don't see how it's possible to completely give up tables on anything but the most simple layouts, that contain only a few elements.

[teknomage1]

Well, I see this as a case of right tool for the right job, tables are still legal html, and no one's asking you to completely ditch tables, the tableless revolution is just about using tables as elements in a page versus the entire page being nothing but tables. When I do my designs I use DIV tags to seperate blocks of content and arrange those with CSS statements, but if the interior of a block requires a table to work properly, so be it.

[Admin]

tables for forms is OK

just keep the HTML clean.

[sde]

here is a format i like to use for tables with the key name on the left of the input box.

<form method="POST" action="mypage.php">
<table border="0" cellspacing="1" cellpadding="2">
<!-- example of 1 item of data per row -->
<tr>
  <td align="right">Email</td>
  <td><input type="text" name="email" size="35"></td>
</tr>
<!-- exmple of more than 1 item per row -->
<tr>
  <td align="right">First Name</td>
  <td><input type="text" name="first_name"> &nbsp; 
  Last Name <input type="text" name="last_name"></td>
</tr>
<!-- submit -->
<tr>
  <td align="right">&nbsp;</td>
  <td align="right"><input type="submit" name="btn_submit" value="Submit"></td>
</tr>
</table>
</form>

I know I could do a colspan on the submit line, but IE tends to make all cells the same width if you use a colspan.

here's another one with keynames on top of input boxes.

<form method="POST" action="mypage.php">
<table border="0" cellspacing="1" cellpadding="2">
<!-- example of 1 item of data per row -->
<tr>
  <td>Email<br><input type="text" name="email" size="35"></td>
</tr>
<!-- exmple of more than 1 item per row -->
<tr>
  <td>
  
  <table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>First Name<br><input type="text" name="first_name"> &nbsp;</td>
    <td>Last Name<br><input type="text" name="last_name"></td>
  </tr>
  </table>
  
  </td>
</tr>
<!-- submit -->
<tr>
  <td align="right"><input type="submit" name="btn_submit" value="Submit"></td>
</tr>
</table>
</form>

i know it has nothing to do with your question since it is nested tables, but just thought i'd share

[Belisarius]

Originally Posted by teknomage1

Well, I see this as a case of right tool for the right job, tables are still legal html, and no one's asking you to completely ditch tables, the tableless revolution is just about using tables as elements in a page versus the entire page being nothing but tables. When I do my designs I use DIV tags to seperate blocks of content and arrange those with CSS statements, but if the interior of a block requires a table to work properly, so be it.

Yeah, that's what I'm beginning to think as well.