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.
For a book with lots of CSS examples check out:
