HTML-Tabellen

Herstellung von Web-Tabellen aus Kalkulations-Tabellen

Manchmal ist es erwünscht, die Daten einer Kalkulations-Tabelle in einer Webseite anzuzeigen. Auf dieser Seite wird gezeigt, wie man das rasch und einfach erreichen kann. Diese Beispiele transportieren allerdings nur statische Daten: Auf der Webseite wird nicht gerechnet, sondern nur das Ergebnis der Kalkulation angezeigt.
Kalkulation Zahlen-Werkzeug
Kalkulation -> Webseite Die Übertragung von Kalkulations-Tabellen auf Webseiten
HTML Einfache Grundlagen von HTML-Webseiten und -Tabellen
Standard-Funktionen HTML-Tabelle mit Standard Kalkulations-Funktionen
VBA-Funktionen HTML-Tabelle mit spezialisierten VBA-Funktionen
Webseite Speichern des erzeugten HTML-Quelltexts als Webseite
Web-Programm-Pakete Live Kalkulation mit dem Browser - ohne Büro-Programm

Von der Kalkulation zur Webseite
 AB
1  
2xy
3-519,8
4-412,1
5-36,6
6-23,3
7-12,2
803,3
916,6
10212,1
11319,8
12429,7
13541,8
14  
Beispiel einer einfachen Kalkulations-Tabelle. Auf dieser Seite wird vorgestellt, wie man die Daten in eine Webseite übertragen kann.

Die grün unterlegten Zellen sollen andeuten, dass man ihren Inhalt beliebig wählern kann. Es spielt keine Rolle, ob die Daten manuell eingetragen oder durch eine Formel berechnet wurden.

Vor und nach der Tabelle sollten sie eine Zeile frei lassen, rechts davon mindestens eine Spalte. 		So kann das Ergebnis aussehen.

Das Beispiel ist in einer echten Mini-Webseite enthalten:
Mit Klick auf diesen Link wird sie in einem eigenen Tab angezeigt.

Wie jede andere Webseite wird sie aus einem einfachen Text in der 'Programmiersprache' HTML hergestellt.
Diesen HTML-Quelltext können sie mit Menü-Befehl oder mit Rechtsklick in die Webseiten-Tabelle anzeigen lassen.

Auf dieser Seite wird vorgestellt, wie man den HTML-Quelltext einer Tabelle rasch und einfach selbst herstellen kann.

Kalkulations-Formeln

Jedes gängige Kalkulations-Programm (z.B. LibreOffice, OpenOffice, MS-Excel, ...) kann den gewünschten HTML-Quelltext mit Standard-Formeln selbst herstellen.
♦ Beispiele werden im Kapitel ↓ ...mit Kalkulations-Funktionen dieser Seite vorgestellt.

Visual Basic (VBA)

Jedes Standard Kalkulations-Programm lässt sich mit Funktionen in der Programmiersprache (Visual) → Basic ergänzen.
Dazu muss man nicht selbst programmieren. Man kann unzählige fertige Funktionen aus dem Internet laden.
♦ Im Kapitel ↓ ...mit Visual Basic werden einige dieser VBA-Funktionen vorgestellt.

Formatierung mit CSS

Eine Webseite bietet fast unbegrenzte Möglichkeiten der Formatierung. Sie können Layout und Formatierung ihrer Web-Tabelle frei gestalten. Dazu wird die 'Programmiersprache' Cascading StyleSheets (→ CSS) verwendet.
Sie bestimmen selbst den Aufwand:
Man kann auf CSS ganz verzichten, eines der vielen Beispiele verwenden oder selbst mit CSS programmieren.

Web-Kalkulation

Die einfachen Beispiele dieser Seite übertragen lediglich die Daten aus der Kalkulation in eine Web-Tabelle. Auf der Webseite werden sie statisch (unverändert, gleichbleibend) angezeigt.
Web-BesucherInnen können diese Seite nur ansehen, jedoch keine eigenen Daten eintragen oder damit rechnen.
Mit der heute verfügbaren Technik kann man diese Zwischenstufe jedoch überrspringen und die gesamte Kalkulation zum eigenen Server oder zu einem Anbieter im Internet verlagern (Cloud Computing).
Das eröffnet neue Perspektiven der Daten-Sicherheit und Kosteneinsparung...
♦ Details im Kapitel ↓ Web-Programm-Pakete dieser Seite.

HTML-Tabelle
In diesem Kapitel wird vorgestellt, wie eine HTML-Tabelle aufgebaut ist. Sie brauchen diese Kenntnisse (nur) dann, wenn ihre Ansprüche über die einfachste Darstellung hinausgehen.

Jede Webseite wird von ihrem Browser-Programm aus einer einfachen Text-Datei hergestellt, dem → HTML-Quelltext.

Ihr Browser kann den Quelltext (SourceCode) einer beliebigen Webseite mit Menü-Befehl oder mit Rechtsklick in die Seite anzeigen.
Der Text ist in der 'Programmiersprache' → HTML abgefasst und enthält sowohl Anweisungen (Befehle) als auch Daten. 		Der HTML-Quelltext lässt sich mit vielen verschiedenen Methoden herstellen, z.B. manuell (mit jedem Text-Editor), halbautomatisch (mit einem Web-Editor-Programm) oder vollautomatisch (z.B. mit einem Content-Management-Programm).

