|
|
|
|||
|
|
Killer Tables - Table Borders
Borders are basically ugly. Good design uses white space and - to use Edward Tufte's word - a minimum of "chart junk". Until everyone can get better control over table features, the creative individual should not be afraid to use features like COLSPAN and ROWSPAN. Examine the following examples. A Simple Beautiful Table with No Borders
<table border=0 cellspacing=0 cellpadding=0 width=150>
<tr>
<td><img width=75 height=75 border=0 SRC="images/redbox.gif"></td>
<td><img width=75 height=75 border=0 SRC="images/orangbox.gif"></td>
</tr>
<tr>
<td><img width=75 height=75 border=0 SRC="images/greenbox.gif"></td>
<td><img width=75 height=75 border=0 SRC="images/bluebox.gif"></td>
</tr>
</table> A Simple Beautiful Table Destroyed with Borders
<table border=1 cellspacing=0 cellpadding=0 width=150>
<tr>
<td><img width=75 height=75 border=0 SRC="images/redbox.gif"></td>
<td><img width=75 height=75 border=0 SRC="images/orangbox.gif"></td>
</tr>
<tr>
<td><img width=75 height=75 border=0 SRC="images/greenbox.gif"></td>
<td><img width=75 height=75 border=0 SRC="images/bluebox.gif"></td>
</tr>
</table> A Simple Beautiful Table with Attractive Custom Borders
<table border=0 cellspacing=0 cellpadding=0 width=158>
<tr>
<td rowspan=5><img width=3 height=158 border=0 SRC="../resources/dot_black.gif"></td>
<td colspan=3><img width=152 height=3 border=0 SRC="../resources/dot_black.gif"></td>
<td rowspan=5><img width=3 height=158 border=0 SRC="../resources/dot_black.gif"></td>
</tr>
<tr>
<td><img width=75 height=75 border=0 SRC="images/redbox.gif"></td>
<td rowspan=3><img width=2 height=152 border=0 SRC="../resources/dot_black.gif"></td>
<td><img width=75 height=75 border=0 SRC="images/orangbox.gif"></td>
</tr>
<tr>
<td colspan=3><img width=152 height=2 border=0 SRC="../resources/dot_black.gif"></td>
</tr>
<tr>
<td><img width=75 height=75 border=0 SRC="images/greenbox.gif"></td>
<td><img width=75 height=75 border=0 SRC="images/bluebox.gif"></td>
</tr>
<tr>
<td colspan=3><img width=152 height=3 border=0 SRC="../resources/dot_black.gif"></td>
</tr>
</table> Next: Table Alignment
|
|
|||||||||||||
Core | Top | Feedback
|
||||||||||||||||
|
|
||||||||||||||||
