Things you can draw with HTML tables

Posted by Coronatus on Stack Overflow See other posts from Stack Overflow or by Coronatus
Published on 2010-04-10T23:49:13Z Indexed on 2010/04/10 23:53 UTC
Read the original article Hit count: 604

Filed under:
|
|
|

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.

© Stack Overflow or respective owner

Related posts about html

Related posts about html-table