Beispiel: Öffnen sie diese Mini-Webseite, lassen sie den Quelltext anzeigen und speichern sie ihn als Text-Datei, z.B. mit dem Namen tabelle.html
Sie können diese Datei anschließend mit jedem Browser anzeigen, oder mit einem Text-Editor öffnen, ansehen, ändern, usw.

HTML-Tabelle

HTML-Anweisungen (Befehle) sind in Auszeichnungs-Elementen (tags) dieser allgemeinen Form enthalten:
<element> Daten </element>
Jedes Element hat Anfang und Ende (durch den / Schrägstrich bezeichnet). Innerhalb des Elements können sich Daten (der anzuzeigende Text) oder weitere Elemente befinden. 		Quelltext einer einfachen HTML-Tabelle:
<table border="1" >
<tr> <th> x </th> <th> y </th> </tr>
<tr> <td> 1 </td> <td> 2 </td> </tr>
<tr> <td> 3 </td> <td> 4 </td> </tr>
<tr> <td> 5 </td> <td> 6 </td> </tr>
</table>
Die Leerzeichen zwischen den Elementen dienen der besseren Übersicht. Sie werden von jedem Browser ignoriert.
Regeln einer einfachen HTML-Tabelle:

Element <table>
Dieses Element umschließt die gesamte Tabelle. Eine Webseite kann viele verschiedene Elemente enthalten, darunter z.B. auch mehrere Tabellen.

Attribut border
Jedes HTML-Element kann Attribute enthalten, mit denen man seine Eigenschaften individuell gestalten kann. Das Attribut border steuert die Anzeige der Ränder von Tabelle, Zeilen und Spalten. Ohne das Attribut werden keine Ränder angezeigt.

Element <tr>
Das Element table row bezeichnet eine Zeile der Tabelle. Jede Zeile (Reihe) muss mit <tr> beginnen und mit </tr> enden.

Element <th>
Das Element table header bezeichnet eine einzelne Zelle, die eine Überschrift enthält - im Beispiel die Spalten-Überschriften x und y
Ohne weitere Maßnahmen werden die darin enthaltenen Daten von allen gängigen Browsern fett und zentriert angezeigt.
Element <td>
Dieses Element table data bezeichnet jede einzelne Zelle. Die Daten befinden sich innerhalb der Elemente (hier die Zahlen 1...6). Sie werden ohne weitere Maßnahmen linksbündig angezeigt.
• Alle Elemente <th> und <td> müssen sich innerhalb eines Zeilen-Elements <tr> befinden.
• Jede Zeile <tr> muss gleich viele Zellen (<th> oder <td>) enthalten.
• Tabellen-Daten dürfen sich nur innerhalb von <th> oder <td>-Elementen befinden. Zwischen den Elementen einer Tabelle dürfen sich keine Daten befinden (Leerzeichen werden ignoriert).
• Jede Zelle muss Daten enthalten, d.h. mindestens ein druckbares Zeichen. Ein Leerzeichen genügt nicht: Wenn eine leere Zelle angezeigt werden soll, dann fügt man ein 'geschützes Leerzeichen' ein:
<td>&nbsp;</td>

♣ Die hier angeführten Regeln gelten (nur) in einfachen Fällen. Mit HTML-Kenntnissen hat man alle Möglichkeiten der professionellen Gestaltung.
♦ Details zu HTML-Tabellen

Webseite

Jede Webseite muss mindestens einige Grund-Elemente enthalten.

Element <html>
umschließt die gesamte Webseite. Darin sind alle anderen Elemente enthalten.

Element <head>
Enthält 'Kopf'-Elemente. Darunter sollte sich ein <title>-Element befinden.

Element <title>
Darin gibt man als Daten den Titel der Webseite an. Das ist jener Text, der vom Browser im Kopf-Balken und im Tab-Titel angezeigt wird.

Element <body>
Darin sind alle Elemente und Daten enthalten, aus denen die Webseite aufgebaut werden soll, z.B. eine Überschrift <h1> und/oder eine Tabelle <table>
• Ersetzen sie die ... Punkte durch die oben vorgestellten Tabellen-Elemente <tr>, <th>, <td>
• Das <table>-Element ist nur in diesem Beispiel rot hervorgehoben! In einem Quelltext gibt es keine Formatierung, wie z.B. Schrift-Familie, Größe oder Farbe. Die auf der Webseite dargestellten Farben werden durch Attribute gesteuert, z.B.
<h1 style="color:blue">Blau</h1>
HTML-Quelltext Minimal-Webseite:
<html>
<head>
<title>Beispiel</title>
</head>
<body>
Inhalt der Webseite, z.B. eine Überschrift
<h1>Meine Tabelle</h1>
oder eine Tabelle:
<table>
...
</table>
</body>
</html>

