Today we had a very good lesson on the correct way to style and set up good looking tables. Just as a quick recap, I’ll post highlights from the html and css here, as well as the original audio from the training session (40ish minutes).
Here is an example of a table well thought out and coded correctly. Notice the use of classes to facilitate the css in controlling the visual flow of the table.
| Column 1 | Column 2 | Column 3 | Column 4 |
|---|---|---|---|
| Value 1 | Value 2 | Value 3 | Value 4 |
| Value 1 | Value 2 | Value 3 | Value 4 |
| Value 1 | Value 2 | Value 3 | Value 4 |
| Value 1 | Value 2 | Value 3 | Value 4 |
| Value 1 | Value 2 | Value 3 | Value 4 |
Also note, that WordPress absolutly destroys any layout and aligns everything to the left (argh!) Anyway, pressing on, here is a From Table, again well thought out and designed correctly.
| Name: | |
| City: | |
| State: | |
| Zip Code: |
Now if you find yourself wishing you could see the original files, well you can. Simply grab them from here. Also, if you happen to have your “Bulletproof Web Design” by Dan Cederholm handy you can flip to page 153 and start reading there. I’d also post some css, but the post is getting rather lengthy as is so just grab the zip file to see the fully stylesheet.
And now the part you’ve been waiting for …
The audio from the training.