如何在不使用表格的情况下设置样式和对齐方式? [英] How to style and align forms without tables?

问题描述

我已经习惯于使用<table>s完美地对齐我的表单域.这是我通常编写表单的方式:

I've gotten used to using <table>s for aligning my form fields perfectly. This is how I commonly write my forms:

<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对于表单非常有效.一切都完全正确地对齐，间距是完美的，所有错误都恰好在彼此之间，等等.

I know this is bad practice, and I want to use CSS, <label>s, <div>s, or a cleaner method. However, the fact is, <table>s work extremely well for the forms. Everything is aligned exactly right, the spacing is perfect, all errors exactly below each other, etc.

我最近尝试在表单中使用<dt>和<dd>标记，但是由于它们看起来好多了，最终我还是回到了表上.

I recently tried using <dt> and <dd> tags for a form, but I ended up reverting back to tables just because they looked so much better.

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

How can I get this kind of aligned table layout without using <table>s?

推荐答案

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

This might not get a lot of support but here's my two cents:

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

In some situations tables are easier for layout; such as three columns or forms (albeit there are some great suggestions here for doing a pure css form layout so don't ignore those either.)

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

我相信此引用非常适用于这种情况.如果您的表格布局适合您，不会引起可访问性问题并且没有损坏-请不要对其进行修复.

I believe that this quote very strongly applies to this situation. If your table layout is working for you, not causing accessibility issues and isn't broken - then don't fix it.

类似这样的短语:你应该"，必须"，总是"-让我感到害怕，因为一个尺码并不能全部适合！把狂热者和一粒盐一起吃.

Phrases like: "you should", "must", "always" - make me scared, because one-size-doesn't-fit-all! Take zealots with a grain of salt.

这篇关于如何在不使用表格的情况下设置样式和对齐方式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！