Sie können diesen Text (nach dem Ersetzen der ... Punkte) in eine Text-Datei eintragen oder kopieren.
Speichern sie die Datei z.B. mit dem Namen muster.html
Danach kann man die Mini-Webseite mit jedem Browser-Programm öffnen und als (sehr einfache) Webseite anzeigen.

♣ Verwenden sie zur Erstellung von Quelltext ein Text-Editor-Programm (z.B. Notepad++ oder notepad.exe ) keinesfalls jedoch ein Textverarbeitungs-Programm !

HTML-Tabelle mit Kalkulations-Funktionen
In diesem Kapitel wird vorgestellt, wie man mit einem Standard Kalkulations-Programm den Quelltext einer HTML-Tabelle erzeugen kann. Jedes Kalkulations-Programm bietet alle Funktionen, die man zur programmierten Herstellung von Text braucht.

Programmierung

• Anfang und Ende des HTML-Elements <table> werden als Text direkt (hier in die Zellen C1,C14) eingetragen.

• Alle anderen Texte werden mit Formeln berechnet. Die einzelnen Text-Bausteine werden mit dem Operator-Zeichen & zusammengefügt.

• Als Text-Bausteine kann man Text-Konstanten und die Inhalte von Zellen verwenden.
Text-Konstanten sind gleichbleibende Texte, die man mit " (Double Quotes) umschließt.
Daten aus anderen Zellen werden durch Angabe ihrer Adresse (z.B. A2) eingefügt. 		Verkettung von Text-Elementen:
 ABC
1Tabelle  <table border="1">
2xy ="<tr><th>"&A2&"</th><th>"&B2&"</th></tr>"
3-519,8 ="<tr><th>"&A3&"</th><th>"&B3&"</th></tr>"
4-412,1 ="<tr><th>"&A4&"</th><th>"&B4&"</th></tr>"
 ......
13541,8 ="<tr><th>"&A13&"</th><th>"&B13&"</th></tr>"
14  </table>

Man muss die Formel nur einmal (in Zelle C2) eintragen und kann sie dann nach unten (hier bis C13) ausfüllen.
Danach wird in Spalte C der fertige HTML-Quelltext der Tabelle engezeigt.

HTML-Datei

Die Kalkulations-Datei und die HTML-Datei werden getrennt und unabhängig voneinander gespeichert. Zum Speichern der HTML-Quelltext-Datei verwendet man am besten einen Text-Editor (z.B. Notepad++ oder notepad.exe ) als Hilfs-Programm.

Die erzeugte Quelltext-Datei (muster.html) lässt sich mit jedem Browser-Programm öffnen und als Webseite anzeigen.
Alternativ kann man die Datei auch mit jedem Text-Editor öffnen, um z.B. den Quelltext zu ändern oder zu ergänzen. 		Speichern des erzeugten HTML-Quelltexts:

• Öffnen sie sowohl die Kalkulations-Datei als auch ein Text-Editor-Programm, letzteres mit einer leeren Seite.

• Markieren sie den erzeugten HTML-Quelltext (im Beispiel den Bereich C1:C14) und kopieren sie den Inhalt.

• Setzen sie den Inhalt (der Zwischenablage) in das leere Text-Fenster ein.

• Speichern sie den Text mit dem Editor-Programm unter einem Datei-Namen *.html, z.B. als muster.html
Alternativ kann man den HTML-Quelltext auch mit anderen Methoden speichern, die sich jedoch für wenig geübte AnwenderInnen nicht eignen:

● Man kann den erzeugten HTML-Quelltext in ein Textverarbeitungs-Programm kopieren und damit speichern. Solche Programme sind auf die Herstellung formatierter druckbarer Texte spezialisiert. Das Speichern von unformatiertem Text ist ein Sonderfall: Man muss darauf achten, den Text im Dateityp 'Text (*.txt)' speichern.

● Manche Versionen von Kalkulations-Programmen bieten als Option das 'Speichern als Webseite', als 'HTML-Datei', oder ähnlich. Das ist wenig empfehlenswert, weil damit meist sehr aufwändige formatierte Webseiten erzeugt werden. Diese Webseiten sind unverhältnismäßig groß und lassen sich nur schwer nach eigenen Vorstellungen formatieren bzw. an ein Layout anpassen.
Das Kalkulations-Programm des Marktführers neigt überdies zur Verwendung von Elementen, die nicht mit Standard HTML kompatibel sind und sich nur mit dem Browser des gleichen Herstellers anzeigen lassen... 		● Ein Kalkulations-Programm kann selbst jedes einzelne Blatt (Sheet) als Text-Datei speichern. Man sollte jedoch vorher die ganze Kalkulations-Datei in einem gängigen Kalkulations-Format speichern.
Danach kopiert man den erzeugten HTML-Quelltext und setzt nur den Inhalt (die Werte) in ein leeres Kalkulationsblatt ein. Dieses Blatt kann man im Dateityp 'Text (*.txt)' speichern. Danach muss man die Text-Datei von *.txt auf *.html umbenennen.

