MS-Office Tabellen in HTML Tabellen umwandeln

Wie kann man Tabellen aus PDF, Word oder Exceldateien schnell in HTML umwandeln?

Vladimir Simović hat gerade einen Dienst vorgestellt mit dem man Tabellen aus Office oder PDF Dateien schnell in HTML umwandeln lassen kann. Beim PDF kann ich nicht dagegenhalten, aber gerade bei Office Dokumenten ist der Export mittlerweile sehr gut! Die Zeiten der absolut grauenhaften Exporte ist vorbei. MS schafft auch mal was!

Ausgangatabelle

Und so schaut der Export in HTML aus

bereinigt man den Export von den html, head, body und Metatags, sieht die eigentlich Tabelle eigentlich recht sauber aus:

<table border=0 cellpadding=0 cellspacing=0 width=346 style='border-collapse:
 collapse;table-layout:fixed;width:346pt'>
 <col class=xl66 width=105 style='mso-width-source:userset;mso-width-alt:3360;
 width:105pt'>
 <col class=xl66 width=189 style='mso-width-source:userset;mso-width-alt:6048;
 width:189pt'>
 <col class=xl66 width=52 style='mso-width-source:userset;mso-width-alt:1664;
 width:52pt'>
 <tr class=xl65 height=49 style='height:49.0pt'>
  <td height=49 class=xl69 width=105 style='height:49.0pt;width:105pt'>SEO
  Maßnahmen</td>
  <td class=xl69 width=189 style='width:189pt'>&nbsp;</td>
  <td class=xl69 width=52 style='width:52pt'>Wirkung (0-10)</td>
 </tr>
 <tr height=33 style='height:33.0pt'>
  <td height=33 class=xl67 width=105 style='height:33.0pt;width:105pt'>offPage
  Optimierung</td>
  <td class=xl67 width=189 style='width:189pt'>Linkbuilding</td>
  <td class=xl67 align=right width=52 style='width:52pt'>8</td>
 </tr>
 <tr height=16 style='height:16.0pt'>
  <td height=16 class=xl67 width=105 style='height:16.0pt;width:105pt'>&nbsp;</td>
  <td class=xl67 width=189 style='width:189pt'>Presseberichte</td>
  <td class=xl67 align=right width=52 style='width:52pt'>4</td>
 </tr>
 <tr height=16 style='height:16.0pt'>
  <td height=16 class=xl67 width=105 style='height:16.0pt;width:105pt'>&nbsp;</td>
  <td class=xl67 width=189 style='width:189pt'>Brandbildung</td>
  <td class=xl67 align=right width=52 style='width:52pt'>10</td>
 </tr>
 <tr height=32 style='height:32.0pt'>
  <td height=32 class=xl68 width=105 style='height:32.0pt;width:105pt'>onPage
  Optimierung</td>
  <td class=xl68 width=189 style='width:189pt'>Content Struktur</td>
  <td class=xl68 align=right width=52 style='width:52pt'>10</td>
 </tr>
 <tr height=16 style='height:16.0pt'>
  <td height=16 class=xl68 width=105 style='height:16.0pt;width:105pt'>&nbsp;</td>
  <td class=xl68 width=189 style='width:189pt'>korrekte interne Verlinkung</td>
  <td class=xl68 align=right width=52 style='width:52pt'>10</td>
 </tr>
 <tr height=16 style='height:16.0pt'>
  <td height=16 class=xl68 width=105 style='height:16.0pt;width:105pt'>&nbsp;</td>
  <td class=xl68 width=189 style='width:189pt'>Sauberer Code</td>
  <td class=xl68 align=right width=52 style='width:52pt'>4</td>
 </tr>
 <tr height=32 style='height:32.0pt'>
  <td height=32 class=xl68 width=105 style='height:32.0pt;width:105pt'>&nbsp;</td>
  <td class=xl68 width=189 style='width:189pt'>HTML5 Content
  Abschnitt-Klassifizierung</td>
  <td class=xl68 align=right width=52 style='width:52pt'>8</td>
 </tr>
 <tr height=16 style='height:16.0pt'>
  <td height=16 class=xl68 width=105 style='height:16.0pt;width:105pt'>&nbsp;</td>
  <td class=xl68 width=189 style='width:189pt'>Meta Description</td>
  <td class=xl68 align=right width=52 style='width:52pt'>10</td>
 </tr>
 <tr height=16 style='height:16.0pt'>
  <td height=16 class=xl68 width=105 style='height:16.0pt;width:105pt'>&nbsp;</td>
  <td class=xl68 width=189 style='width:189pt'>Länge der Description</td>
  <td class=xl68 align=right width=52 style='width:52pt'>5</td>
 </tr>
 <tr height=16 style='height:16.0pt'>
  <td height=16 class=xl68 width=105 style='height:16.0pt;width:105pt'>&nbsp;</td>
  <td class=xl68 width=189 style='width:189pt'>Meta Keywords</td>
  <td class=xl68 align=right width=52 style='width:52pt'>0</td>
 </tr>
 <tr height=16 style='height:16.0pt'>
  <td height=16 class=xl68 width=105 style='height:16.0pt;width:105pt'>&nbsp;</td>
  <td class=xl68 width=189 style='width:189pt'>Seiten-Titel</td>
  <td class=xl68 align=right width=52 style='width:52pt'>10</td>
 </tr>
 <tr height=16 style='height:16.0pt'>
  <td height=16 class=xl68 width=105 style='height:16.0pt;width:105pt'>&nbsp;</td>
  <td class=xl68 width=189 style='width:189pt'>Länge des Titels</td>
  <td class=xl68 align=right width=52 style='width:52pt'>5</td>
 </tr>
 <tr height=16 style='height:16.0pt'>
  <td height=16 class=xl68 width=105 style='height:16.0pt;width:105pt'>&nbsp;</td>
  <td class=xl68 width=189 style='width:189pt'>Keyowordrelevanz im Titel</td>
  <td class=xl68 align=right width=52 style='width:52pt'>10</td>
 </tr>
 <tr height=16 style='height:16.0pt'>
  <td height=16 class=xl68 width=105 style='height:16.0pt;width:105pt'>&nbsp;</td>
  <td class=xl68 width=189 style='width:189pt'>h1 Titel</td>
  <td class=xl68 align=right width=52 style='width:52pt'>10</td>
 </tr>
 <tr height=16 style='height:16.0pt'>
  <td height=16 class=xl68 width=105 style='height:16.0pt;width:105pt'>&nbsp;</td>
  <td class=xl68 width=189 style='width:189pt'>Keyowordrelevanz im h1 Titel</td>
  <td class=xl68 align=right width=52 style='width:52pt'>10</td>
 </tr>
 <tr height=16 style='height:16.0pt'>
  <td height=16 class=xl68 width=105 style='height:16.0pt;width:105pt'>&nbsp;</td>
  <td class=xl68 width=189 style='width:189pt'>h2 Untertitel</td>
  <td class=xl68 align=right width=52 style='width:52pt'>8</td>
 </tr>
 <tr height=16 style='height:16.0pt'>
  <td height=16 class=xl68 width=105 style='height:16.0pt;width:105pt'>&nbsp;</td>
  <td class=xl68 width=189 style='width:189pt'>Keywordrelevanz im h2 Titel</td>
  <td class=xl68 align=right width=52 style='width:52pt'>4</td>
 </tr>
 <tr height=16 style='height:16.0pt'>
  <td height=16 class=xl68 width=105 style='height:16.0pt;width:105pt'>&nbsp;</td>
  <td class=xl68 width=189 style='width:189pt'>Textlänge (200-500 Wörter)</td>
  <td class=xl68 align=right width=52 style='width:52pt'>8</td>
 </tr>
