你可以不使用表来做这个HTML布局吗？ [英] Can you do this HTML layout without using tables?

查看：92
本文介绍了你可以不使用表来做这个HTML布局吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

好的，我在一两个星期前有一个简单的布局问题。也就是说，页面的各个部分需要一个标题：

  + --------- ------------------------------------------------ + 
 |标题按钮| 
 + --------------------------------------------- ------------ +

很简单的东西。事情是表仇恨似乎已经在网络世界接管，我被提醒，当我问为什么使用HTML表单而不是表格的定义列表（DL，DD，DT）标签？现在表格的一般主题vs divs / CSS之前已经讨论过，例如：





因此，这不是一个关于CSS vs表布局的一般性讨论。这只是解决一个问题的办法。我尝试了使用CSS的各种解决方案，包括：




  • 向右移动按钮或包含按钮的div;

  • 相对于按钮的位置;和

  • 相对位置和绝对位置。



例如，相对定位导致z-index问题，其中我的下拉菜单出现在内容下。



所以我最后回到：

 < style type =text / css> 
 .group-header {background-color：yellow;宽度：100％; } 
 .group-header td {padding：8px; } 
 .group-title {text-align：left; font-weight：bold; } 
 .group-buttons {text-align：right; } 
< / style> 
< table class =group-header> 
< tr> 
< td class =group-title>标题< / td> 
< td class =group-buttons>< input type =buttonname =Button>< / td> 
< / tr> 
< / table>

它很简单，作为向后兼容性，它得到（这将工作，甚至在IE5），它只是工作。



因此，任何人都可以在没有表格的情况下执行相同的操作？



：




  • 向后兼容到FF2和IE6;

  • ： ：不同浏览器之间的和

  • 灵活：可以精确控制定位（填充和/或边距）和样式。



在旁注中，我今天遇到了一些有趣的文章：





编辑：让我详细说明浮点问题。这类作品：

 < html& 
