用 Div 替换 HTML 表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/702181/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Replace HTML Table with Divs
提问by Jacob Adams
Alright, I'm trying to buy into the idea that html tables should not be used, and that divs should be. However, I often have code that resembles the following
好吧，我试图接受不应该使用 html 表而应该使用 div 的想法。但是，我经常有类似于以下内容的代码
<table>
<tr>
<td>First Name:</td>
<td colspan="2"><input id="txtFirstName"/></td>
</tr>
<tr>
<td>Last Name:</td>
<td colspan="2"><input type="text" id="txtLastName"/></td>
</tr>
<tr>
<td>Address:</td>
<td>
<select type="text" id="ddlState">
<option value="NY">NY</option>
<option value="CA">CA</option>
</select>
</td>
<td>
<select type="text" id="ddlCountry">
<option value="NY">USA</option>
<option value="CA">CAN</option>
</select>
</td>
</tr>
</table>
I want the labels to be aligned and I want the controls to be aligned. How would I do this without using tables?
我希望标签对齐，我希望控件对齐。如果不使用表格，我将如何做到这一点？
采纳答案by partoa
This ought to do the trick.
这应该可以解决问题。
<style>
div.block{
overflow:hidden;
}
div.block label{
width:160px;
display:block;
float:left;
text-align:left;
}
div.block .input{
margin-left:4px;
float:left;
}
</style>
<div class="block">
<label>First field</label>
<input class="input" type="text" id="txtFirstName"/>
</div>
<div class="block">
<label>Second field</label>
<input class="input" type="text" id="txtLastName"/>
</div>
I hope you get the concept.
我希望你明白这个概念。
回答by KOGI
Please be aware that although tables are discouraged as a primary means of page layout, they still have their place. Tables can and shouldbe used when and where appropriate and until some of the more popular browsers (ahem, IE, ahem) become more standards compliant, tables are sometimesthe best route to a solution.
请注意，虽然不鼓励将表格作为页面布局的主要方式，但它们仍有其一席之地。表格可以而且应该在适当的时候和地点使用，直到一些更流行的浏览器（啊哈、IE、啊哈）变得更加符合标准，表格有时是解决方案的最佳途径。
回答by Wavesailor
I looked all over for an easy solution and found this codethat worked for me. The rightdiv is a third column which I left in for readability sake.
我四处寻找一个简单的解决方案，发现这段代码对我有用。该rightDIV是我留在了可读性起见，第三列。
Here is the HTML:
这是 HTML：
<div class="container">
<div class="row">
<div class="left">
<p>PHONE & FAX:</p>
</div>
<div class="middle">
<p>+43 99 554 28 53</p>
</div>
<div class="right"> </div>
</div>
<div class="row">
<div class="left">
<p>Cellphone Gert:</p>
</div>
<div class="middle">
<p>+43 99 302 52 32</p>
</div>
<div class="right"> </div>
</div>
<div class="row">
<div class="left">
<p>Cellphone Petra:</p>
</div>
<div class="middle">
<p>+43 99 739 38 84</p>
</div>
<div class="right"> </div>
</div>
</div>
And the CSS:
和 CSS：
.container {
display: table;
}
.row {
display: table-row;
}
.left, .right, .middle {
display: table-cell;
padding-right: 25px;
}
.left p, .right p, .middle p {
margin: 1px 1px;
}
回答by bobince
You cancreate simple float-based forms without having to lose your liquid layout. For example:
您可以创建简单的基于浮动的表单而不必丢失您的液体布局。例如：
<style type="text/css">
.row { clear: left; padding: 6px; }
.row label { float: left; width: 10em; }
.row .field { display: block; margin-left: 10em; }
.row .field input, .row .field select {
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; -khtml-box-sizing: border-box;
}
</style>
<div class="row">
<label for="f-firstname">First name</label>
<span class="field"><input name="firstname" id="f-firstname" value="Bob" /></span>
</div>
<div class="row">
<label for="f-state">State</label>
<span class="field"><select name="state" id="f-state">
<option value="NY">NY</option>
</select></span>
</div>
This does tend to break down, though, when you have complex form layouts where there's a grid of multiple fixed and flexible width columns. At that point you have to decide whether to stick with divs and abandon liquid layout in favour of just dropping everything into fixed pixel positions, or let tables do it.
但是，当您有复杂的表单布局，其中有多个固定和灵活宽度列的网格时，这确实会崩溃。在这一点上，您必须决定是否坚持使用 div 并放弃流动布局，而是将所有内容放到固定的像素位置，或者让表格来做。
For me personally, liquid layout is a more important usability feature than the exact elements used to lay out the form, so I usually go for tables.
对我个人而言，流动布局是一个比用于布局表单的确切元素更重要的可用性功能，所以我通常选择表格。
回答by Ken Browning
Basically it boils down to using a fixed-width page and setting the width for those labels and controls. This is the most common way in which table-less layouts are implemented.
基本上它归结为使用固定宽度的页面并设置这些标签和控件的宽度。这是实现无表布局的最常见方式。
There are many ways to go about setting widths. Blueprint.cssis a very popular css framework which can help you set up columns/widths.
有很多方法可以设置宽度。 Blueprint.css是一个非常流行的 css 框架，它可以帮助您设置列/宽。
回答by Kaszoni Ferencz
there is a very useful online tool for this, just automatically transform the table into divs:
有一个非常有用的在线工具，只需自动将表格转换为 div：
http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/
http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/
And the video that explains it: https://www.youtube.com/watch?v=R1ArAee6wEQ
以及解释它的视频：https: //www.youtube.com/watch?v=R1ArAee6wEQ
I'm using this on a daily basis. I hope it helps ;)
我每天都在使用它。我希望它有帮助;)
