Daten tabellarisch darstellen – von Excel zur HTML Tabelle

Excel Tabelle zu HTML konvertieren

Die unbekannten HTML- Tabellen. Waren sie in den Anfangstagen des WWW die einzig bekannte und wirkungsvolle Art das Layout zu gestalten wurde dies mit der Trennung von HTML und CSS nicht mehr benötigt. Nun kann kaum wer mehr Tabellen erstellen.

Selbst wenn man einen WYSIWYG Editor benutzt, muss man wissen wie man ihn benutzt. Dies ist den meisten zu aufwändig und so passiert es immer öfter, dass tabellarische Daten „falsch“ ausgezeichnet werden.

Ich stelle heute Möglichkeiten vor wie man aus einer vorhandenen Excel Tabelle eine HTML Tabelle erstellen kann. Diese Möglichkeiten liefern kein 100% barrierefreies HTML. Aber sie sind für kleinere Tabellen sicher ausreichend.

Und so sehr ich barrierefreien Tabellen den eindeutigen Vorzug gebe. Bevor man tabellarische Daten mangels Möglichkeiten in hochkompliziert zu lesende Sätze umformuliert sind mir einfache Tabellen lieber.

tableizer – online Tool

die konvertierte Excel Tabelle von tableizer

Mit tableizer, von Danny Sanchez kann man unkompliziert aus einer einfachen Excel Tabelle eine HTML Tabelle erstellen.

Man kopiert die Excel Tabelle und fügt sie einfach in das vorgesehene Feld des online Tools tableizer.
Schriftart, Farbe der Header-Zeilen der Tabelle und die Schriftgröße kann man auch noch einstellen.

Dann liefert das Tool folgendes:

  <style type="text/css"> table.tableizer-table {border: 1px solid #CCC;  font-family: Arial, Helvetica, sans-serif;  font-size: 12px;} .tableizer-table td {padding: 4px; margin: 3px; border: 1px solid #ccc;}.tableizer-table th {background-color: #104E8B; color: #FFF; font-weight: bold;} </style> 
  
  <table class="tableizer-table"> <tr class="tableizer-firstrow"><th></th><th>Überschrift 1</th><th>Überschrift 2</th><th>Überschrift 3</th></tr> <tr><td>Horizontal</td><td>Alpha</td><td>Beta</td><td>Gamma</td></tr> <tr><td>Horizonatal 2</td><td>Alpha 2 </td><td>Beta 2 </td><td>Gamma 2</td></tr></table>   
  

Was bedeutet dies und was macht man damit

1. das CSS

<style type=";text/css";>
table.tableizer-table {border: 1px solid #CCC; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px;} 
.tableizer-table td {padding: 4px; margin: 3px; border: 1px solid #ccc;}
.tableizer-table th {background-color: #104E8B; color: #FFF; font-weight: bold;}
</style>

Dies ist das CSS der erzeugten Tabelle, es gestaltet sie.
Ich empfehle jedoch die Tabellen eines Webauftritts in der verwendeten Style.css zu gestalten. Dies sollte der WebDesigner dort bereits gemacht haben. Wenn nicht, dann fordern sie es einfach ein 🙂
Es gehört dazu.

Sie können aber natürlich auch alles zwischen <style type=“text/css“> und </style> in die verwendete Style.css kopieren.

2. das HTML

Dies hier ist das HTML Tabelle für den Webauftritt

&lt;table class=&quot;tableizer-table&quot;&gt;
&lt;tr class=&quot;tableizer-firstrow&quot;&gt;&lt;th&gt;&lt;/th&gt;&lt;th&gt;Überschrift 1&lt;/th&gt;&lt;th&gt;Überschrift 2&lt;/th&gt;&lt;th&gt;Überschrift 3&lt;/th&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Horizontal&lt;/td&gt;&lt;td&gt;Alpha&lt;/td&gt;&lt;td&gt;Beta&lt;/td&gt;&lt;td&gt;Gamma&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Horizonatal 2&lt;/td&gt;&lt;td&gt;Alpha 2 &lt;/td&gt;&lt;td&gt;Beta 2 &lt;/td&gt;&lt;td&gt;Gamma 2&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;

Wer einen WYSIWYG Editor hat, also einen Editor indem man das HTML nie sieht, kann dies dort nicht einfach so hineinkopieren. Die meisten dieser Editoren zeigen dann keine Tabelle an, sondern das HTML als Text;)

Wer die Möglichkeit hat in seinem CMS auch HTML zu veröffentlichen, der kann dies dort einfach hineinkopieren.
In WordPress findet man dies unter dem Button „HTML“, in der zukünftigen Version von WP wird dies unter „Text“ zu finden sein.

So sieht die Tabelle vom tableizer hier bei mir aus:

Überschrift 1Überschrift 2Überschrift 3
HorizontalAlphaBetaGamma
Horizonatal 2Alpha 2Beta 2Gamma 2

Das CSS für diese Tabelle hier:


table{border-collapse:separate;
background:#fff;
padding:.45em;
margin-left:6%;
border:1px solid transparent;
border-radius:8px; -webkit-border-radius:8px;  
-moz-border-radius:8px; -o-border-radius:8px;
-khtml-border-radius:8px;}
caption,th,td {padding:.35em; }
caption,th{font-weight:bold;}
td:nth-child(odd) {border:1px solid #f0efef;
background: #f6f6f6;color:#000;}
td:nth-child(even) {border:1px solid #e3e1e1;
background: #e9e8e8;color:#262530;}
th,td{border-radius:4px; 
-webkit-border-radius:4px;  
-moz-border-radius:4px; 
-o-border-radius:4px;
-khtml-border-radius:4px;}
th{border:1px solid #e7f1e7;
background-color:#ecf3eb;}
th:first-child{border:none;
background:transparent;}

2. Möglichkeit Windows Live Writer

Wie man Excel Tabellen in den Live Writer übernimmt, die auch die Formatierung beibehalten ist in diesem tollen Artikel erklärt.
Excel Tabellen in den LiveWriter mit Formatierung einfügen.

Vorgestellt Tools

Wer andere Tools kennt, die auch einfache Excel Tabellen zu HTML konvertieren => bitte einfach das Kommentarfeld nutzen.
Kommentare mit Links landen vorerst in der Moderation, aber ich sehe mir sicher alle an 🙂
mts

Ebenfalls informativ und lesenswert

3 Kommentare zu “Daten tabellarisch darstellen – von Excel zur HTML Tabelle

  1. Jack

    Das Ergebnis von Tableizer sieht richtig gut aus. Kann sich auf jeden Fall sehen lassen…

  2. Daniela

    Nunja, auch wenn dies dem ein oder anderen Einsteiger helfen mag – ist dies nun keine Lösung für den professionellen Einsatz.

    Das meiste was dabei rauskommt ist ja HTML, JS, CSS anno 1999.

  3. mts

    das css muss man nicht nehmen, das kann der WebDesigner wirklich bereitstellen,
    der Rest reicht für absolut kleine simple Tabellem wirklich.

    Und 1999 sahen Tabellen noch anders aus, das weiß ich mehr als das 😉

    ich rede hier von oftmals 4-5 zeilige Tabellen

    oder maximal 2spaltig.

    Und dann ist es immer noch besser so, als wenn diese tabellarischen Daten in Sätze gepackt werden, weil es dann einfach unleserlich wird.

    Dass dies eine Krücke ist, ist mir mehr als bewusst, doch besser eine Krücke als hinfallen 😉