© prettyboy80/Shutterstock.com
Mobile Technology
Zeilen und Spalten programmatisch mit JavaScript und HTML5 erstellen

Tabellen ohne Excel

Tabellarische Darstellungen aller Art finden sich in allen Lebensbereichen. Für den Umgang mit Tabellen werden gewöhnlich Tabellenkalkulationsprogramme benutzt, die in den allermeisten Bürosoftware-Suiten enthalten sind. Diese Programme bieten dem versierten Anwender viele Möglichkeiten. Allerdings geht mit der Mächtigkeit dieser Programme auch eine entsprechende Komplexität bei der Verwendung einher. Anstelle der Verwaltung von Tabellen mit solcher Spezialsoftware können stattdessen auch Eigenimplementierungen verwendet werden. Dieser Weg wird in diesem Artikel beschrieben. Für die Repräsentation der Tabelle wird dabei HTML verwendet, da es den Vorteil bietet, dass die Tabelle von jedem moderneren Browser dargestellt werden kann. Für die Programmierung wird aus denselben Gründen JavaScript eingesetzt.

Wolfgang Schmidt


Obwohl eigentlich jeder Tabellen aus eigener Anschauung kennt, ist es dennoch schwierig, eine genaue Definition des Begriffs zu finden. Nach Wikipedia [1] ist eine Tabelle „... eine geordnete Zusammenstellung von Texten und Daten.“ Allgemeine Zustimmung würde wohl diese Charakterisierung finden:

Tabellen stellen Daten nach Zeilen und Spalten angeordnet dar.Im Allgemeinen stellen Tabellen Zusammenhänge zwischen bestimmten Ausprägungen von Werten in Zeilen und Spalten dar.Tabellen erlauben ein schnelles Auffinden der in der Tabelle abgelegten Information.

ABCDEFGH1XXX23X45XXXX6XOX7XOX8XOXXX

Tabelle 1: „Schiffe versenken“

Tabelle 1 zeigt ein Beispiel, das die meisten aus der Jugendzeit kennen: eine Tabelle aus dem Spiel „Schiffe versenken“. Technisch handelt es sich um eine m x n-Matrix mit m = 9 Zeilen und n = 9 Spalten. Jeweils eine Spalte und eine Zeile werden für die Beschriftung der Spalten (A–H) und der Zeilen (1–8) benötigt, für die eigentlichen Nutzdaten bleibt damit eine Matrix von (m – 1) * (n – 1) = 8 x 8 Feldern, oder, wie man bei Tabellen auch sagt, Zellen. Die Tabelle stellt einen Zusammenhang zwischen Koordinatenpaaren (bei denen die X-Koordinate durch die Spalte, die Y-Koordinate durch die Zeile gegeben ist) und dem „Beschusszustand“ der betreffenden Position her. Dieser wird in der Zelle abgelegt und kann dabei drei Werte annehmen:

Leer: Es wurde noch nicht auf diese Koordinaten geschossen.X: Es wurde auf die Koordinate geschossen und kein Treffer erzielt.O: Es wurde auf die Koordinate geschossen und ein Treffer erzielt.

Mathematisch könnte der Inhalt der Tabelle entsprechend auch als Abbildung/Funktion beschrieben werden, die jedem Koordinatenpaar einen Zustand zuordnet:

f: (x, y) | x in ['A'..'H'], y in ['1'..'8'] ➝ ' ' | 'X' | 'O'

Die Werte könnten dann wie folgt aufgeschrieben werden:

(Erste Zeile)f('A', '1') = 'X'f('B', '1') = ' 'f('C', '1') = ' '...f('G', '1') = 'X 'f('H', '1') = ' ' (Zweite Zeile)f('A', '2') = ''...f('H', '2') = ' '(usw. für alle Zeilen)

Die letztere Auflistung enthält dann dieselben Daten und hat die gleiche Aussagekraft. Allerdings hat die erstere Darstellung den Vorteil einer besseren Lesbarkeit und Navigierbarkeit. Sind etwa nur Zellen mit einer bestimmten X-Koordinate von Interesse, reicht die Betrachtung einer Spalte. Räumlich benachbarte Koordinaten zeichnen sich dadurch aus, dass die entsprechenden Spalten und Zeilen direkt nebeneinander liegen.

Spezialfälle von Tabellen sind solche, bei denen eine Tabelle einer ...

