|
Welcome to Flo's Table Playground. This is not a tutorial, but offers examples for inspiration. There are many ways to make tables into interesting art pieces. Flo hopes to collect more ways and ideas from time to time, so please check back once in a while. |
~ BORDERS & NESTING ~ |
|---|
The Border attribute can be set to 0 or to any width from 1 to whatever. Borders can become decorative elements in table art. This is especially true when tables are nested. Please consult the following pages for inspiration:
- Nested Tables with Borders
- Table with Very Wide Border
- Four Nested Tables with Wide Borders
To see other table border effects,
go to Flo's Border Playground |
~ IMAGE BORDERS ~ |
|---|
Many kinds of images can be used as table backgrounds. When you add a border attribute of at least 10 pixels wide, the image background then becomes the decorative border. Nest another table or 2 inside the one with the image border-background. Use different images as the background of the inner tables plus the border attribute. If you keep nesting tables this way, you can get some very fancy border effects. Take a peek at this page. |
~ CELLSPACING & CELLPADDING ~ |
|---|
These two attributes can be used with or without the border. Please consult the following pages for comparison and inspiration:
- Nested Tables with Cellspacing
- Nested Tables with Cellpadding
- Nested Tables with Border, Cellpadding, Cellspacing
|
~ UNORDERED LISTS ~ |
|---|
Ever heard of Unordered Lists? If not, go to this page to learn what people usually do with Unordered or Bulleted Lists, as they are sometimes called. But these special list symbols can be used in table art! I've only begun to scratch the surface of what can be done here.
Codes used are these:
-
<ul type="disc"> - this is default, a raised solid circle
<ul type="circle"> - produces a raised donut shape
<ul type="square"> - produces a flat square. This square is larger in proportion to the disc and circle symbols.
For each list item tag (<li>), do the following:
<font size="?" color="#??????"><li>& nbsp;</li></font>
For that non-breaking spacer code between the 2 list item tags, delete the space between the & and the nbsp; so the code will work. If you leave this out, then you'll get a different effect.
If you put the <ul> before and the </ul> after each list item, you'll also get a different effect. Play with this and see.
|
~ RESIZING IMAGES~ |
|---|
Many people use images for backgrounds of tables, cells within tables, and even for whole webpages. But images rarely are the exact size we need. The solution is simple: just go to Image Magick to resize the image so it fits exactly the dimensions of the table, cell or screen size (544 pixels wide by 372 pixels high). Consult "Why Resize?" for further information.
|
~ TABLES & CELLS AS LINKS~ |
|---|
Here's how to make either a whole table into a hyper link, or how to use various cells inside a multi-celled table as links. Who needs icons or buttons when you can use a table?
|
|
~ FLO'S TABLE ART~ |
|---|
Believe it or not, tables can be used to make art! So if you want to see how I made art from tables, please see this page.
|
|
|