• Diese Arbeit ist relativ kompliziert und es besteht bei manueller Ausführung die Gefahr, irrtümlich Teile der Kalkulations-Datei zu überschreiben.
• Fortgeschrittene EntwicklerInnen können den gesamten Vorgang allerdings mit einem Programm in der Programmiersprache (Visual) → Basic automatisieren: Ein derartiges ('Makro')-Programm lässt sich mit Mausklick bedienen. Diese Variante ist sinnvoll, wenn man die aktuellen Daten einer Kalkulations-Tabelle öfters in eine Webseite übertragen will. Sie funktioniert - einmal eingerichtet - rasch und sicher und kann auch von wenig geübten AnwenderInnen ausgeführt werden.

Web-Ansicht

Die Tabelle wird so wie rechts gezeigt in einer Webseite dargestellt:
Lesbar, jedoch ohne zusätzliche Formatierung nicht besonders attraktiv:
Jede Spalte ist nur so breit wie notwendig, die Daten (auch Zahlen) nur linksbündig.

• Darüber hinaus gibt es auch inhaltliche Grenzen:
Die Kalkulations-Tabelle darf in dieser einfachen Form keines der Zeichen & " < > enthalten und auch die Umlaute und Sonderzeichen ÄÖÜäöü߀ werden von einem Browser nicht sicher korrekt angezeigt.

• Das Beispiel funktioniert in dieser Form nur für 2spaltige Tabellen. Für jede weitere Spalte muss man den erzeugten HTML-Text um eine zusätzliches <td>-Element pro Zeile ergänzen.
xy
-519,8
-412,1
-36,6
-23,3
-12,2
03,3
16,6
212,1
319,8
429,7
541,8

• Je nach Bedarf, Kenntnissen und Aufwand kann man mit → CSS alle üblichen Eigenschaften einstellen, z.B. Schrift (Familie, Schnitt, Größe, Farbe, Ausrichtung), Hintergrund (Farbe, Muster), Rahmen (Stärke, Muster, Farbe,...) Breite und Höhe der Zellen, usw.

♦ Details zu CSS und zur speziellen Formatierung von Tabellen mit CSS

HTML-Tabelle mit Visual Basic (VBA)
Das Beispiel zeigt, wie man eine Tabelle beliebiger Daten (grün unterlegt) mit 'Benutzer-definierten' VBA-Funktionen in HTML-Quelltext umwandeln kann.

● Spezialisierte VBA-Funktionen wie diese sind einfacher anwendbar, flexibler (für beliebig viele Tabellen-Spalten) und leistungsfähiger: Auch Sonderzeichen werden korrekt in HTML-Code übersetzt.
 ABC
1Tabelle  <table border="1">
2xy=table_header_to_html(A2:B2)
3-519,8=table_row_to_html(A3:B3)
4-412,1=table_row_to_html(A4:B4)
 ......
13541,8=table_row_to_html(A13:B13)
14  </table>

HTML-Quelltext

Diese Version erzeugt genau den gleichen HTML-Quelltext wie im Beispiel ↑ mit Standard Kalkulations-Funktionen, allerdings einfacher und eleganter.

Die Funktionen in Spalte C sind mit der Programmiersprache → Visual Basic (VBA) programmiert. Man kann sie aus den hier gezeigten Beispielen in eigene Kalkulations-Dateien übernehmen.
Vorteile der VBA-Funktionen:
• Man kann als Argumente der beiden "Benutzer-spezifischen Funktionen" table_header_to_html() und table_row_to_html() beliebig große Bereiche angeben - nicht nur 2 Spalten wie in diesem Beispiel sondern auch 3 oder mehr Spalten.
• Man kann in der Kalkulations-Tabelle alle Zeichen verwenden, auch < > " & €  oder Umlaute.
• Der Komma-Beistrich wird auf Wunsch in den international üblichen Kommapunkt übersetzt.
• Zahlen werden rechtsbündig angezeigt.

Spalten-Überschriften

Die VBA-Funktion table_header_to_html() erzeugt den Quelltext einer HTML Tabellen-Zeile mit Spalten-Überschriften.

Sie erhält als Argument titel_zeile einen Bereich von Zellen - im Beispiel den Bereich A2:B2 - mit den Namen der beiden Tabellen-Spalten.

Der Text jeder im Bereich (Range) titel_zeile angegebenen Zelle c wird mit der Hilfs-Funktion ↓ text_to_html() in HTML-Code umgewandelt. 		Visual Basic (VBA) Funktion zur Herstellung der Spalten-Überschriften:
Function table_header_to_html(titel_zeile As Range) As String
Dim html As String
Dim c As Range
html = "<tr>"
For Each c In titel_zeile.Cells
html = html & "<th>"
html = html & text_to_html(c.Value)
html = html & "</th>"
Next
html = html & "</tr>"
table_header_to_html = html
End Function

Tabellen-Zeile(n)

Die VBA-Funktion table_row_to_html() erzeugt den Quelltext einer HTML Tabelle-Zeile mit Daten.

Sie erhält als Argument zeile einen Bereich von Zellen - im Beispiel die Zeilen von A3:B3 bis A13:B13 - mit den Daten der Tabellen-Spalten.

