html - 如何在没有表格的情况下设计和对齐表格？

Question

我已经习惯了使用 <table>s完美对齐我的表单字段。这是我通常编写表单的方式:

<table border="0">
   <tr>
     <td><label for="f_name">First name:</label></td>
     <td><input type='text' id='f_name' name='f_name' /></td>
     <td class='error'><?=form_error('f_name');?></td>
   </tr>
</table>

我知道这是不好的做法，我想使用 CSS，<label>s , <div>s ，或更清洁的方法。然而，事实是，<table>s表格工作得非常好。一切都完全正确对齐，间距完美，所有错误都恰好在彼此下方，等等。

我最近尝试使用 <dt>和 <dd>表格的标签，但我最终又回到了表格，因为它们看起来好多了。

如何在不使用 <table> 的情况下获得这种对齐的表格布局？是吗？

Answer 1

这可能不会得到很多支持，但这是我的两分钱:

在某些情况下，表格更容易布局；例如三列或表单(尽管这里有一些关于做纯 css 表单布局的好建议，所以也不要忽略它们。)

Processes and methodologies can make good servants but are poor masters.   - Mark Dowd, John McDonald & Justin Schuh      in "The Art of Software Security Assessment"

我相信这句话非常适用于这种情况。如果您的表格布局适合您，不会导致可访问性问题并且没有损坏 - 那么请不要修复它。

像这样的短语:“你应该”、“必须”、“总是”——让我害怕，因为一刀切并不适合所有人!对狂热者持保留态度。