Things you can draw with HTML tables

Question

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.

If you're going to take this route, why not use HTML 5's `canvas` instead? — Charlie Salts, Apr 10 '10 at 23:55
Web devs go absolutely nuts if you try to use tables for page layouts. One can only imagine how they'd react if you used them fo RENDERING IMAGES!!!! — Pierreten, Apr 10 '10 at 23:55
@Pierreten - Google used this technique for years! (Until images sprites came along). @Charlie - Don't ruin the question :) — Amy B, Apr 10 '10 at 23:57
Seen Google's front page HTML lately? They'll happily throw out best practices if it cuts page load by 5-10x. — rjh, Apr 10 '10 at 23:57
This question can have more than one correct answer. Please mark community wiki. — BalusC, Apr 11 '10 at 04:28

score 6 · Accepted Answer · edited Apr 30 '19 at 18:23

6

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

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

edited Apr 30 '19 at 18:23

Zoe

27,060
21
118
148

answered Apr 11 '10 at 00:55

deceze

510,633
85
743
889

score 3 · Answer 2 · edited May 23 '17 at 11:53

3

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.

edited May 23 '17 at 11:53

Community

1
1

answered Apr 11 '10 at 00:03

Matti Virkkunen

63,558
9
127
159

3

` ` -- haha – Amy B Apr 11 '10 at 00:07
Wow, too lazy to anti-alias. :) – MusiGenesis Apr 11 '10 at 04:13

score 3 · Answer 3 · edited Apr 30 '19 at 18:22

3

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

edited Apr 30 '19 at 18:22

Zoe

27,060
21
118
148

answered Apr 11 '10 at 04:03

MusiGenesis

74,184
40
190
334

Yeah, there's a reason nobody does this. :) – MusiGenesis Apr 11 '10 at 12:05
My browser didn't have any issues. (Until I tried testing how well it scaled, at least) – David Antaramian Apr 11 '10 at 13:58
Only incremented the size by one (using Control/Option +) on Firefox 3.6.3. MacBook Air 2.13 Intel Core 2 Duo OS X 10.6.3 with 2GB memory. Firefox froze almost immediately attempting to redraw it, though there were background processes. – David Antaramian Apr 11 '10 at 22:27
1

I don't want to know how long it took to make this. Although it's beautiful, I must say. – waiwai933 Apr 11 '10 at 23:23
@waiwai933: I didn't make this by hand, and it sounds as good as it looks. :) – MusiGenesis Apr 12 '10 at 01:18

Vince · Answer 4 · 2010-04-11T01:03:12.823

1

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

edited Apr 11 '10 at 01:03

answered Apr 11 '10 at 00:50

Vince

617
8
18

It got cut off. Link to source? – Amy B Apr 11 '10 at 00:55

score 1 · Answer 5 · answered Apr 11 '10 at 04:48

1

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

answered Apr 11 '10 at 04:48

Kobi

135,331
41
252
292

Things you can draw with HTML tables

5 Answers5

Linked