Title: HTML CSS: Broken Table?
Tags: html;css;yui
Question: I'm using YUI to reset the browser classes and then I'm bringing in a couple custom stylesheets... I've seen this happen a few times and I don't think that I've ever narrowed down the cause:
the table is pulling in images to make up the squared table with shadowing... but for some reason, it's broken...
Here is my CSS:
.tblSquare {
text-align: left;
border-collapse: collapse;
.tblSquare td.top {
background:url('/Content/Images/tblSquare_top.gif') repeat-x;
.tblSquare td.left {
background:url('/Content/Images/tblSquare_left.gif') repeat-y;
.tblSquare td.right {
background:url('/Content/Images/tblSquare_right.gif') repeat-y;
.tblSquare td.bottom {
background:url('/Content/Images/tblSquare_bottom.gif') repeat-x;
.tblSquare td.content {
background:#FFF;
vertical-align:top;
Comment: @dcolumbus please refer to: http://webdesign.about.com/od/tables/a/aa122605.htm

Comment: You ought to post your HTML and CSS; there could be multiple causes for this problem.

Comment: @dcolumbus are you trying to style a  element? I hope it's for tabular data; i fear for the worst.

Comment: @dcolumbus but is it for tabular data? If not, you're doing it wrong.

Comment: @zzzzBov, yes, this table has a class and some TD have classes.

Comment: @zzzzBov, yes... I cleanly use a combination of DIVs and Table when they're appropriate. In this case, I'm use a table to frame a block of content. To build this frame with a DIV structure is absolutely stupid.

Here is the accepted answer: I've come to the conclusion that this is not good practice. Always use DIVs when the content is not tabular data. No sense in trying to be clever... and in doing so, being extremely un-clever.

Here is another answer: It's hard to tell what's wrong without you posting your HTML or CSS, but this looks like a case of there being some whitespace (maybe an &amp;nbsp;) in the table which is forcing the height of the cell to be taller than the image it contains.
Comment for this answer: Can you post your HTML?  It's unclear how you've defined your table and its content.
Comment for this answer: No whitespace. This issue is somewhat of a fluke.

Here is another answer: https://developer.mozilla.org/en/Images%2c_Tables%2c_and_Mysterious_Gaps

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 3, 'CommentCount': 6, 'ContentLicense': 'CC BY-SA 2.5', 'CreationDate': '2010:00:11/09/10', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><css><yui>', 'Title': 'HTML CSS: Broken Table?', 'ViewCount': 497, 'id': 4138246, 'user_AboutMe': '', 'user_AccountId': 135166.0, 'user_DisplayName': 'dcolumbus', 'user_Reputation': 9396.0, 'user_Views': 956.0, 'user_id': 337806.0}}