</table>

Ergebnis

Um einen 1:1 Effekt zu erhalten, sollte man die Style Informationen natürlich im Quellcode mit einbinden. Damit der Quellcode komplett sauber bleibt und die Style Informationen nicht im Contentbereich stehen müssen (nicht HTML konform) könnte man noch mit Hilfe des MailChimp CSS Inline Styler die Styles ganz einfach aus den CSS Styles Inline abspeichern.

Und dann kommt folgendes bei heraus:

Liefert Tableizer einen saubereren Code?

Wenn man damit leben kann, dass das Tabellendesign verloren geht, ja!

<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>SEO Maßnahmen</th><th>&nbsp;</th>
<th>Wirkung (0-10)</th></tr> 
<tr><td>offPage Optimierung</td><td>Linkbuilding</td><td>8</td></tr> 
<tr><td>&nbsp;</td><td>Presseberichte</td><td>4</td></tr> 
<tr><td>&nbsp;</td><td>Brandbildung</td><td>10</td></tr> 
<tr><td>onPage Optimierung</td><td>Content Struktur</td><td>10</td></tr> 
<tr><td>&nbsp;</td><td>korrekte interne Verlinkung</td><td>10</td></tr> 
<tr><td>&nbsp;</td><td>Sauberer Code</td><td>4</td></tr> 
<tr><td>&nbsp;</td><td>HTML5 Content Abschnitt-Klassifizierung</td><td>8</td></tr> 
<tr><td>&nbsp;</td><td>Meta Description</td><td>10</td></tr> 
<tr><td>&nbsp;</td><td>Länge der Description</td><td>5</td></tr> 
<tr><td>&nbsp;</td><td>Meta Keywords</td><td>0</td></tr> 
<tr><td>&nbsp;</td><td>Seiten-Titel</td><td>10</td></tr> 
<tr><td>&nbsp;</td><td>Länge des Titels</td><td>5</td></tr> 
<tr><td>&nbsp;</td><td>Keyowordrelevanz im Titel</td><td>10</td></tr> 
<tr><td>&nbsp;</td><td>h1 Titel</td><td>10</td></tr> 
<tr><td>&nbsp;</td><td>Keyowordrelevanz im h1 Titel</td><td>10</td></tr> 
<tr><td>&nbsp;</td><td>h2 Untertitel</td><td>8</td></tr> 
<tr><td>&nbsp;</td><td>Keywordrelevanz im h2 Titel</td><td>4</td></tr> 
<tr><td>&nbsp;</td><td>Textlänge (200-500 Wörter)</td><td>8</td></tr></table>

Ergebnis