Mobile Technology
Zeilen und Spalten programmatisch mit JavaScript und HTML5 erstellen

Tabellen ohne Excel

Tabellarische Darstellungen aller Art finden sich in allen Lebensbereichen. Für den Umgang mit Tabellen werden gewöhnlich Tabellenkalkulationsprogramme benutzt, die in den allermeisten Bürosoftware-Suiten enthalten sind. Diese Programme bieten dem versierten Anwender viele Möglichkeiten. Allerdings geht mit der Mächtigkeit dieser Programme auch eine entsprechende Komplexität bei der Verwendung einher. Anstelle der Verwaltung von Tabellen mit solcher Spezialsoftware können stattdessen auch Eigenimplementierungen verwendet werden. Dieser Weg wird in diesem Artikel beschrieben. Für die Repräsentation der Tabelle wird dabei HTML verwendet, da es den Vorteil bietet, dass die Tabelle von jedem moderneren Browser dargestellt werden kann. Für die Programmierung wird aus denselben Gründen JavaScript eingesetzt.

Wolfgang Schmidt


Obwohl eigentlich jeder Tabellen aus eigener Anschauung kennt, ist es dennoch schwierig, eine genaue Definition des Begriffs zu finden. Nach Wikipedia [1] ist eine Tabelle „... eine geordnete Zusammenstellung von Texten und Daten.“ Allgemeine Zustimmung würde wohl diese Charakterisierung finden:

Tabellen stellen Daten nach Zeilen und Spalten angeordnet dar.Im Allgemeinen stellen Tabellen Zusammenhänge zwischen bestimmten Ausprägungen von Werten in Zeilen und Spalten dar.Tabellen erlauben ein schnelles Auffinden der in der Tabelle abgelegten Information.

ABCDEFGH1XXX23X45XXXX6XOX7XOX8XOXXX

Tabelle 1: „Schiffe versenken“

Tabelle 1 zeigt ein Beispiel, das die meisten aus der Jugendzeit kennen: eine Tabelle aus dem Spiel „Schiffe versenken“. Technisch handelt es sich um eine m x n-Matrix mit m = 9 Zeilen und n = 9 Spalten. Jeweils eine Spalte und eine Zeile werden für die Beschriftung der Spalten (A–H) und der Zeilen (1–8) benötigt, für die eigentlichen Nutzdaten bleibt damit eine Matrix von (m – 1) * (n – 1) = 8 x 8 Feldern, oder, wie man bei Tabellen auch sagt, Zellen. Die Tabelle stellt einen Zusammenhang zwischen Koordinatenpaaren (bei denen die X-Koordinate durch die Spalte, die Y-Koordinate durch die Zeile gegeben ist) und dem „Beschusszustand“ der betreffenden Position her. Dieser wird in der Zelle abgelegt und kann dabei drei Werte annehmen:

Leer: Es wurde noch nicht auf diese Koordinaten geschossen.X: Es wurde auf die Koordinate geschossen und kein Treffer erzielt.O: Es wurde auf die Koordinate geschossen und ein Treffer erzielt.

Mathematisch könnte der Inhalt der Tabelle entsprechend auch als Abbildung/Funktion beschrieben werden, die jedem Koordinatenpaar einen Zustand zuordnet:

f: (x, y) | x in ['A'..'H'], y in ['1'..'8'] ➝ ' ' | 'X' | 'O'

Die Werte könnten dann wie folgt aufgeschrieben werden:

(Erste Zeile)f('A', '1') = 'X'f('B', '1') = ' 'f('C', '1') = ' '...f('G', '1') = 'X 'f('H', '1') = ' ' (Zweite Zeile)f('A', '2') = ''...f('H', '2') = ' '(usw. für alle Zeilen)

Die letztere Auflistung enthält dann dieselben Daten und hat die gleiche Aussagekraft. Allerdings hat die erstere Darstellung den Vorteil einer besseren Lesbarkeit und Navigierbarkeit. Sind etwa nur Zellen mit einer bestimmten X-Koordinate von Interesse, reicht die Betrachtung einer Spalte. Räumlich benachbarte Koordinaten zeichnen sich dadurch aus, dass die entsprechenden Spalten und Zeilen direkt nebeneinander liegen.

Spezialfälle von Tabellen sind solche, bei denen eine Tabelle einer ...

Neugierig geworden?


   
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang