Can you do this HTML layout without using tables?

 

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:

  • DIV vs Table; and
  • Tables instead of DIVs.

    • 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:

  • Why CSS should not be used for layout; and
  • Tables vs CSS: CSS Trolls begone

    • 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.

    Just float left and right and set to clear both and you're done. No need for tables.

    Edit: I know that I got a lot of upvotes for this, and I believed I was right. But there are cases where you simply need to have tables. You can try doing everything with CSS and it will work in modern browsers, but if you wish to support older ones... Not to repeat myself, here the related stack overflow thread and rant on my blog.

    Edit2: Since older browsers are not that interesting anymore, I'm using Twitter bootstrap for new projects. It's great for most layout needs and does using CSS.

    This is kind of a trick question: it looks terribly simple until you get to

    Say I want the title and button to be vertically centered.

    I want to state for the record that yes, vertical centring is difficult in CSS. When people post, and it seems endless on SO, "can you do X in CSS" the answer is almost always "yes" and their whinging seems unjustified. In this case, yes, that one particular thing is hard.

    Someone should just edit the entire question down to "is vertical centring problematic in CSS?".

    链接地址: http://www.djcxy.com/p/2544.html

    上一篇: 为什么Bootstrap网格布局更适合HTML表格？

    下一篇: 你能不用表格来做这个HTML布局吗？