[RbnJrg]

Originally Posted by bdub

What do you mean by optimization here?

"Pseudo tables" based on the property "display: inline-block" are ok if the table "rows" are not so many, as in this case, where you have only 6 "rows". If your tables are as in your example, then the code I posted is almost already optimized. The problems arise when the table has many rows; in that case, and since the property "display: inline-block" will avoid the split of the table, it's very very probable that you will have to deal with "fragmentations" (that is, blank spaces undesired). To avoid that, and to allow "splitting", you need a more elaborated, optimized xhtml code, for example:

  <div class="wrapper">
    <div class="column">
      <p>☊</p>
      <p>Y'AI 'NG'NGAH,</p>
      <p><i>YOG-SOTHOTH</i></p>
    </div>

    <div class="column">
      <p>☋</p>
      <p>OGTHROD AI'F</p>
      <p>GEB'L—EE'H</p>
    </div>

    <div class="column">
      <p>H'EE—L'GEB</p>
      <p>F'AI THRODOG</p>
      <p><i>UAAAH</i></p>
    </div>

    <div class="column">
      <p><i>YOG-SOTHOTH</i></p>
      <p>'NGAH'NG AI'Y</p>
      <p><i>ZHRO</i></p>
    </div>
  </div>

That "table" looks the same as the previous one, BUT in this case, the splitting between "rows" is allowed and no blank space is generated if, for example, the table is rendered at the end of a page. And the code would be even more optimized if the first division included only two rows instead of three, as in the above example.