Replace HTML Table with Divs
2020-04-30 16:01:46来源:博客园 阅读 ()
Replace HTML Table with Divs
https://stackoverflow.com/questions/702181/replace-html-table-with-divs
55Alright, 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
<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?
html css html-table share edited Sep 23 '16 at 20:50 Brian Tompsett - 汤莱恩 4,7741414 gold badges4242 silver badges113113 bronze badges asked Mar 31 '09 at 17:39 Jacob Adams 3,90633 gold badges2020 silver badges4141 bronze badges- 1 Here's a good read: <a href="alistapart.com/articles/prettyaccessibleforms">Prettier Accessible Forms</a>. – Chad Birch Mar 31 '09 at 17:41
- 25 The way you write the recommended best practice is NOT correct. The rule reads "You should not use tables FOR LAYOUT". It does not mean never to use tables. – bortzmeyer Apr 2 '09 at 9:04
- I must be having a brain fart...isn't a table a layout structure? What else can you use it for? – xr280xr Jun 22 '12 at 18:21
- 4 @xr280xr for organizing tabular data...? – wrongusername Jul 17 '12 at 6:44
- 1 @wrongusername Visually organizing tabular data right? I.E. controlling the positioning of the data so it's arranged in a tabular format. That's layout. I'm assuming "FOR LAYOUT" must mean the layout of an entire page. – xr280xr Jul 19 '12 at 18:31
6 Answers
ActiveOldestVotes 43This 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.
share edited Mar 30 '13 at 18:57 community wiki3 revs, 3 users 80%
partoa
- 4 Thanks, I get the idea. This is basically what I thought. However, it seems pretty ugly to have to hard code the column widths, especially into the style, which should be separated from the content. – Jacob Adams Mar 31 '09 at 19:10
- Addendum: I would suggest aligning the labels to the right, for better readability. – DisgruntledGoat Jul 4 '09 at 23:43
Please be aware that although tables are discouraged as a primary means of page layout, they still have their place. Tables can and should be used when and where appropriate and until some of the more popular browsers (ahem, IE, ahem) become more standards compliant, tables are sometimes the best route to a solution.
share answered Mar 31 '09 at 18:26 KOGI 3,78222 gold badges2121 silver badges3131 bronze badges- 9 Indeed. In this case, you want to display TABULAR data. So, using HTML tables is pefectly OK. – bortzmeyer Apr 2 '09 at 9:03
-
2
How do you implement
sometimes
? – Simon Forsberg Apr 18 '12 at 12:53 - I don't understand the question. – KOGI Apr 18 '12 at 17:10
- @KOGI "tables are sometimes the best route to a solution". How to know when it is the best route and when it isn't? – Simon Forsberg May 3 '12 at 12:08
- @Simon use tabels if you are displaying tabular data. Or if a browser like IE is just not cooperating and tables are the only way to make it work (should be rare nowadays) – KOGI May 3 '12 at 15:29
I looked all over for an easy solution and found this code that worked for me. The right
div is a third column which I left in for readability sake.
Here is the 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:
.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;
}
share
edited Dec 23 '13 at 10:10
NeutralTone
322 bronze badges
answered Sep 13 '12 at 12:40
Wavesailor
62588 silver badges1818 bronze badges
add a comment
4
You can create 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.
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.
share answered Mar 31 '09 at 18:56 bobince 475k9797 gold badges607607 silver badges791791 bronze badges add a comment 1Basically 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.css is a very popular css framework which can help you set up columns/widths.
share edited Mar 31 '09 at 17:53 answered Mar 31 '09 at 17:47 Ken Browning 26k66 gold badges5151 silver badges6666 bronze badges add a comment 1there is a very useful online tool for this, just automatically transform the table into 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
I'm using this on a daily basis. I hope it helps ;)
share原文链接:https://www.cnblogs.com/kungfupanda/p/12806465.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash