語義表示

我重新編寫，其中包含一個類似的圖表的舊網站：語義表示

alt text http://dl.getdropbox.com/u/240752/rental-chart.gif

這將如何用圖表純HTML來表示？我討厭把它作爲一個圖像。

我正在考慮一個表格，只是用一個圖像替換，或者可能覆蓋絕對定位的表格行，但我認爲這可能有點脆弱。

歡迎任何建議。

來源

2008-11-25 Chris J Allen

圖像有什麼問題？

大多數情況下，當您在Web上看到圖表信息時，它會生成一個.jpg或.png。

讓所有這些設計師出錯了嗎？

任何使用表格和背景顏色繪製圖表的嘗試都不會被視覺障礙人理解，並且很可能無法在無法處理圖像的瀏覽器上正確顯示。

使用的圖像，並有一個真正的英文說明「顯示ACME的產品成本只有49 $與競爭對手相比，圖的「ALT」文本：在$ 51 .......

來源

2008-11-25 09:53:16

我同意，這可能會制定出最適合所有用戶。 – Liam 2008-11-25 09:56:43

IMG在這裏是正確的答案，如果我能夠通過提供原始數字來支持這一點。使用高精度數據並傳達圖表傳達的所有信息，CSS解決方案將容易出錯並且丟失，更不用說這些條是* not * semantically div – annakata 2008-11-25 10:10:35

<div class="chart"> 
<h3>Price for two weeks</h3> 
<div class="companies"> 
    <div class="company_scale"></div> 
    <div class="company1"> 
    <span class="name">Company 1</span><span class="cost"> $78</span> 
    </div> 
    <div class="company2"> 
    <span class="name">Company 2</span><span class="cost"> $74</span> 
    </div> 
    <div class="company3"> 
    <span class="name">Company 3</span><span class="cost"> $60</span> 
    </div> 
    <div class="company4"> 
    <span class="name">Company 4</span><span class="cost"> $55</span> 
    </div> 
    <div class="acme"> 
    <span class="name">Acme Product</span><span class="cost"> $49.95</span> 
    </div> 
</div> 
</div>

租賃公司4

或類似的東西你會用CSS指定寬度，並用css隱藏「成本」分類跨度

我很想使用定義列表，但是很難獲得層次關聯CSS。

這個標記的好處，當呈現的是沒有任何風格的數據，是它保留了大部分原有的意義：

Price for two weeks Company 1 $78 
Company 2 $74 
Company 3 $60 
Company 4 $55 
Acme Product $49.95

表型號：

我想我會至少嘗試使用表的Liams建議，實際上效果很好，只是爲了添加背景漸變和我們設置。

滾動至底部，看看它在行動（將到期相當快）http://www.webdevout.net/test?03

原創內容遵循

<div class="chart"> 
<h3>Price for two weeks</h3> 
<table class="companies"> 
    <thead> 
    <tr class="titles"> 
    <td>Company</td><td>Price</td> 
    </tr> 
    </thead> 
    <tbody> 
    <tr class="company1"> 
     <td class="name">Company 1</td> 
     <td class="cost">$78</td> 
    </tr> 
    <tr class="company2"> 
     <td class="name">Company 2</td> 
     <td class="cost">$74</td> 
    </tr> 
    <tr class="company3"> 
     <td class="name">Company 3</td> 
     <td class="cost">$60</td> 
    </tr> 
    <tr class="company4"> 
     <td class="name">Company 4</td> 
     <td class="cost">$55</td> 
    </tr> 
    <tr class="acme"> 
     <td class="name">Acme Product</td> 
     <td class="cost">$49.95</td> 
    </tr> 
    </tbody> 
    </table> 
</div>

div.chart 
{ 
    border: 1px solid #DDD; 
} 
div.chart table, 
div.chart tbody, 
div.chart thead, 
div.chart tr 
{ 
    display: block; 
} 
div.chart td 
{ 
    display: inline-block; 
    overflow-x: hidden; 
} 
div.chart { 
    padding: 10px; 
} 
div.chart td.cost, div.chart thead td { 
    display: none; 
} 

div.chart tbody tr td { 
    background-color: #999; 
    padding: 4px; 
    margin-top: 16px; 
    text-align: right; 
} 

div.chart tr.company1 td { 
    width:260px; 
} 
div.chart tr.company2 td { 
    width:246px; 
} 
div.chart tr.company3 td { 
    width:200px; 
} 
div.chart tr.company4 td { 
    width:183px; 
} 

div.chart tbody tr td.cost { 
    display: inline-block; 
    background-color: inherit; 
    color: #F00; 
    font-size: 80%; 
    width: 80px; 
} 
div.chart tr.acme td { 
    background-color: #99F; 
    width: 166px; 
} 
div.chart tbody tr.acme td.cost { 
    color: #000; 
    background-color: #FF9; 
}

來源

2008-11-25 10:03:56

好，圖表是一個圖形元素，我假設你想要的數據可供純文本瀏覽器和搜索引擎（？）訪問：在這種情況下，使用<table>作爲圖中顯示的數據實際上是正確。我知道很多人都害怕桌子，因爲所有人都在談論「無桌子」設計。但是使用表格來表格數據是表格的目的。

我會在表格圖像下方（或上方，除此之外）放置一張表格，並附上表格顯示的數據。一個圖表對於顯示差異很有好處，對於看到實際值並不太好。因此桌子也是圖形的一個很好的補充。

如果圖表是不是很複雜（如本示例），你也可以只添加一個ALT文字與圖表的純英文說明，像這樣：

<img alt="The price for two weeks is 80 dollars at rental company 1, 
73 dollars at ... The best service and price of 48 dollars 
you get at acme product, plus you can keep it for life" />

文本閱讀器應該有沒有問題以有意義的方式閱讀。

來源

2008-11-25 10:21:17

我似乎記得在這個問題上的一些有用的職位。您可能會發現，從成本收益的角度來看，最後一個簡單的圖像是最好的，但this article會告訴你所有你可能想知道的關於使用html和css繪製條形圖的知識。

巧合的是，在發佈之後，我昨天看了everyblock.com，發現他們在html/css中特別好地實現了圖表，值得一看。

來源

2008-11-25 14:22:46