< head> 
< title>布局< / title> 
< style type =text / css> 
 .group-header，.group-content {width：500px; margin：0 auto; } 
 .group-header {border：1px solid red;背景：黄色; overflow：hidden; } 
 .group-content {border：1px solid black;背景：#DDD; } 
 .group-title {float：left; padding：8px; } 
 .group-buttons {float：right; padding：8px; } 
< / style> 
< / head> 
< body> 
< div class =group-header> 
< div class =group-title>这是我的标题< / div> 
< div class =group-buttons>< input type =buttonvalue =Collapse>< / div> 
< / div> 
< div class =group-content> 
< p>它工作完美。它很简单，作为向后兼容性，它得到（这将工作，甚至在IE5），它只是工作。没有定位或漂浮的东西。< / p> 
< p>因此，任何人都可以执行相同的操作，而没有向后兼容至少FF2和IE6的表格。< / p> 
< p>在旁注中，我今天遇到了一些有趣的文章：< / p> 
< / div> 
< / body> 
< / html>

感谢 Ant P 为 overflow：hidden 部分（仍然没有得到为什么）。这里是问题的来源。说我想要标题和按钮垂直居中。这是有问题的，因为元件具有不同的高度。与此比较：

 < html& 
< head> 
< title>布局< / title> 
< style type =text / css> 
 .group-header，.group-content {width：500px; margin：0 auto; } 
 .group-header {border：1px solid red;背景：黄色; overflow：hidden; } 
 .group-content {border：1px solid black;背景：#DDD; } 
 .group-header td {vertical-align：middle; } 
 .group-title {padding：8px; } 
 .group-buttons {text-align：right; } 
< / style> 
< / head> 
< body> 
< table class =group-header> 
< tr> 
< td class =group-title>这是我的标题< / td> 
< td class =group-buttons>< input type =buttonvalue =折叠>< / td> 
< / tr> 
< / table> 
< div class =group-content> 
< p>它工作完美。它很简单，作为向后兼容性，它得到（这将工作，甚至在IE5），它只是工作。没有定位或漂浮的东西。< / p> 
< p>因此，任何人都可以执行相同的操作，而没有向后兼容至少FF2和IE6的表格。< / p> 
< p>在旁注中，我今天遇到了一些有趣的文章：< / p> 
< / div> 
< / body> 
< / html>

完美。

方案

使用可用于快​​速正确地完成工作的工具没有问题。





我认为应该避免嵌套的表，事情可能会弄乱。


Ok, I had a simple layout problem a week or two ago. Namely sections of a page needed a header:

+---------------------------------------------------------+
| Title                                            Button |
+---------------------------------------------------------+

Pretty simple stuff. Thing is table hatred seems to have taken over in the Web world, which I was reminded of when I asked Why use definition lists (DL,DD,DT) tags for HTML forms instead of tables? Now the general topic of tables vs divs/CSS has previously been discussed, for example:

So this isn't intended to be a general discussion about CSS vs tables for layout. This is simply the solution to one problem. I tried various solutions to the above using CSS including:

  • Float right for the button or a div containing the button;
  • Position relative for the button; and
  • Position relative+absolute.

None of these solutions were satisfactory for different reasons. For example the relative positioning resulted in a z-index issue where my dropdown menu appeared under the content.

So I ended up going back to:

<style type="text/css">
.group-header { background-color: yellow; width: 100%; }
.group-header td { padding: 8px; }
.group-title { text-align: left; font-weight: bold; }
.group-buttons { text-align: right; }
</style>
<table class="group-header">
<tr>
  <td class="group-title">Title</td>
  <td class="group-buttons"><input type="button" name="Button"></td>
</tr>
</table>

And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.

So can anyone do the equivalent without tables?

The requirements are:

  • Backwards compatible: to FF2 and IE6;
  • Reasonably consistent: across different browsers;
  • Vertically centered: the button and title are of different heights; and
  • Flexible: allow reasonably precise control over positioning (padding and/or margin) and styling.

On a side note, I came across a couple of interesting articles today:

EDIT: Let me elaborate on the float issue. This sort of works:

<html>
  <head>
    <title>Layout</title>
    <style type="text/css">
      .group-header, .group-content { width: 500px; margin: 0 auto; }
      .group-header { border: 1px solid red; background: yellow; overflow: hidden; }
      .group-content { border: 1px solid black; background: #DDD; }
      .group-title { float: left; padding: 8px; }
      .group-buttons { float: right; padding: 8px; }
    </style>
  </head>
  <body>
    <div class="group-header">
      <div class="group-title">This is my title</div>
      <div class="group-buttons"><input type="button" value="Collapse"></div>
    </div>
    <div class="group-content">
      <p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
      <p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
      <p>On a side note, I came across a couple of interesting articles today:</p>
    </div>
  </body>
</html>

Thanks to Ant P for the overflow: hidden part (still don't get why though). Here's where the problem comes in. Say I want the title and button to be vertically centered. This is problematic because the elements are of different height. Compare this to:

<html>
  <head>
    <title>Layout</title>
    <style type="text/css">
      .group-header, .group-content { width: 500px; margin: 0 auto; }
      .group-header { border: 1px solid red; background: yellow; overflow: hidden; }
      .group-content { border: 1px solid black; background: #DDD; }
      .group-header td { vertical-align: middle; }
      .group-title { padding: 8px; }
      .group-buttons { text-align: right; }
    </style>
  </head>
  <body>
    <table class="group-header">
    <tr>
      <td class="group-title">This is my title</td>
      <td class="group-buttons"><input type="button" value="Collapse"></td>
    </tr>
    </table>
    <div class="group-content">
      <p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
      <p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
      <p>On a side note, I came across a couple of interesting articles today:</p>
    </div>
  </body>
</html>

which works perfectly.

解决方案

There is nothing wrong with using the tools that are available to you to do the job quickly and correctly.

In this case a table worked perfectly.

I personally would have used a table for this.

I think nested tables should be avoided, things can get messy.

这篇关于你可以不使用表来做这个HTML布局吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