Forum Moderators: not2easy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title>
Weird Table Behavior
</title>
<style type="text/css">
body { background: #E8ECF6; }
#mainContent { background-color: #fff; }
td { padding: 0 2em; }
</style>
</head>
<body>
<div id="mainContent">
<form action="" method="post">
<fieldset>
<legend>Why am I so strange?</legend>
<table cellspacing="0">
<thead>
<tr>
<th>Enabled</th>
<th>Some Really Long Text</th>
<th>Some Really Long Text</th>
<th>Some Really Long Text</th>
<th>Some Really Long Text</th>
<th>Some Really Long Text</th>
</tr>
</thead>
<tbody>
<tr>
<td>checkbox</td>
<td>1234.12345678.12345-678901234567</td>
<td>1234.12345678.12345</td>
<td>Running</td>
<td>123412345678</td>
<td>Unknown Happenings</td>
</tr>
</tbody>
</table>
</fieldset>
</form>
</div>
</body>
</html>
This is a classic issue. <div> tags react to their context, while <table> tags react to their content.
A <table> will always resize to adapt to its content, even if the content is over the allocated size for the <table>.
A <div> will react to its content only as long as it's relationship to its context isn't broken.
I use <table> tags whenever I am designing a site in which I have no control over the content (like CMS/Wiki), and I am allowing the content authors to do whatever they want. <div> tags are better for sites in which the content is more predictable.
If you make the container a <table>, the overflow will stop.
A <table> will always resize to adapt to its content, even if the content is over the allocated size for the <table>.A <div> will react to its content only as long as it's relationship to its context isn't broken.
I guess my question is why? That is, what rules govern this in the HTML spec? And can I somehow use CSS or JavaScript to correct this?
Thanks.
<div> tags are meant to allow a page layout with exact control, and <table> tags are meant to display data.
In a <div> tag, the priority is page layout, regardless of content, and in a <table>, content is king.
This is the chief reason for all the wars between the Zeldmanites and the Tablelites. The Zeldmanites believe that the principal goal is predictable, exact control of the page layout, which is what <div> tags are perfectly designed to do. The Tablelites believe that content is king, so they use <tables>.
They are both right, but the rub is in the application. There are times when you need one or the other of the priorities.
For example, in most blogs and eZines, a good layout is very important. The content is carefully controlled, and is an integral part of the entire page presentation. You may have paid a designer to craft a complete user experience, so the layout and appearance is critical.
However, in a wiki, you are inviting the users themselves to contribute data, and you can't expect them to craft to your appearance. Also, the entire purpose of a wiki is to gather and present data. The content is far, FAR more important than the layout.
When I set up our local intranet wiki, one of the first things I did was rip out all the <div> tags, and replace them with <table> tags, because our engineers and researchers were publishing stuff that overflowed the layout. It would have been ridiculous for me to tell a PhD researcher to format their White Balance Coefficient tables into neat little rows that fit my layout. If they create a <table> that requires horizontal scrolling, then so be it.
There is an XHTML way to fix it: Use a <table>. Otherwise, you need to govern your content to prevent overflows.
I believe that you can assign minwidth attributes to <div> tags, which will keep them from getting smaller than a certain width. However, there's no rule that says the content can't expand beyond that.
<div> tags are meant to allow a page layout with exact control, and <table> tags are meant to display data.
Well, not exactly. <div> are generic block level containers used for grouping... they have no semantic meaning by themselves. They are commonly used in page layouts, but it's not technically correct to say they're "meant" for that.
The spec says [w3.org]:
"These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content."
In a <div> tag, the priority is page layout, regardless of content, and in a <table>, content is king.
...
I don't want to comment on this section because it's really a separate discussion. I think you're missing my point.
There is an XHTML way to fix it: Use a <table>. Otherwise, you need to govern your content to prevent overflows.
My question is where is the <div>'s boundaries being defined? That is, why is the table overflowing? I'm looking for the actual specification rules that say why the content is overflowing, as I suspect there is probably a style rule of some kind that can be set to prevent it. I know I can give the div a style of overflow:auto; and a scrollbar will appear when needed. This might be all I need, but I'd still like to know where the div's block-level boundaries are defined.
I think you're missing my point.
I certainly apologize if I was being overbearing; that wasn't my goal. This is just one of the things that really gets my goat. People seem to have huge barrels of Kool-Aid out on this subject. I'm just interested in making sites that work, which pisses off everybody.
And, yes, now I see what you wanted, and yes, I did miss the point. You wanted the empirical "why," not the rhetorical "why."
I really think that it may also come down to what browsers implement as defaults. For example, on one of my sites, I use <div> tags to lay out a structured page. I noticed that, for my site, FF Windows renders the <div> as overflow:scroll, while on Mac, the same page is rendered overflow:visual. I don't define overflow in either one, but it only happens in my editing screen. I suspect that some other CSS property I'm tweaking does this. CSS ain't so "simple," as the definition says [w3.org]. In fact, it is often way more challenging than my work with C++, PHP, Python, Perl, etc.
Also, I may be able to set my div to have display:table to achieve the effect I'm looking for as well:
http://www.w3.org/TR/CSS21/visuren.html#display-prop [w3.org]
That solution is very interesting. The only issue is that, if it works (I'd have to test it on a raft of browsers before greenlighting it), it would completely invalidate most of the reasons for using <div> tags over <table> tags.
I like to use <div> tags on sites where the container/display has a lot of flexibility, or one that I want to "skin" with CSS. I assume the content will cleave to my site's design, and someone with a cellphone can see the site as easily as someone with a 30-inch monitor.
As I said, I use <table> tags for sites where the content must be displayed properly, no matter what the display/container will accept.
Why would I want to make a <div> tag behave exactly like a <table> tag? It looks like a fair bit of work, and may introduce browser issues.
I'd say that, for the rare instances when a <table> may not work out, I'd be better off modifying the behavior of the <table> tag, instead of forcing the great majority of users to have to bend a <div>.
Basic Ockham's Razor: If 95% of my users will be hitting the site with 17-inch or larger monitors, then I'm better off using a <table>, and I can warp it with a media="handheld" file for the bitsy screens.
Why would I want to make a <div> tag behave exactly like a <table> tag? It looks like a fair bit of work, and may introduce browser issues.
It's really not that much work at all. All it does is force the div to shrink-wrap the contents instead of allowing the contents to overflow.
Unfortunately, the shrink-wrap effect isn't quite what I wanted either (the content will not be wide enough in some cases).
But thanks for your comments. I appreciate the input.
I appreciate the input.
And I appreciate yours. This has become a valuable community to me. I learn a lot from it on a daily basis from experienced members such as yourself.
