问题
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
(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:
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:
- UK Flag
- Switchable Lamp
来源：https://stackoverflow.com/questions/2615481/things-you-can-draw-with-html-tables