Semantische Darstellung eines Diagramms

StackOverflow https://stackoverflow.com/questions/316837

  •  11-07-2019
  •  | 
  •  

Frage

Ich bin Umkodierung eine alte Website, die ein Diagramm ähnlich wie diese enthält:

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

Wie werden Sie diese Tabelle mit reinem HTML dargestellt werden? Ich verabscheue nur als Bild enthalten.

ich einen Tisch zu denken, nur mit einem Bild ersetzt, oder vielleicht mit absolut positionierten Tabellenzeilen überlagern, aber ich denke, dass ein bisschen zerbrechlich sein kann.

Alle Vorschläge begrüßt.

War es hilfreich?

Lösung

Was ist falsch mit dem Bild?

Die meiste Zeit, wenn Sie Karteninformationen im Web its a erzeugt JPG- oder PNG zu sehen.

Haben all diese Designer haben etwas falsch gemacht?

Jeder Versuch, das Diagramm mit Hilfe von Tabellen und backgroud Farben zu zeichnen wird auf eine sehbehinderte Person nicht intelligable sein, und aller Wahrscheinlichkeit nach wird nicht korrekt auf einem Browser machen, die Bilder nicht verarbeiten kann.

Verwenden Sie das Bild und haben einen „alt“ Text mit einer echten englischen Beschreibung „Ein Diagramm zeigt ACME Produkt kostet nur $ 49 im Vergleich mit Wettbewerbern: Vermieter 4 bei 51 $ .......

Andere Tipps

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

oder etwas ähnliches. Sie würden die Breiten mit CSS angeben, und blenden Sie die „Kosten“ eingestuft Spannweiten mit CSS.

Ich war versucht, eine Definitionsliste zu verwenden, aber die schwieriger gewesen wäre, die hierarchischen Verbände in der CSS zu erhalten.

Der Vorteil von diesen Auszeichnungs wenn ohne Style-Daten wiedergegeben wird, ist es die meisten seiner ursprünglichen Bedeutung behält: 

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

Tabelle Modell:

Ich dachte, ich würde zumindest versuchen, Tabellen Liams Vorschlag verwenden, es funktioniert eigentlich ganz gut, nur die Hintergrundverläufe in hinzufügen und wir setzen.

Blättern Sie nach unten um es in Aktion zu sehen (verfallen eher schnell) http: // www. webdevout.net/test?03

Original Inhalt Folgt 

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

Nun, ein Diagramm ist ein grafisches Element, ich nehme an, Sie die Daten wollen beide zugänglich sein Nur-Text-Browser und Suchmaschinen (?): In diesem Fall eine <table> für die Daten unter Verwendung von in einem Diagramm dargestellt ist eigentlich < em> richtig . Ich kenne eine Menge Leute von Tabellen Angst ist, weil die ganze Gerede über „Tisch-less“ Design. Aber die Verwendung von Tabellen für tabellarische Daten ist, was die Tabellen für bestimmt war.

Ich würde eine Tabelle unten gesetzt haben (oder oben, neben etc.) das Diagrammbild, mit den Daten der Tabelle angezeigt. Ein Diagramm ist gut für die Unterschiede sichtbar zu machen, und nicht so gut für die tatsächlichen Werte zu sehen; daher auch eine Tabelle ist eine schöne Ergänzung zu den Grafiken.

Wenn das Diagramm nicht sehr komplex ist (wie dieser Probe) konnte man auch nur einen Alt-Text mit einem einfachen Englisch Beschreibung des Diagramms hinzufügen, so etwas wie folgt aus: 

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

Ein Text Leser sollte keine Probleme haben, dies in einer sinnvollen Art und Weise zu lesen.

Ich scheine einige nützliche Beiträge zu diesem Thema zu erinnern. Sie könnten, dass am Ende finden ein einfaches Bild am besten von einer Kosten-Nutzen-Sicht ist, aber dieser Artikel werden Ihnen sagen, alles, was Sie jemals über die Verwendung von hTML und CSS zu ziehen Balkendiagramme.

wissen wollen könnten

Durch Zufall nach diesem Posting ich unter everyblock.com gestern und bemerkte, sie haben eine besonders gute Umsetzung von Grafiken in hTML / CSS, die auf der Suche würde sich lohnen.

Sie könnten auch nur eine Tabelle in Ihrem HTML berücksichtigen zu müssen und dann Javascript mit der Tabelle zu generieren: http://www.wait-till-i.com/2008/01/08/generating- Charts-from-zugänglich-Daten-Tabellen-mit-der-google-Charts-api /

Aber für ein Diagramm wie das Bild, das Sie geliefert - wo es nur ein Marketing-Image und die Werte haben keine wirkliche Bedeutung -. Dann nur eine gute Alt-Text Beschreibung soll in Ordnung sein

Sehen Sie die großen Artikel über CSS für Balkendiagramme auf die Äpfel mit Orangen-Website.

(Edit: Es ist das gleiche Link gepostet von @ Sam Murray-Sutton oben - sorry)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top