Excel-Tabellen in HTML konvertieren, Teil 1

 
 

Motivation

Wenn man Tabellen auf eine Webseite bringen will und diese etwas anspruchsvoller formatieren möchte, ist der Aufwand recht hoch.

Microsoft Excel ist ein mächtiges Programm und bietet schier unermäßliche Möglichkeiten.

Es nur naheliegend, Excel auch für die Erstellung und Formatierung der Tabellen zu benutzen, die ins WEB sollen…

Im Folgenden wird kurz beschrieben, wie mittels VBA von Excel eine Tabelle in HTML-Code umgesetzt werden kann.

Eine entsprechende Exportfunktion bietet Excel nicht. Excel kann wohl nach HTML exportieren. Aber dann wird eine komplette Webseite erstellt.

Wenn man nur eine Tabelle exportieren möchte, um das Ergebnis dann in den HTML-Code einer Webseite zu integrieren, kann der folgende VBA-Code verwendet werden.

Funktionsumfang – was die Konvertierung zurzeit leistet

  • Formatierung der Zellen weitgehend übernehmen, aktuell umgesetzt für
    • Schriftfarbe, Schriftart, Schriftstile und -größe
    • Hintergrundfarbe
    • Rahmenlinien: Farbe, Stile, Stärke
    • Ausrichtung der Inhalte
  • Verbundene Zellen vertikal und horizontal
  • Zeilenhöhen
  • Spaltenbreiten
  • ausgeblendete Spalten und Zeilen sollen nicht übernommen werden

Einschränkung:

Bei Tabellen die als Tabelle formatiert sind (Tabellenformatvorlagen, Table styles) werden die Formateigenschaften nicht korrekt übernommen.

 

Endergebnis – das leistet das Makro zur Konvertierung

Hier der Bildschirmabzug einer formatierten Exceltabelle als Bild.

Tabelle in Excel

… und so erscheint die Tabelle als HTML-Code eingebunden, hier als (X)HTML-Version. Auf der Beispielseite als HTML5 mit “InBody” (scoped) style sheet Excel-Tabelle als HTML- und CSS-Code eingebunden


Parameter Minimum Typical Maximum Unit Conditions/Comments
Operating Temperature 5 35 °C
Wiring cable 3 m
Output channels (OUT0 … OUT15, OUT_STROBE)
Low-level output current (I_outLL) 100 mA
High-level output current (I_outHL) -100 mA
Output resistance 327 333 Ohm
High-level output voltage 3,4 V (VDD = 5 V, I_outHL = -145 mA)
Low-level output voltage tbd V (I_outLL = xx mA)
“+5 V supply voltage” 4,8 5,2 V
Lemo In (Input, High Side)
High-level input voltage 3 24 V
High-level input current 15 mA
Low-level input voltage -5 1,6 V
POWER REQUIREMENTS
Parameter Minimum Typical Maximum Unit Conditions/Comments
Current consumption
at V5 tbd mA User interface inactive

 


Der erzeugte HTML-Code

Der Code besteht aus zwei Teilen. Einem Style-Sheet zur Einbindung in den body-Bereich (das ist nur ab HTML5 erlaubt) und einem HTML-Teil für die eigentliche Tabelle.

Der erzeugte HTML-Code für eine kleine Tabelle … Für HTML5-Seiten.

nach oben⇑

Das Style-Sheet mit den erzeugten CSS-Klassen zur Formatierung der Tabellen-Zellen. Ab HTML5 darf das style-Element im body-Bereich eingefügt werden. Weitere Informationen siehe hier.

Für Seiten, die mit Vorgängerversionen von HTML5 codiert sind, wird die Formatierung der Tabelle und der einzelnen Zellen über das style-Attribut realisiert. Siehe Beispiel-Code unten.

HTML-Code für die Verwendung in Seiten die Vorgängerversionen von HTML5 nutzen.

nach oben⇑

Verwendung des VBA-Makros

Die Tabelle muss im Excel-Tabellenblatt ausgewählt werden. Anschließend wird das Makro gestartet, ein Dateiname und der Speicherpfad gewählt und der Tabelleninhalt wird inklusive aller oben genannten Formatierungen als HTML- und CSS-Code in die Datei geschrieben.

Die Datei enthält reinen ASCII-Code, ist also eine reine Text-Datei. Mit einem beliebigen Texteditor kann die Datei geöffnet werden und der Inhalt komplett in die Zwischenablage kopiert werden.

