-1

I need to layout a page, but I can't figure out how to do it without tables. I know it must be possible, but I can't think of a solution that isn't table-based that isn't incredibly rigid with fixed widths for everything.

Mockup: http://i.imgur.com/jSSDhIh.png

No matter what I do, it looks like I'm going to have commit a major sin. For example, the top set - it looks like I'm going to have either to:

  1. Create a table (the root of all evil, apparently)
  2. Hardcode widths and heights specifically for these elements. (either #id or style= or single-use classes, all three are also considered evil)

Is that the case? Is there a realistic way I can avoid those scenarios? Googling for answers just gets me a bunch of useless "TABLES ARE EVIL SO ARE CSS TABLES ALSO DON'T USE ID SELECTORS OR STYLE ATTRIBUTES EVERYTHING MUST BE A REUSABLE CLASS" with no actual useful information.

EDIT: I've already done this with CSS tables (display: table) and had it thrown back as unacceptable. I think it's fine because it works and it still looks good, but it's not my call.

4

3 回答 3

0

这是关于HTML 表格的链接——何时以及如何在 HTML 中使用表格， 这可能有助于您了解何时使用表格。

在您的模拟中，没有理由不使用表格。像 wordpress 后端使用表格作为表格，但以表格形式。

但如果你真的想在 div 上进行布局，我宁愿建议使用 css 网格框架。我个人使用zurb粉底。这是链接

于 2013-03-11T20:40:16.860 回答
0

我建议使用 Bootstrap，它为您提供了很多样式样式选项。（但是它可能会干扰您的 CSS 的其余部分。）

以下是两列表单的工作方式：

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">

<div class="row">

  <!-- right column -->
  <div class="span6">
    <label>Subject <input type="text"></label>
    <label>Category <select></select></label>
    <label><input type="radio"> Permanent Change</label>
    <label><input type="radio"> Temporary Change</label>
  </div>

  <!-- right column -->
  <div class="span6">
    <label>Requested Approval Date <input type="text"></label>
    Effective Dates <input type="text"> to <input type="text">
  </div>

</div>

显然，样式还有很多不足之处，但请查看http://twitter.github.com/bootstrap/base-css.html#forms看看你能做多少。你会想要调查的<form class="form-horizontal">。预先警告 CSS 很挑剔，你需要很多<div class="control-group">'s.

于 2013-03-11T22:46:26.437 回答
0

桌子并不邪恶。仅此 stackexchange 页面就有许多表格。有些人想使用 div 来使用网格创建行和跨度。我建议在它们看起来合适的地方使用表格。如果您真的想避免它，请考虑为 twitter 获取类似 bootstrap 之类的东西。 http://twitter.github.com/bootstrap/scaffolding.html#gridSystem 在那里，您可以使用他们的脚手架以您想要的方式排列项目，而无需使用表格。

于 2013-03-11T20:36:06.210 回答