breaking tables with text

when content is king

page 1 of 1

• page 1
  • table with long word
  • soft hypen

table with long word

I've made a simple table, 300 pixels wide with each cell set at a width of 50 percent. Both browsers will display the table with identically-sized cells. But, if the text inside grows to large, the table with break. Below we see the code for the table and the table's contents.

<table width="300" border=1 
	cellpadding=0 cellspacing=0>
<tr>
<td width="50%" align="center">
oneextremelylongandtiresomewordinthiscell
</td>
<td width="50%" align="center">
howdy
</td>
</tr>
</table>

In IE5.0, NN4.7, and NN6.0 we get the same results.

we see in NN4.7 NN6.0 IE5.0

You can see that the really long word drove the table cell past its original size to something unpredictable. There is a solution for this in IE5.0 and NN6.0. This solution will not work in NN4.7

soft hypen

There is an entity, a keyword if you will, in HTML call a soft or shy hypen. This hypen is similar to ones that word processors use. Entities should be no surprise to anyone who has used the non-breaking (or no break) space entity in design ( ).

Without getting to deep into what are entities, it's enough to say that some entities function as sorts of control characters, other entities as ways to make symbols. If you want a trademark symbol on your page, you could use a graphic but a better choice would be an entity. If you wanted to represent the less-than symbol (<) you would use an entity. Using the actual symbol you have on your keyboard would confuse a browser since the less-than symbol is used in HTML to start tags.

All entities are composed of three elements. They start with an ampersand (&), they have a word like nbsp, or shy, or amp, and they end in a semi-colon. The entity for the soft hypen is &shy;.

We insert this soft hypen into the long word at various points that we are willing to break the word across a line. If the word runs out of space in the cell, the invisible soft hypen will appear and the word will break across two lines of text.

Below is the word filled with soft hypens at various strategic points. I've broken the example word across a couple of lines for clarity, but this is unnecessary to do in code.

one­extremely­
long­and­tiresome­
word­in­this­cell

we see in IE5.0 and NN6.0:

NN4.7 will not respond to the soft hypen. I've even replaced the entity with it numeric representation (which is a more reliable way to ensure an entity will work across various browsers). It's really a shame, because the only way to handle this long word / cell width problem is to anticipate and fix the problem at a certain cell width and font pixel size and then nail the design down by using fixed-width tables and fonts set by pixel size.