Aus der Zwischenablage kann der Code dann in den Ziel-HTML-Code eingefügt werden – fertig.

Hinweis:
Der Code funktioniert nur in HTML5-Seiten. Im Code wird ein lokales Stile-Sheet erzeugt, welches innerhalb des HTML-Körpers (Body) abgelegt wird. Das ist erst ab HTML5 erlaubt und wird in Browsern nur in HTML5-codierten Seiten unterstützt.

nach oben⇑

 

Vorgehensweise – die Teilschritte und deren Umsetzung in VBA-Code

Ermittlung von Größe und Inhalt der Tabelle

  • erste und letzte Spalte und Zeile als Zahl ermitteln (für Adressierung mit cell(…))
  • Anzahl sichtbarer Spalten ermitteln

  • Wenn erste und letzte Spalte / Zeile nicht benötigt würde, könnte man die Spaltenanzahl auch wie folgt ermitteln:

  • prüfen, ob es Zellen mit Inhalt gibt

…hier ein Code-Schnippsel:

nach oben⇑

Tabellen-Layout ermitteln

Für die spätere Verarbeitung wird das Tabellen-Layout in VBA-Arrays abgelegt. Die Arrays sind als “Integer” deklariert. Um Speicherplatz zu sparen, könnten sie auch als “Byte-Arrays” deklariert werden.

Laufvariablen und “Merker” für Zeilen und Spalten wurden bewusst als “Integer” vereinbart, da es ohnehin keinen Sinn ergibt, derart riesige Tabellen als HTML-Code zu erzeugen.

  • verbundene Zellen suchen und merken …

  • colspan-Werte für td-Elemente bilden

  • rowspan-Werte für td-Elemente bilden

Wenn in beiden Arrays, iTdRow und iTdCol ein Wert verschieden von Null steht, wird ein td-Element erzeugt.

  • Formatierung der Tabellen-Zellen ermitteln; die Formatierung wird anschließend über CSS-Klassen definiert
    • es werden zwei CSS-Klassen gebildet
    • eine für die Rahmen-Eigenschaften border
    • die andere für background-color, text-decoration, font-style, font-weight, font-size, font-size
    • font-style, font-weight, font-size, font-type werden zunächst global ermittelt und nur dann für die einzelnen Tabellenzellen in Style-Sheet übernommen, wenn sie sich von den globalen unterscheiden

Tabellen-Zellen mit gleicher Formatierung erhalten die gleiche CSS-Klasse. Damit wird wesentlich die Länge des erzeugten Codes beeinflusst. Je mehr unterschiedlich formatierte Zellen es gibt, desto größer wird die erzeugte ASCII-Datei mit dem HTML-Code.

nach oben⇑

HTML-Code für Tabelle erzeugen

  • Lokales Style-Sheet mit den CSS-Klassen für die Zellenformatierung erzeugen und in Datei speichern
    • Wenn mehrere mit diesem Makro generierte Tabellen in einer Webseite eingefügt werden, muss dafür gesorgt werden, dass es die CSS-Klassen für die Zell-Formatierung nur jeweils einmal gibt. Sonst kann es zu ungewollten Seiteneffekten kommen, die sich in falschen Darstellungen widerspiegeln.
    • Um das zu gewährleisten, werden die CSS-Klassen-Namen so gebildet, dass Dopplungen unwahrscheinlich werden.
  • Bildung der CSS-Klassen-Namen

  • lokales Style-Sheet erzeugen; wird über das style-Attribut mit dem Attribut scoped in den body-Bereich vor der Tabelle eingefügt

  • Tabellenkopf erzeugen; wesentliche Formatierungen werde über inline-style im table-Element eingefügt
  • wichtige Einstellungen für die Darstellung der Tabelle sind:
    • text-align: inherit;, vertical-align: inherit;, border-collapse: collapse;, border-spacing: 0;, width: inherit;

  • Spaltenbreiten aus Excel übernehmen und in HTML codieren

  • Tabellenkörper schreiben; ein td-Element wird nur erzeugt. wenn in beiden Arrays, iTdRow und iTdCol ein Wert verschieden von Null steht
  • im Zelleninhalt werden Zeilenumbrüche durch das HTML-Token <br />

…wird fortgesetzt.

Weiter zu Teil2.

 nach oben⇑