Für jede Zelle c des Bereichs (Range) zeile wird mit der VBA Standard-Funktion IsNumeric() geprüft, ob sie einen Zahlenwert enthält.
Wenn das zurtifft, dann wird die ↓ Funktion number_to_html() zur Übersetzung in HTML-Code verwendet, ansonsten die ↓ Funktion text_to_html() 		Visual Basic (VBA) Funktion zur Herstellung einer Tabellen-Zeile:
Function table_row_to_html(zeile As Range) As String
Dim html, t As String
Dim c As Range
html = "<tr>"
For Each c In zeile.Cells
t = c.Value
If IsNumeric(t) Then
html = html & "<td style='text-align:right;'>"
html = html & number_to_html(CStr(t)) & "</td>"
Else
html = html & "<td>" & text_to_html(t) & "</td>"
End If
Next
html = html & "</tr>"
table_row_to_html = html
End Function

Umwandlung Text -> HTML

Die VBA-Funktion text_to_html() dient zur Umwandlung von Text-Daten (als String-Variable text übergeben) in HTML Quelltext.

• Der Eingabe-String text wird in einzelne Zeichen c zerlegt.

• Jedes Zeichen wird mit der ↓ Hilfs-Funktion char_to_html() in Standard HTML-Code übersetzt.

• Leere Daten werden in ein "geschütztes Leerzeichen" mit dem HTML-Code &nbsp; umgewandelt. Detail: Mit Funktion Replace() werden vorher alle Mehrfach-Leerzeichen eliminiert. 		Visual Basic (VBA) Hilfs-Funktion text_to_html()
Function text_to_html(text As String) As String
Dim i, ic As Integer
Dim c, html As String
html = ""
For i = 1 To Len(text)
c = Mid(text, i, 1)
html = html & char_to_html(c)
Next
While (InStr(html, "  "))
html = Replace(html, "  ", " ")
Wend
If ((Len(html) = 0) Or (html = " ")) Then
html = "&nbsp;"
End If
text_to_html = html
End Function

Umwandlung Zahlenwerte -> HTML

Die VBA-Funktion number_to_text() dient zur Umwandlung von Zahlen-Daten (als String-Variable text übergeben) in HTML Quelltext.

Die Funktion setzt voraus, dass der als Argument erhaltene String text lediglich aus Vorzeichen, Ziffern und dem Dezimal-TrennZeichen besteht. Alle Zeichen mit Ausnahme des (Dezimal)-Beistrichs werden unverändert in den HTML Ausgabe-String übernommen.

Jeder Dezimal-Beistrich wird in einem Punkt umgewandelt.

Leere Daten werden in ein "geschütztes Leerzeichen" mit dem HTML-Code &nbsp; umgewandlet. 		Visual Basic (VBA) Hilfs-Funktion number_to_html()
Function number_to_html(text As String) As String
Dim i As Integer
Dim c, html As String
html = ""
For i = 1 To Len(text)
c = Mid(text, i, 1)
If c = "," Then
html = html & "."
Else
html = html & c
End If
Next
If Len(html) = 0 Then html = "&nbsp;"
number_to_html = html
End Function

Hilfs-Funktion Zeichen -> HTML

Die VBA-Funktion char_to_html() dient zur Umwandlung eines einzelnen Text-Zeichens in Standard HTML Quelltext.

• Mit Funktion AscW() wird die Unicode-Zahl des Zeichens ermittelt. Sie funktioniert in MS-Programmen bis zu U+FFFF, d.h. für die ersten 65000 → Unicode-Zeichen. Darunter befinden sich u.a. alle in Europa verwendeten Sonderzeichen.

• Die Anweisung Select steuert die Verarbeitung je nach der Codenummer uc

• Die nicht druckbaren Sonderzeichen mit ASCII-Code 0...31 oder 127 werden ignoriert.

• Die Zeichen &"<> haben in HTML eine besondere Bedeutung und werden daher "maskiert" (&quot; bis &gt;)

• Alle anderen ASCII-Zeichen (uc<128) werden ohne Änderung in den Ausgabe-Text übernommen.

• Das €-Zeichen wird von MS-Programmen nicht Standard-konform codiert und von der Funktion in korrekten HTML-Code umgewandelt.

• Alle anderen Unicode-Zeichen (128...uc...65535) werden mit der Standard HTML Maskierung übernommen. Das betrifft u.a. die deutschen Umlaute ÄÖÜäöüß, aber auch alle französischen, nordischen oder slawischen Sonderzeichen, sowie den kompletten griechischen, kyrillischen, arabischen und hebräischen Zeichensatz. 		Visual Basic (VBA) Hilfs-Funktion char_to_html()
Function char_to_html(ByVal zeichen As String) As String
Dim uc As Long
Dim html As String
uc = AscW(zeichen)
If uc < 0 Then uc = uc& + &H10000
html = ""
Select Case uc
Case Is < 32, 127
Case 34
html = "&quot;"
Case 38
html = "&amp;"
Case 60
html = "&lt;"
Case 62
html = "&gt;"
Case Is < 128
html = zeichen
Case 128
html = "&euro;"
Case Else
html = "&#" & uc & ";"
End Select
char_to_html = html
End Function

