可以用HTML表格绘制的内容

Question

可以用HTML表格绘制的内容

5

我正在观看一场由谷歌的Marissa Mayer主持的有关加速谷歌页面的演讲。他们发现购物车图标会增加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>
            <!-- 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>

你能在表格中画什么？！ 给我们留下深刻印象。

- Amy B

1

如果你要选择这条路，为什么不使用HTML 5的canvas呢？ - Charlie Salts

7

如果你尝试使用HTML表格来布局网页，Web开发人员会非常疯狂。如果你试图使用它们来呈现图片，他们会有何反应，我们只能想象！ - Pierreten

3

最近看过谷歌首页的HTML吗？如果可以将页面加载时间减少5-10倍，他们很高兴抛弃最佳实践。 - rjh

2

这个问题9天前就已经完美了。 - MusiGenesis

3

这个问题可能有多个正确答案，请标记为社区维基（community wiki）。 - BalusC

显示剩余2条评论

5个回答

3

我为这个问题画了这张图，因为我很累（他们想要“HTML”，所以我认为那意味着纯 HTML）。这就是我的表格绘制技能的极限。

- Matti Virkkunen

3

-- 哈哈 - Amy B

哇，太懒了，不想抗锯齿。 :) - MusiGenesis

3

HTML源代码在这里（注意：227K解压到6MB的HTML文件，可能会使您的浏览器无法承受）。

- MusiGenesis

是的，没有人这样做的原因。 :) - MusiGenesis

我的浏览器没有任何问题。（至少在我尝试测试它的缩放能力之前是这样的） - David Antaramian

仅在Firefox 3.6.3上使用Control/Option +将大小增加了一个。MacBook Air 2.13 Intel Core 2 Duo OS X 10.6.3，内存为2GB。尝试重新绘制时，Firefox几乎立即冻结，尽管有后台进程。 - David Antaramian

1

我不想知道制作这个花费了多长时间。虽然它很漂亮，我必须承认。 - waiwai933

@waiwai933：我不是手工制作的，但听起来和看起来一样好。 :) - MusiGenesis

1

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

- Vince

它被截断了。有源链接吗？ - Amy B

1

通过使用不同大小和颜色的边框，您可以创建对角线，并避免像素化的外观：

- Kobi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- deceze · Accepted Answer

哦，你觉得你能在HTML中绘画吗？;-)
http://www.youtube.com/watch?v=FpRcbVXnrds

(好吧，不是我画的，但仍然很惊人。)