I making a fully tableless website. This what i came up with using CSS but doesn't look good compared to the tables.



<h2>Add a Comment:</h2>

<p>
<input id="name" type="text" value="name" name="name" />
<input id="email" type="text" value="your_email@yourdomain.com" name="email" width="200px"/>
</p>






<h2>
Add a Comment:
</h2>
<table>
<tr>
<td>
<label for="name">Name:</label>
</td>
<td>
<input id="name" name="name" type="text" />
</td>
</tr>
<tr>
<td>
<label for="email">E-Mail:</label>
</td>
<td>
<input id="email" name="email" type="text" />
(optional)
</td>
</tr>
<tr>
<td>
<label for="website">WebSite:</label>
</td>
<td>
<input id="website" name="website" type="text"
value="http://" /> (optional)
</td>
</tr>
</table>
<p>
<textarea cols="32" rows="6" name="message"></textarea><br />
<input type="submit" name="submit" value="Add Comment" />
<input type="reset" name="reset" value="Reset" />
</p>

I code using xhtml/css and I still use tables for forms.

You'll end up with more code in the end trying to avoid tables, than if you were to just use them in the first place.

I have see that where its so true, but for this little bit of code i thought it would be easy :/

I was wrong no matter how i make it, she looks horrible... I still wish to make a fully tableless website. dang...

You can easily style forms without using tables, as tables should be used for tabular data only (like calendars, for example).

As an example, see this article (http://www.picment.com/articles/css/funwithforms/) that shows you how to stylize forms with CSS, yet avoid tables and write better markup.

Thanks for the link small problem..

Firefox can't find the server at www.picment.com.

can you cut and paste for me :)

Its working from here just fine (and on Firefox to boot). Seems you have resolution problems.

I can connect to the sites IP and other sites on the webserver just not that one and dns stuff shows some fails...

cant be me... http://dnsreport.com/tools/dnsreport.ch?domain=picment.com

ERROR. One or more of your DNS servers are missing A records (per NS records that may be cached). As a result, they cannot be used. The problem hostnames are:

ns1.nld.dk. has no A record.

and

A timeout occurred getting the NS records from your nameservers! None of your nameservers responded fast enough. They are probably down or unreachable. I can't continue since your nameservers aren't responding. If you have a Watchguard Firebox, it's due to a bug in their DNS Proxy, which must be disabled.


edit---
woohoo google cache :D

I have also seen people use <dl> and <dt> tags for forms, although I am not convinced that is the best way to go either.

I dont think that forms are quite as well defined (semantically) by the specs than almost any other page element.

<p>
<label>Your Name:</label><br />
<input id="name" name="name" type="text" value="" /><br />
<label>Your Website:</label><br />
<input id="website" name="website" type="text" value="http://" /><br />
<label>Your Email:</label><br />
<input id="email" name="email" type="text" value="" />(optional)<br /><br />
<textarea cols="32" rows="6" name="message"></textarea><br />
<input type="submit" name="submit" value="Add Comment" />
<input type="reset" name="reset" value="Reset" />
</p>




That works pretty well for me.

I have also seen people use <dl> and <dt> tags for forms, although I am not convinced that is the best way to go either.

I dont think that forms are quite as well defined (semantically) by the specs than almost any other page element.


Speaking of that on rackmountmicro.com they use <dl> and <dt> tags.

ex..
<div id="special-offer">

<h1>Low cost, professional servers</h1>


<dl id="special-1" class="special">
<dt>Pentium 4 Special</dt>
<dd>Intel Pentium 4 3.0GHz (800Mhz FSB/1024KB Cache)</dd>
<dd>1GB (2 x 512MB) Apacer PC2700 DDR RAM</dd>
<dd>Gigabyte 8I865GVMK-775 Motherboard</dd>

<dd>200GB Seagate 7200rpm SATA HD w/8MB Cache</dd>
<dd>Dynatron 1u Low Profile Blower Fan</dd>
<dd>Chenbro RM12400 Chassis w/300w PSU</dd>
<dd class="price">Price: $705.00</dd>
</dl>
</div>

Looks pretty clean :)

<dl> stands for definition list and therefore can be used for forms