♦ Details zu Zeichen, ASCII, HTML Zeichen-Maskierung, Unicode und zur Text-Programmierung mit VBA

Anwendung in MS-Excel

Beginnen sie mit einer Kalkulations-Datei, in welcher schon eine Tabelle mit Daten vorhanden ist, ähnlich wie im hier vorgestellten Beispiel.

Wechseln sie mit Alt-F11 zur Visual Basic - Ansicht und legen sie ein neues VBA-Modul an.
Kopieren sie der Quelltext aller 5 in diesem Kapitel vorgestellten VBA-Funktionen in das Modul.
Danach können sie die beiden Funktionen table_header_to_html() und table_row_to_html() in passende Zellen ihrer Kalkulations-Datei eintragen.
Ergänzen sie das HTML-Element <table>...</table> manuell, so wie im Beispiel gezeigt.

Je nach Version von MS-Excel müssen sie die Verwendung auch von eigenen VBA ("Makro-Programmen") ausdrücklich zuassen. In manchen Fällen müssen sie danach die Datei schließen und nochmals öffnen.

♦ Details zur Verwendung von VBA-Modulen

Übertragung der Tabelle in eine Webseite

Der erzeugte Text wird am besten in den HTML-Quelltext einer vorhandenen Webseite *.html eingefügt.

Dazu gibt es mehrere Möglichkeiten. Diese hat sich am besten bewährt:
Öffnen sie ein Text-Editor-Programm (z.B. Notepad++ oder notepad.exe), jedoch besser kein Textverarbeitungs-Programm.
Markieren sie den in der Kalkulations-Datei erzeugten HTML Quelltext (in diesem Beispiel den Bereich C1:C14), kopieren sie den Inhalt und setzen sie ihn in das Editor-Fenster ein.
Danach können sie den Text des Editors in einer eigenen Datei speichern oder markieren und direkt in den HTML Quelltext einer Webseiten-Datei (*.html) einsetzen.

Der 'Umweg' über das Text-Editor Programm garantiert, dass nur einfacher Text ohne Formatierung oder Layout übernommen wird.

Erzeugung programmierter Texte

Man kann die vorgestellte Methode mit erwas Phantasie modifizieren, um beliebige programmierte Texte herzustellen.

Das ist z.B. sinnvoll, wenn man größere Mengen von Daten als Text erhält und sie in Programmen verschiedenster Programmiersprachen verwenden will. Die Daten werden meist in ein Array eingetragen. Der dazu erforderliche Quelltext lässt sich mit einem Kalkulations-Programm besonders einfach, schnell und fehlerfrei (!) herstellen.

Das rechts skizzierte Beispiel wird u.a. auf der Seite → Staaten-Codes dieses Webs für die Daten von ca. 250 Staaten verwendet. Die Daten wurden in einer Kalkulations-Datei gesammelt, mit einem VBA-Programm in Javascript-Code umgewandelt und als Text exportiert - rasch, sicher und jederzeit reproduzierbar.
Beispiel: Eintragung der Daten von Staaten in ein → Javascript-Array:
(Bezeichnung, ISO-3166 Zahlencode, 3char-Code, TLD)
var country_code=new Array();
i=0;
country_code[i++]=new Array("Albanien",8,"ALB",".al");
country_code[i++]=new Array("Andorra",20,"AND",".ad");
country_code[i++]=new Array("\u00D6sterreich",40,"AUT",".at");
  ...
country_code[i++]=new Array("Ukraine",804,"UKR",".ua");

Webseite
In diesem Kapitel wird beschrieben, wie man den mit einem Kalkulations-Programm erzeugten HTML-Quelltext in einer Webseiten-Datei speichert. Diese Arbeit ist unabhängig von der Art der Herstellung und lässt sich z.B. auf einen mit ↑ Standard Kalkulations-Funktionen hergestellten HTML-Quelltext genauso anwenden wie auf Text, der mit ↑ VBA-Funktionen hergestellt wurde.

HTML-Snippet

Die Kalkulations-Datei und die HTML-Datei werden getrennt und unabhängig voneinander gespeichert. Zum Speichern der Quelltext-Datei verwendet man am besten einen Text-Editor (z.B. notepad.exe oder (besser) Notepad++) als Hilfs-Programm.

Die erzeugte Quelltext-Datei (muster.html) lässt sich mit jedem Browser-Programm öffnen und als Webseite anzeigen.
Alternativ kann man die Datei auch mit jedem Text-Editor öffnen, um z.B. den Quelltext zu ändern oder zu ergänzen. 		Speichern des erzeugten HTML-Quelltexts:

• Öffnen sie sowohl die Kalkulations-Datei als auch ein Text-Editor-Programm, letzteres mit einer leeren Seite.

• Markieren sie den erzeugten HTML-Quelltext (im Beispiel den Bereich C1:C14) und kopieren sie den Inhalt.

• Setzen sie den Inhalt (der Zwischenablage) in das leere Text-Fenster ein.

