random table code

[tirsden]

I was bored, and after moshing through several faulty design concepts (and finding a peculiar bug in html table coding) I came across the following table designs entirely by accident. Love that. So anyways, here's what I came up with and the code if you want to check it out / use it / modify it with your own colors and height/width settings. I may end up using this on a revamp of my current crappy website, but I dunno. Haven't thought that far ahead. It's not really what I was looking for...

Table 1:

	[ content ] [ content ] [ content ] [ content ]

Code for Table 1:

<table border=1>
 <tr>
  <td bgcolor=pink width=20 height=20></td>
  <td bgcolor=pink align=center>

  <table border=1 bgcolor=lightblue width=10 height=10>
   <tr>
    <td></td>
   </tr>
  </table>

  </td>
  <td bgcolor=pink width=20></td>
 </tr>
 <tr align=center>
  <td bgcolor=pink>

  <table border=1 bgcolor=lightblue width=10 height=10>
   <tr>
    <td></td>
   </tr>
  </table>

  </td>
  <td>



[ content ]
<br>[ content ]
<br>[ content ]
<br>[ content ]



  </td>
  <td bgcolor=pink align=center>

  <table border=1 bgcolor=lightblue width=10 height=10>
   <tr>
    <td></td>
   </tr>
  </table>

  </td>
 </tr>
 <tr align=center>
  <td bgcolor=pink height=20></td>
  <td bgcolor=pink>

  <table border=1 bgcolor=lightblue width=10 height=10>
   <tr>
    <td></td>
   </tr>
  </table>

  </td>
  <td bgcolor=pink></td>
 </tr>
</table>




Table 2:

	[ content ] [ content ] [ content ] [ content ]

Code for Table 2:

<table border=1>
 <tr>
  <td bgcolor=pink width=20 height=20 align=center>

  <table border=1 bgcolor=lightblue width=10 height=10>
   <tr>
    <td></td>
   </tr>
  </table>

  </td>
  <td bgcolor=pink></td>
  <td bgcolor=pink width=20 align=center>

  <table border=1 bgcolor=lightblue width=10 height=10>
   <tr>
    <td></td>
   </tr>
  </table>

  </td>
 </tr>
 <tr>
  <td bgcolor=pink></td>
  <td>



[ content ]
<br>[ content ]
<br>[ content ]
<br>[ content ]



  </td>
  <td bgcolor=pink></td>
 </tr>
 <tr>
  <td bgcolor=pink height=20 align=center>

  <table border=1 bgcolor=lightblue width=10 height=10>
   <tr>
    <td></td>
   </tr>
  </table>

  </td>
  <td bgcolor=pink></td>
  <td bgcolor=pink align=center>

  <table border=1 bgcolor=lightblue width=10 height=10>
   <tr>
    <td></td>
   </tr>
  </table>

  </td>
 </tr>
</table>




Table 3:

	[ content ] [ content ] [ content ] [ content ]

Code for Table 3:

<table border=1>
 <tr>
  <td bgcolor=pink width=20 height=20 align=center>

  <table border=1 bgcolor=lightblue width=10 height=10>
   <tr>
    <td></td>
   </tr>
  </table>

  </td>
  <td bgcolor=pink align=center>

  <table border=1 bgcolor=lightblue width=10 height=10>
   <tr>
    <td></td>
   </tr>
  </table>

  </td>
  <td bgcolor=pink width=20 align=center>

  <table border=1 bgcolor=lightblue width=10 height=10>
   <tr>
    <td></td>
   </tr>
  </table>

  </td>
 </tr>
 <tr>
  <td bgcolor=pink align=center>

  <table border=1 bgcolor=lightblue width=10 height=10>
   <tr>
    <td></td>
   </tr>
  </table>

  </td>
  <td>



[ content ]
<br>[ content ]
<br>[ content ]
<br>[ content ]



  </td>
  <td bgcolor=pink align=center>

  <table border=1 bgcolor=lightblue width=10 height=10>
   <tr>
    <td></td>
   </tr>
  </table>

  </td>
 </tr>
 <tr>
  <td bgcolor=pink height=20 align=center>

  <table border=1 bgcolor=lightblue width=10 height=10>
   <tr>
    <td></td>
   </tr>
  </table>

  </td>
  <td bgcolor=pink align=center>

  <table border=1 bgcolor=lightblue width=10 height=10>
   <tr>
    <td></td>
   </tr>
  </table>

  </td>
  <td bgcolor=pink align=center>

  <table border=1 bgcolor=lightblue width=10 height=10>
   <tr>
    <td></td>
   </tr>
  </table>

  </td>
 </tr>
</table>

Comments

[l-u-d-g-e.livejournal.com]

Cool! At first the light blue squares were solid. But after I clicked the link "Code for Table 1", they took on the appearance of hollow squares. (I'm using Firefox.)

innnteresting...

[tirsden.livejournal.com]

I should install Firefox again and see what my site looks like, since I used a modified version of one of the tables for it.

[l-u-d-g-e.livejournal.com]

I once used a table to make a crude progress bar. The % width was the percent complete.

that'd work!

[tirsden.livejournal.com]

Too bad it's not that easy in Flash... hmm... something I haven't messed with in aaaaaaaages.