TABLE

CSS: on using DIVs for TABLE style formatting

From Web Development Case Study: Upgrading Tables to Divs by Michael Rohde:

'It's hard to imagine that some web developers are still using table tags for web page layouts. But there are still some out there that do.'

Yes, it's extremely naughty to use TABLE for layout (as opposed to for tabular data, for which it is still highly recommended and well suited), but the reason a lot of people still use TABLE/TR/TD for layout is that it's quite easy - even if it uses a few more markup characters - and as the above article proves getting DIVs to act like TABLE, TR, TD takes quite a bit of CSS massaging.

And if you are dealing with a system like Drupal™, where the HTML filters for most input formats strip 'style' attributes "for security reasons" you have to resort to external CSS files completely to get DIVs to act like tables.

One way to address this is to create some special CSS declarations that serve only to emphasise a special formatting role:

.CENTER { text-align: center; }
 
.MIDDLE {vertical-align: middle; }
 
/* Special table forms, not supported by IE6, IE7 (only have tiny usage in 2014) */
 
.TABLE { display: table; }
 
.ROW { display: table-row; }
 
.CELL { display: table-cell; padding: 5px; }
 
.WIDE { width:100%; }
 
.WIDE-AUTO {
    margin-left: auto;
    margin-right: auto;
}
 
/* Some extra examples, not used here but handy */
 
.FLOAT-RIGHT { float:right; }
 
.FLOAT-LEFT { float:left; }
 
.CLEAR { clear: both; }
 
.INLINE { display:inline; }
 
.BLOCK { display:block; }

I find that CAPITALIZING them makes it clear that they are really only standins for layout control, as opposed to style classes with any deeper meaning or context.

You can then create, for example, tables with cell of linked images centered both across the page and vertically within cells thus:

<div class="CENTER TABLE WIDE-AUTO">
<div class="ROW">
<div class="CELL MIDDLE">
<a href="http://drupal.org"><img src="https://drupal.org/files/druplicon.small_.png"/></a></div>
<div class="CELL MIDDLE"><a href="https://association.drupal.org/"><img src="https://association.drupal.org/files/Drupal_Association_individual_thumbnail.png"/></a></div>
</div>
</div>

Which displays as:

One can in many cases skip the table-row DIV:

<div class="CENTER TABLE WIDE-AUTO">
<div class="CELL MIDDLE">
<a href="http://drupal.org"><img src="https://drupal.org/files/druplicon.small_.png"/></a></div>
<div class="CELL MIDDLE"><a href="https://association.drupal.org/"><img src="https://association.drupal.org/files/Drupal_Association_individual_thumbnail.png"/></a></div>
</div>

Which displays as:

It may save a few characters and be more "correct", but honestly having a <div class="ROW"> is hardly easier than using a TR. I provide lots of links to longer discussions (and arguments about it) below.


Make sure you also examine the very detailed examples under: CSS: horizontal and vertical centering that really works (yes, really)

Syndicate content
randomness