• Speichern sie den Text mit dem Editor-Programm unter einem Datei-Namen *.html, z.B. als muster.html
Alternativ kann man den HTML-Quelltext auch mit anderen Methoden speichern, die sich jedoch für wenig geübte AnwenderInnen nicht eignen:

● Man kann den erzeugten HTML-Quelltext in ein Textverarbeitungs-Programm kopieren und damit speichern. Solche Programme sind auf die Herstellung formatierter druckbarer Texte spezialisiert. Das Speichern von unformatiertem Text ist ein Sonderfall: Man muss besonders darauf achten, den Text im Dateityp 'Text (*.txt)' speichern.

● Manche Versionen von Kalkulations-Programmen bieten als Option das 'Speichern als Webseite', als 'HTML-Datei', oder ähnlich. Das ist wenig empfehlenswert, weil damit meist sehr aufwändig formatierte Webseiten erzeugt werden. Diese Webseiten sind unverhältnismäßig groß und lassen sich nur schwer nach eigenen Vorstellungen formatieren bzw. an ein vorgegebenes Layout anpassen.
Das Kalkulations-Programm des Marktführers neigt überdies zur Verwendung von Elementen, die nicht mit Standard HTML kompatibel sind und sich oft nur mit dem Browser des gleichen Herstellers anzeigen lassen... 		● Ein Kalkulations-Programm kann selbst jedes einzelne Blatt als Text-Datei speichern. Man sollte jedoch vorher die gesamte Kalkulations-Datei in einem gängigen Kalkulations-Format speichern.
Danach kopiert man den erzeugten HTML-Quelltext und setzt nur den Inhalt (die Werte) in ein leeres Kalkulationsblatt ein. Dieses Blatt darf keine Formeln enthalten. Man kann es im Dateityp 'Text (*.txt)' speichern. Danach muss man die Text-Datei von *.txt auf *.html umbenennen.
• Diese Arbeit ist relativ kompliziert und es besteht bei manueller Ausführung die Gefahr, irrtümlich Teile der Kalkulations-Datei zu überschreiben.
• Fortgeschrittene EntwicklerInnen können den gesamten Vorgang allerdings mit einem Programm in der Programmiersprache (Visual) → Basic automatisieren:
Ein derartiges ('Makro')-Programm lässt sich mit Mausklick bedienen. Diese Variante ist sinnvoll, wenn man die aktuellen Daten einer Kalkulations-Tabelle öfters in eine Webseite übertragen will. Sie funktioniert - einmal eingerichtet - rasch und sicher und kann auch von wenig geübten AnwenderInnen ausgeführt werden.

HTML-Webseite

Mit der oben beschriebenen Methode wird lediglich der Quelltext einer HTML-Tabelle als Schnipsel (Snippet) gespeichert, nicht jedoch eine fertige Webseiten-Datei.

man kann das Tabellen-Snippet in jede beliebige Wbeseiten-Datei einsetzen, z.B. in das hier gezeigte Minimal-Muster oder in irgend eine andere, bereits vorhandene Webseiten-Datei.
• Als Werkzeug verwenden sie am besten ein Text-Editor Programm (z.B. Notepad++ oder notepad.exe).

Alternativ können sie dazu ein spezialisiertes Web-Editor Programm verwenden. Das ist für diese einfache Arbeit jedoch nicht notwendig, manchmal sogar nicht sinnvoll: Oft wird dabei unerwünschter Text eingefügt.
Einbettung in eine bestehende Datei
Dazu brauchen sie den HTML-Quelltext der Webseite, normalerweise als Text-Datei *.html

• Öffnen sie sowohl die Snippet-Datei als auch die Webseiten-Datei mit einem Text-Editor Programm, z.B. mit Notepad++ oder mit notepad.exe

• Fügen sie den Snippet-Text an einer zulässigen Stelle in den Quelltext der Webseiten-Datei ein.
• Zum Einfügen erlaubt sind alle Stellen außerhalb der < > Klammern von HTML-Elementen.

• Speichern sie die geänderte Quelltext-Datei, am besten unter einem anderen Namen, damit das Original nicht überschrieben wird.

• Testen sie das Ertgebnis, d.h. öffnen sie die Datei mit einem Browser:
Die Webseite mit ihrer Tabelle sollte angezeigt werden.
Einbettung in eine Minimal-Webseite
Wenn keine fertige Webseiten-Datei zur Verfügung steht, dann können sie ihr Tabellen-Snippet in das rechts gezeigte Muster einsetzen.

• Ändern sie die Überschrift innerhalb des <h1>-Elements oder löschen sie dieses Element.

• Ersetzen sie die rot eingetragenen Zeilen durch den Text ihrer HTML-Tabelle.

• Sie können vor oder nach ihrer Tabelle (dem <table>-Element) weitere Elemente eintragen, z.B. einen erklärenden Text ohne besondere HTML-Elemente. 		HTML-Quelltext einer Minimal-Webseite:
<html>
<head>
<title>Beispiel</title>
</head>
<body>
Inhalt der Webseite, z.B. eine Überschrift
<h1>Meine Tabelle</h1>
oder eine Tabelle:
<table>
...
</table>
</body>
</html>

