CSS: Thin List Table

Author: MikeW    Date: 2016-06-05 19:14   

While working on another how to, I decided it would be nice to turn a list into a table. Here is the result.

CSS Thin List Table

Here are some sentences from the Gettysburg Addess to demonstrate the how the thin list table.

  • Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
  • Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure.
  • We are met on a great battle-field of that war.
  • We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live.
  • It is altogether fitting and proper that we should do this.

This effect is accomplished with only 4 lines of code. A <div> tag with the class set to ThinListTable. The class sets the width of the table. The rest of the CSS code puts a border around list items, sets a small margin, and a little padding for the text.

CSSThinListTable.html (Demo)

CSSThinListTable.html (Source)

   1:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2:  "http://www.w3.org/TR/html4/loose.dtd">
   3:<html>
   4:<head>
   5:  <title>CSS Thin List Table</title>
   6:  <style type="text/css">
   7:.ThinListTable { width:700px;}
   8:.ThinListTable ul{ list-style-type:none;}
   9:.ThinListTable li{ border:1px solid #736F6E; padding:4px; margin:2px;}
  10:.ThinListTable li:hover{ background:#EDEDED; }
  11:  </style>
  12:</head>
  13:<body>
  14:  <!-- Blue #BFD9FF -->
  15:  <h2>CSS Thin List Table</h2>
  16:  <p>This example page demonstrates how to convert a simple unordered list into a menu like button list</p>
  17:  
  18:  <h4>CSS Thin List Table</h4>
  19:  <p>Here are some sentences from the Gettysburg Addess to demonstrate the how the thin list table.</p>
  20:  <div class="ThinListTable">
  21:  <ul>
  22:    <li>Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.</li>
  23:    <li>Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure.</li>
  24:    <li>We are met on a great battle-field of that war.</li>
  25:    <li>We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live.</li>
  26:     <li>It is altogether fitting and proper that we should do this.</li> 
  27:  </ul>
  28:  </div>
  29:
  30:</body>
  31:</html>

For more information on what you can do with lists check out:
Listamatic