你可以用HTML表格绘制的东西 [英] Things you can draw with HTML tables

查看：100
本文介绍了你可以用HTML表格绘制的东西的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

因此，我正在观看Google的Marissa Mayer 谈论关于加速Google的页面。他们发现，购物车图标将加载时间增加了2％，用户的搜索量减少了2％。他们设法用HTML表替换图标。



这是我在绘制购物车时的尝试：（现场示例页面） 

 < 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> 
 <！ - 这一行只是为了看到对齐 - > 
< 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> 
< / tr> 
 
<！ - 句柄 - > 
< 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> 
 
<！ - 主体 - > 
< 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>

什么可以 在表格中绘制？给我们留下印象。

解决方案

哦，是的，你认为你可以在HTML中绘制？ ;-)

http://www.youtube.com/watch?v=FpRcbVXnrds



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



（嗯，这不是我的，但它仍然令人惊讶。）


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.

解决方案

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.)

这篇关于你可以用HTML表格绘制的东西的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