TABLE using only CSS

The original of this document is located at...
<URI:http://css.nu/articles/table-in-css.html>

 Example of a 2 by 3 table layout 

"This example is basically the same as what we use on our main index page, except that the index page does not have the blue bordered "left floating" DIV elements, but instead puts the link text left aligned directly in the parent element."

  Code of the above table  

<DIV CLASS="base-layer">

<H4 CLASS="table-caption">This could be a TABLE Caption
</H4>

<DIV CLASS="table-row">

<DIV CLASS="left-container2">

<P CLASS="text">1 Abra Cadabra Abra Cadabra. 
<BR>abra<BR>abra to fill the 3 lines
</P>

</DIV>

<DIV CLASS="right-container2">

<P CLASS="text">2 Abra Cadabra Abra Cadabra Abra 
Cadabra Abra Cadabra Abra Cadabra Abra Cadabra Abra Cadabra. 
</P>

</DIV>

<DIV CLASS="space-line">
</DIV>

</DIV>

<DIV CLASS="table-row">

<DIV CLASS="left-container2">

<P CLASS="text">3 Abra Cadabra Abra Cadabra Abra Cadabra 
Abra Cadabra Abra Cadabra Abra Cadabra Abra Cadabra. 
</P>

</DIV>

<DIV CLASS="right-container2">

<P CLASS="text">4 Abra Cadabra Abra Cadabra. 
</P>

</DIV>

<DIV CLASS="space-line">
</DIV>

</DIV>

<DIV CLASS="table-row">

<DIV CLASS="left-container2">

<P CLASS="text">5 Abra Cadabra Abra Cadabra. 
</P>

</DIV>

<DIV CLASS="right-container2">

<P CLASS="text">6 Abra Cadabra Abra Cadabra Abra Cadabra
Abra Cadabra Abra Cadabra Abra Cadabra Abra Cadabra. 
</P>

</DIV>

<DIV CLASS="space-line">
</DIV>

</DIV>

<H4 CLASS="table-caption">Likewise something at the bottom
</H4>

</DIV>

  CSS of the above table  

<STYLE TYPE="text/css">
<!--
/* The specific style rules used to suggest rendering */
/* for the CSS table design example, starts here */

DIV.base-layer {
  background: none #cc9966; border: solid #333333 1px; 
  color: #000000; margin: 0.5em 12px 0.5em 12px; 
  padding: 0; text-align: center; width: auto;
}
DIV.table-row {
  background: none #ffffcc; border: solid #000000 1px; 
  color: #000000; margin-top: 0; margin-right: auto; 
  margin-bottom: 0; margin-left: auto;
  padding: 0; text-align: center; width: 96%;
}

/* Style rules for the 3 x 2 table example */

DIV.left-container2 {
  border: none; float: left; margin: 0; padding: 0; 
  width: 50%;
}

DIV.right-container2 {
  border: none; float: right; margin: 0; padding: 0; 
  width: 50%;
}
DIV.space-line {
  clear: both; margin: 0; padding: 0; width: auto;
}

/* Some rules for captions, headers and running text */

H4.table-caption {
  background: transparent; color: #3333cc; font-family: 
  sans-serif; font-size: 1em; font-style: italic; 
  font-weight: bold; margin: 0;
  padding: 0.3em; text-align: center; width: auto;
}
P.text {
  border: solid #3333cc 1px; margin: 0; 
  padding: 0.3em 0.3em 0 0.3em;
  font-style: normal; font-size: 1em; 
  text-align: center; text-indent: 0;
  width: auto;
}

/* End of layer specific style rule set */
-->
</STYLE>