Menu
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:
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:
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.
637
HTML tables were originally intended to be used for presenting tabular data, not for layout. The World Wide Web Consortium (W3C®) discourages use of tables for layout because they are striving for a web in which content and structure are completely separate from presentation.
The below table gives you the relation between a 'table' tag and the corresponding supported CSS property to represent the same element. So, when creating a table, all you need to do is, instead of the HTML 'table' tag, merely use the 'div' tag and add the corresponding CSS to display a table.
HyperText Markup Language (HTML) is the standard markup language used to create web pages. HTML allows table creation using the <table> tag. However, tables can also be created in HTML without using <table> tag with the help of Cascading Style Sheet (CSS).
The HTML5 specification states: "Tables should not be used as layout aids." This is because tables for layout are difficult for screen readers to differentiate, as previously mentioned.
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.
128
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
