Things you can draw with HTML tables

So I was watching a talk by Google's Marissa Mayer about speeding up Google's pages. They found that a shopping cart icon increased load time by 2%, and users then searched 2% less. They managed to replace the icon with an HTML table.

Here is my attempt at drawing a shopping cart: (live example page)

<html>
    <head>
        <style>
            table   {border-collapse: collapse;}
            th, td  {width: 8px; height: 8px;}
            th  {background-color: blue;}
            td  {background-color: white;}
        </style>
    </head>

    <body>
        <table>
            <!-- this row is just to see alignment -->
            <tr>
                <td></td><td></td><td></td><td></td><td></td>
                <td></td><td></td><td></td><td></td><td></td>
                <td></td><td></td><td></td><td></td><td></td>
                <td></td><td></td><td></td><td></td><td></td>
            </tr>

            <!-- handle -->
            <tr>
                <td colspan="14"></td>
                <th colspan="3"></th>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td colspan="13"></td>
                <th colspan="2"></th>
                <td colspan="1"></td>
                <th colspan="2"></th>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td colspan="13"></td>
                <th colspan="2"></th>
                <td colspan="1"></td>
                <th colspan="2"></th>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td colspan="14"></td>
                <th colspan="3"></th>
                <td colspan="3"></td>
            </tr>

            <!-- main body -->
            <tr>
                <td colspan="5"></td>
                <th colspan="13"></th>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td colspan="5"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td colspan="5"></td>
                <th colspan="1"></th>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <th colspan="1"></th>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td colspan="5"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td colspan="5"></td>
                <th colspan="1"></th>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <th colspan="1"></th>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td colspan="5"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td colspan="5"></td>
                <th colspan="1"></th>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <th colspan="1"></th>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td colspan="5"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td colspan="5"></td>
                <th colspan="1"></th>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <td colspan="1"></td>
                <th colspan="1"></th>
                <th colspan="1"></th>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td colspan="5"></td>
                <th colspan="13"></th>
                <td colspan="2"></td>
            </tr>

            <!-- wheels -->
            <tr>
                <td colspan="7"></td>
                <th colspan="2"></th>
                <td colspan="4"></td>
                <th colspan="2"></th>
                <td colspan="5"></td>
            </tr>
            <tr>
                <td colspan="6"></td>
                <th colspan="4"></th>
                <td colspan="2"></td>
                <th colspan="4"></th>
                <td colspan="4"></td>
            </tr>
            <tr>
                <td colspan="7"></td>
                <th colspan="2"></th>
                <td colspan="4"></td>
                <th colspan="2"></th>
                <td colspan="5"></td>
            </tr>
        </table>
    </body>
</html>

What can you draw in tables?! Impress us.

回答1:

Oh yeah, so you think you can draw in HTML? ;-)
http://www.youtube.com/watch?v=FpRcbVXnrds

WTF http://img.skitch.com/20100411-dun3ip59xx5j7pcws3cp86xi54.png

(Well, it wasn't me, but it's still astonishing.)

回答2:

I drew this for this question because I was tired (they wanted "HTML", so I assumed that means pure HTML). And that's the limit of my table-drawing skills.

回答3:

alt text http://www.freeimagehosting.net/uploads/36dcc03919.jpg

HTML source here (warning: 227K unzips to 6MB HTML file that your browser will hate).

回答4:

from http://www.reddit.com/r/pics/comments/az3yp/nsfw/c0k56l2

回答5:

Using borders in different sizes and colors you can create diagonal lines, and avoid the pixely look: