Question

我正在重新编码包含类似于此图表的旧网站：

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

这个图表如何用纯HTML表示？我不喜欢把它作为一个图像包含在内。

我正在考虑一张桌子，只是用图片替换，或者可能用绝对定位的表格行覆盖，但我认为这可能有点脆弱。

欢迎任何建议。

Answer 1

图片有什么问题？

大多数情况下，当您在网络上看到图表信息时，会生成.jpg或.png。

让所有这些设计师出错吗？

使用表格和背景颜色绘制图表的任何尝试都不能被视障人士理解，并且很可能无法在无法处理图像的浏览器上正确呈现。

使用图片并使用带有真实英文描述的“alt”文字“与竞争对手相比，ACME产品成本仅为49美元的图表：租赁公司4为51美元.......

Answer 2

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

或类似的东西。您可以使用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;
}

Answer 3

嗯，图表是一个图形元素，我假设您希望纯文本浏览器和搜索引擎（？）都可以访问数据：在这种情况下，使用<table>表示数据图表实际上是正确的。我知道很多人都害怕桌子，因为所有人都在谈论“无桌面”的设计。但是将表格用于表格数据就是表格的用途。

我会在图表图像下方（或上方，除此之外）放置一张表格，并显示表格中显示的数据。图表有利于可视化差异，而不是很好地看到实际值;因此，表格也是图形的一个很好的补充。

如果图表不是很复杂（如本示例所示），您还可以添加一个alt-text，其中包含图表的简明英文描述，如下所示：

<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" />

文本阅读器在以有意义的方式阅读本文时应该没有问题。

Answer 4

我似乎记得有关此主题的一些有用的帖子。您可能会发现最终从成本效益的角度来看，最简单的图像是最好的，但this article会告诉您有关使用html和css绘制条形图的所有想法。

巧合的是，在发布之后我昨天看了everyblock.com并注意到他们在html / css中有一个特别好的图表实现，值得一看。

Answer 5

您还可以考虑在HTML＆amp;然后使用Javascript生成表格：http://www.wait-till-i.com/2008/01/08/generating-charts-from-accessible-data-tables-using-the-google-charts-api/

但是对于像您提供的图像这样的图表 - 它只是一个营销图像而且值没有实际意义 - 那么只需要一个好的替代文字说明就可以了。

Answer 6

请参阅苹果到橘子网站上有关条形图CSS的精彩文章。

（编辑：这是 @Sam Murray-Sutton 上面发布的相同链接 - 抱歉）

图表的语义表示

6 个答案:

Price for two weeks

表型号：