Geek asks and answers

Semantic diagram representation

I am recoding an old site that contains a diagram like this:

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

How would this diagram be presented in pure HTML? I hate just including it as an image.

I think the table is simply replaced by an image, or maybe overlays on absolutely positioned rows of the table, but I think it can be a little fragile.

Any suggestions are welcome.

+3
source share
6 answers

What is wrong with the image?

In most cases, when you see map information on the Internet, it is generated .jpg or .png.

Is there something wrong with all the designers?

backgroud , , , .

"alt" . ", ACME, 49 : Rental Company 4 $51.......

+8
<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
:
, , , , , , .
, ( ) 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;
}

>
+3
 
, - , , , , (?): <table> , , . , , " ". .
( , ..) , , . ; .
( ), - , :
<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" />

.
+2
 
, . , , , - html css .
, , everyblock.com , html/css .
+1
 
. CSS Apples to Oranges.
(: , @Sam Murray-Sutton - )
0
 
More articles:

All Articles