Formatierung

Mit → CSS (Cascading StyleSheets) kann man jedes Detail einer Webseite individuell formatieren. Rechts ein Beispiel dazu.
SelfHTML bietet u.a. eine besonders aussführliche CSS-Referenz mit Beispielen.

Das Beispiel rechts zeigt den Teil <head>...</head> einer Webseiten-Datei *.html mit einigen Änderungen zur Formatierung der Tabelle. Unabhängig davon wird auch die erste Zeile des Tabellen-Elements <table> geändert.

Einige Details dieses Beispiels, das sie nach Bedarf einfach anpassen können:
• Die Formatierung der Überschrift "Meine Tabelle" wird im Element h1{...} festgelegt.
• Für Tabelle und alle Zellen wird ein schmaler Rand und die Schrift-Familie Courier festgelegt.
• Die Spalten-Breite wird mit width:100px; festgelgt.
• Die Ausrichtung der Daten-(Zahlen) wird mit text-align:right; festgelegt.
Fügen sie das <style>...</style> Element so wie gezeigt innerhalb des <head>...</head>-Elements in den HTML-Text ein:
<head>
<title>Meine Webseite</title>
<style type="text/css">
h1{font-family:Verdana,Helvetica,Arial,sans-serif; font-size:12pt; margin:0px; margin-bottom:5px;}
table,th,td{border-color:#666; border-style:solid; border-width:1px; font-family:'Courier New',Courier,mono;}
th,td{padding:0px; padding-left:5px; padding-right:5px; width:100px;}
td{text-align:right;}
</style>
</head>
Ersetzen sie den Beginn des <table> Elements:
<table style="border-collapse:collapse; width:100%;">
Beispiel ohne Formatierung: Die hier eingebettete Mini-Webseite wird vom Browser automatisch formatiert. Sie zeigt zwar immer die darin enthaltenen Daten, kann jedoch je nach Betriebssystem, Browser, Version und Browser-Konfiguration anders aussehen.

 Beispiel mit der hier vorgestellten Formatierung: Jeder Browser sollte die Tabelle mit der gleichen, hier vorgestellten Formatierung anzeigen. Sie können jede der beiden Mini-Webseiten mit RechtsKlick in einem eigenen Browser-Tab anzeigen und den HTML-Quelltext ansehen.

Web-Programm-Pakete
Derzeit vollzieht sich gerade der Übergang von den klassichen Büro-Programmen am eigenen PC zum Cloud-Computing: Zur Arbeit kann man jeden modernen Browser verwenden, die Programme befinden sich nicht am eigenen Arbeits-PC sondern auf einem Server-PC - im eigenen lokalen Netzwerk oder im Internet. Derartige Web-basierte Kalkulations-Programme sind wesentlich wirtschaftlicher und so gut wie wartungsfrei, da sie mit jedem PC, jedem Betriebssystem und mit jedem Browser bedienbar sind. Einzige Voraussetzung ist eine funktionierende Netzwerk-Verbindung zum Server.

Web-Programme sind ein wesentlicher Schritt zur Unabhängigkeit (von teuren Betriebssystemen oder Büro-Programmen...) und damit zu einer radikalen Kostenreduktion.

Individuelle Web-Kalkulation

Spezialisierte Web-Programme für einzelne vor-programmierte Kalkulationen sind in manchen Fällen eine rasch realisierbare Alternative

► Auf der Seite → Web-Kalkulation wird ein einfaches Beispiel vorgestellt: Das ist eine dynamische Webseite, die sich bemüht, einem gewohnten Kalkulationsblatt möglichst ähnlich zu sehen - wie alle derzeit verfügbaren Web-Kalkulations-Programme.

Mit Kenntnissen einer modernen Programmiersprache (z.B. → Perl, → PHP) kann man selbst Web-Kalkulations-Seiten herstellen. Das ist schon heute für Kalkulations-Aufgaben mit den rechts angeführten Merkmalen sinnvoll und wirtschaftlich.
Derartige Webseiten sind - im Gegensatz zu allgemeinen Kalkulations-Programmen - für einen genau bestimmten Zweck ausgelegt, an den sie besonders gut angepasst sind.
Eine individuelle Kalkulations-Webseite ist sinnvoll, je mehr dieser Merkmale zutreffen:

• Die Rechnung wird öfters mit unterschiedlichen Daten, jedoch nach den gleichen Vorschriften (Algorithmen, Formeln...) ausgeführt.
• Die zugrunde liegenden Daten stammen aus einer Datenbank.
• Mehrere Personen führen derartige Rechnungen durch.
• Die Kalkulation soll reproduzierbar und mit anderen gleichartigen Rechnungen (z.B. des Vorjahres) vergleichbar sein.
• Die Ergebnisse sollen gespeichert werden und bei Bedarf anderen AnwenderInnen zur Verfügung stehen.
• Die Ergebnisse oder Teile davon (z.B. Grafik) sollen im Intranet und/oder im Internet verfügbar sein.

Zum Inhaltsverzeichnis Homepage von PS-Trainer   >   Anwendung   >   Kalkulation   >   HTML-Tabellen