7. Aranjament vizual (layout) tabelar cu CSS

Un exemplu de utilizare a proprietății 'display' pentru a reda conținutul în formă tabelară.

HTML

<section>
  <ol>
    <li>x</li>
    <li>o</li>
    <li>x</li>
  </ol>
</section>
<section>
  <ul>
    <li>x</li>
    <li>x</li>
    <li>o</li>
  </ul>
</section>
<section>
  <ul>
    <li>x</li>
    <li>x</li>
    <li>o</li>
  </ul>
</section>

CSS

* {
  background: white;
}
section {
  display: table;
  border: 1px solid gray;
  width: 100%;
}
ol, ul {
  display: table-row;
}
li {
  display: table-cell;
  width: 25%;
  text-align: center;
}
li:nth-child(odd) {
  background-color: #CFC;
}