Những thứ bạn có thể vẽ bằng các bảng HTML

Vì vậy, tôi đã xem một số talk của Marissa Mayer của Google về việc tăng tốc các trang của Google. Họ nhận thấy rằng biểu tượng giỏ hàng tăng thời gian tải lên 2% và người dùng sau đó tìm kiếm ít hơn 2%. Họ đã quản lý để thay thế biểu tượng bằng một bảng HTML.Những thứ bạn có thể vẽ bằng các bảng HTML

Đây là nỗ lực của tôi lúc vẽ một giỏ mua hàng: (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>

gì có thể bạn vẽ trong bảng ?! Gây ấn tượng với chúng tôi.

Nguồn

2010-04-10 Amy B

Đó là không thực sự lập trình có liên quan. – zneak

Đây thực sự là một câu hỏi? –

@zneak, @matti - đúng vậy! –

Oh yeah, vì vậy bạn nghĩ bạn có thể vẽ bằng HTML? ;-)
http://www.youtube.com/watch?v=FpRcbVXnrds

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

(Vâng, đó không phải là tôi, nhưng nó vẫn còn đáng kinh ngạc.)

Nguồn

2010-04-11 00:55:34 deceze

+1 Bất ngờ Touhou –

Tôi đã vẽ this cho this question vì tôi đã mệt mỏi (họ muốn "HTML", vì vậy tôi giả định rằng có nghĩa là thuần túy HTML). Và đó là giới hạn của kỹ năng vẽ bảng của tôi.

Nguồn

2010-04-11 00:03:30

'' - haha –

Ồ, quá lười để chống bí danh. :) – MusiGenesis

từ http://www.reddit.com/r/pics/comments/az3yp/nsfw/c0k56l2

Nguồn

2010-04-11 00:50:44 Vince

Nó bị cắt. Liên kết đến nguồn? –

được cập nhật ......... – Vince

alt text http://www.freeimagehosting.net/uploads/36dcc03919.jpg

nguồn HTML here (cảnh báo: 227K giải nén tập tin HTML 6MB mà trình duyệt của bạn sẽ ghét).

Nguồn