Menu
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.
692
The HTML table is used for arranging data (such as text, images, links etc.) into the tabular design — basically, rows and columns.
It's not bad to use an HTML table for tabular data. In fact you should use an HTML table when your content is a table, absolutely. What you should not do is misuse HTML table elements and pretend that you're making a table when you're not.
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.)
199
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.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
