Tipps / Vorlagen, wenn ihr Tabellen verwenden wollt

[1miau]

Tabellen sind eigentlich immer hilfreich, wenn man lange Listen erstellen möchte. Es ist zwar an sich etwas mehr Aufwand aber die Darstellung sieht einfach besser und übersichtlicher aus. Als Beispiel kann man das ganz gut erkennen, wenn man den folgenden Inhalt als normal gegliederte Liste formatiert und das dann mit einer Tabelle vergleicht:

Normal formatiert:

Kryptowährung: Bitcoin
Abkürzung: BTC
Preis: $10,900
Sich in Umlauf befindliche Menge: 17,700,000 BTC
Marktkapitalisierung: $193,000,000,000
Schürfbar?: ja

Kryptowährung: Ethereum
Abkürzung: ETH
Preis: $310
Sich in Umlauf befindliche Menge: 106,600,000 ETH
Marktkapitalisierung: $33,000,000,000
Schürfbar?: ja


Tabelle:

Kryptowährung	Abkürzung	Preis (in $)	Sich in Umlauf befindliche Menge	Marktkapitalisierung (in $)	schürfbar?
_________________	__________	____________	_______________________________	_____________________________	_____________
Bitcoin	BTC	10,900	17,700,000 BTC	193,000,000,000	ja
Ethereum	ETH	310	106,600,000 ETH	33,000,000,000	ja

Gut geeignete Tabellen-Layouts

Die Formatierung von Tabellen ist nicht ganz leicht, wenn ihr damit ein wenig herumprobiert, werdet ihr aber schnell herausbekommen, wie es funktioniert. Tabellen bestehen aus mehreren Elementen:

Code:

[table][/table]

Code:

[tr][/tr]

Code:

[td][/td]

Table ist die gesamte Tabelle
Tr steht für table row (Tabellenreihe)
und Td für table data (Tabellendaten)

Diese umschließen jeweils die ihnen zugeordneten Tabellenbausteine
Table die ganze Tabelle
Tr jeweils eine komplette Zeile
und Td jeweils ein Element

Eine kleine Tabelle mit zwei Spalten würde damit wie folgt aussehen:

Code:

[table]

[tr]
[td]Überschrift[/td]
[td]Überschrift[/td]
[/tr]

[tr]
[td]Inhalt[/td]
[td]Inhalt[/td]
[/tr]

[/table]

Überschrift	Überschrift
Inhalt	Inhalt

Nun gibt es dabei ein paar Problematiken, wie dass der Text sehr gequetscht sein kann und bei mehreren Worten pro Spalte gibt es zusätzlich Probleme mit dem Zeilenumbruch. Das lässt sich leicht beheben und für die Formatierung kann man mehrere Layouts verwenden, hier meine Favoriten:




1. Verwendung von ___ für die Tabelle

xxx	xxx	xxx	xxx	xxx	xxx
_________________	_________________	_________________	_________________	_________________	_________________
xxx	xxx	xxx	xxx	xxx	xxx

Code:

[table]
[tr]
[td][b]xxx[/b][/td] 
[td][b]xxx[/b][/td] 
[td][b]xxx[/b][/td] 
[td][b]xxx[/b][/td] 
[td][b]xxx[/b][/td] 
[td][b]xxx[/b][/td] 
[/tr]
[tr]
[td]_________________[/td] 
[td]_________________[/td] 
[td]_________________[/td] 
[td]_________________[/td] 
[td]_________________[/td] 
[td]_________________[/td] 
[/tr]
[tr]
[td]xxx[/td] 
[td]xxx[/td] 
[td]xxx[/td] 
[td]xxx[/td] 
[td]xxx[/td] 
[td]xxx[/td]
[/tr]
[/table]

Die _____ helfen dabei, dass die Spalten genug Abstand voneinander haben und die Tabelle nicht gequtscht aussieht. Solltet ihr mehr Platz brauchen, fügt ihr einfach ein paar _ ein. Zudem helfen die _, um unnötige Zeilenumbrüche zu verhindern.

Denn solltet ihr keine _ zu eurer Tabelle hinzufügen, wird das sehr gequetscht aussehen und ihr habt ggf. ungewollte Zeilenumbrüche, wenn euer Text in td länger als die Überschrift ist:  

Kryptowährung	Ticker	Preis (in $)	Sich in Umlauf befindliche Menge	Marktkapitalisierung (in $)	schürfbar?
Bitcoin	BTC	10,900	17,700,000 BTC	193,000,000,000	ja
Ethereum	ETH	310	106,600,000 ETH	33,000,000,000	ja

Ihr könnt so viele Spalten zur Tabelle hinzufügen, wie ihr wollt, indem ihr einfach 1x

Code:

[td][b]xxx[/b][/td]

in die erste Zeile der Tabelle und

Code:

[td]xxx[/td] 

in den Inhalt der Tabelle hinzufügt. Vergesst dabei nicht, auch 1x

Code:

[td]__________________[/td]

hinzuzufügen, wenn ihr eine neue Spalte hinzufügt.




2. Verwendung von | für die Tabelle


Ihr könnt auch | für die Tabelle verwenden:

xxx	|	xxx	|	xxx	|	xxx	|	xxx	|	xxx	|
xxx	|	xxx	|	xxx	|	xxx	|	xxx	|	xxx	|

Code:

[table]
[tr]
[td][b]xxx[/b][/td] [td]|[/td]
[td][b]xxx[/b][/td] [td]|[/td]
[td][b]xxx[/b][/td] [td]|[/td]
[td][b]xxx[/b][/td] [td]|[/td]
[td][b]xxx[/b][/td] [td]|[/td]
[td][b]xxx[/b][/td] [td]|[/td]
[/tr]
[tr]
[td]xxx[/td] [td]|[/td]
[td]xxx[/td] [td]|[/td]
[td]xxx[/td] [td]|[/td]
[td]xxx[/td] [td]|[/td]
[td]xxx[/td] [td]|[/td]
[td]xxx[/td] [td]|[/td]
[/tr]
[/table]

Nachteil: hier tritt auch das Zeilenumbruchs-Problem auf, wenn man mehrere Worte in einem td hat. Viele Tabellen im Forum nutzen dieses Layout trotzdem gerne.  



3. Verwendung von ___ und | für die Tabelle


Natürlich könnt ihr auch ___ und | gleichzeitig verwenden:

xxx	|	xxx	|	xxx	|	xxx	|	xxx	|	xxx	|
_________________	|	_________________	|	_________________	|	_________________	|	_________________	|	_________________	|
xxx	|	xxx	|	xxx	|	xxx	|	xxx	|	xxx	|

Code:

[table]
[tr]
[td][b]xxx[/b][/td] [td]|[/td]
[td][b]xxx[/b][/td] [td]|[/td]
[td][b]xxx[/b][/td] [td]|[/td]
[td][b]xxx[/b][/td] [td]|[/td]
[td][b]xxx[/b][/td] [td]|[/td]
[td][b]xxx[/b][/td] [td]|[/td]
[/tr]
[tr]
[td]_________________[/td] [td]|[/td]
[td]_________________[/td] [td]|[/td]
[td]_________________[/td] [td]|[/td]
[td]_________________[/td] [td]|[/td]
[td]_________________[/td] [td]|[/td]
[td]_________________[/td] [td]|[/td]
[/tr]
[tr]
[td]xxx[/td] [td]|[/td]
[td]xxx[/td] [td]|[/td]
[td]xxx[/td] [td]|[/td]
[td]xxx[/td] [td]|[/td]
[td]xxx[/td] [td]|[/td]
[td]xxx[/td] [td]|[/td]
[/tr]
[/table]

Es ist auch möglich, mehrere Varianten zu kombinieren und bestimmt gibt es noch mehr. Die oben genannten sind aber am weitesten verbreitet.

[1714506309]

1714506309

[1714506309]

1714506309

[Turbartuluk]

Ich grabe den Beitrag mal aus.
Gibt es eigentlich ein Werkzeug, um aus einer Tabelle (z.B. Excel oder google sheets) automatisch den code für die Tabellenerstellung in bitcointalk zu generieren?

Wenn man 2 lange listen hat, die in spalten nebeneinander dargestellt werden sollen, muss man das doch irgendwie über copy+paste lösen können? Aktuell würde ich die zweite spalte mühselig Zeile für Zeile abtippen. Da gibt es doch bestimmt einen einfacheren Weg?

[1miau]

Ich grabe den Beitrag mal aus.

Gerne doch, Tabellen sind immer wieder eine feine Sache, um Inhalte übersichtlich präsentieren zu können.  

Gibt es eigentlich ein Werkzeug, um aus einer Tabelle (z.B. Excel oder google sheets) automatisch den code für die Tabellenerstellung in bitcointalk zu generieren?

Da ich kein Coder bin, kann ich dir das leider nicht beantworten aber vielleicht stellst du die Frage einmal in Meta, denn da sind einige Spezialisten dabei, die immer wieder große Tabellen präsentieren und da vermute ich, dass die irgendein Programm haben, welches Daten in Tabellenform umwandeln kann.

Wenn du da fragst, kannst du liebe Grüße von mir ausrichten, falls du magst.  

Wenn man 2 lange listen hat, die in spalten nebeneinander dargestellt werden sollen, muss man das doch irgendwie über copy+paste lösen können? Aktuell würde ich die zweite spalte mühselig Zeile für Zeile abtippen. Da gibt es doch bestimmt einen einfacheren Weg?

Ich persönlich (als Nicht-Coder), würde die Tabelle so vorbereiten (habe () statt [] verwendet, sonst sieht man es nicht):

(table)

(tr)
(td)Text Nummer 1.0(/td)
(td)Text Nummer 2.0(/td)
(/tr)

(tr)
(td)Text Nummer 1.1(/td)
(td)Text Nummer 2.1(/td)
(/tr)

(/table)

Und dann entsprechend die Inhalte mit Strg+V zwischen das (td)...(/td) einfügen. Die zweiten Details (rot) in der Tabelle könnte man genauso einfügen, wie die ersten Details. Also wäre dort alles mit Strg+V eingefügt.
Aber das ist vermutlich nicht das, worauf du hinaus willst?

[Turbartuluk]

Also ich hab jetzt selbst online mal ein wenig nach HTML Tabellen Generatoren geschaut und einen Workaround für mich gefunden.

Die gewünschte Tabelle kann mit dem jeweils eigenem Tabellenprogramm schonmal vorbereitet werden.
Dann kann die Tabelle hier eingefügt werden: https://www.netgrade.de/html-tabellen-generator/
Wichtig dabei: 1. Zeile frei lassen und ggf. direkt ___ | ___ | ___ verwenden.



Als nächstes den Haken bei "CSS nicht generieren" setzen und auf Code generieren klicken.

Der code sieht dann so aus:

Code:

<table>
  <tr>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td>Überschrift 1</td>
    <td>|</td>
    <td>Überschrift 2</td>
    <td>|</td>
    <td>Überschrift 3</td>
  </tr>
  <tr>
    <td>________________</td>
    <td>|</td>
    <td>_______________</td>
    <td>|</td>
    <td>________________</td>
  </tr>
  <tr>
    <td>Daten Spalte 1</td>
    <td>|</td>
    <td>Daten Spalte 2</td>
    <td>|</td>
    <td>Daten Spalte 3</td>
  </tr>
  <tr>
    <td>Daten Spalte 1</td>
    <td>|</td>
    <td>Daten Spalte 2</td>
    <td>|</td>
    <td>Daten Spalte 3</td>
  </tr>
  <tr>
    <td>Daten Spalte 1</td>
    <td>|</td>
    <td>Daten Spalte 2</td>
    <td>|</td>
    <td>Daten Spalte 3</td>
  </tr>
  <tr>
    <td>Daten Spalte 1</td>
    <td>|</td>
    <td>Daten Spalte 2</td>
    <td>|</td>
    <td>Daten Spalte 3</td>
  </tr>
  <tr>
    <td>Daten Spalte 1</td>
    <td>|</td>
    <td>Daten Spalte 2</td>
    <td>|</td>
    <td>Daten Spalte 3</td>
  </tr>
</table>
<span style='font-size:9px;'>Erstellt mit dem HTML Tabellen Generator von <a href='https://netgrade.de/'>netgrade</a></span>

Den Text beispielsweise zu Excel kopieren und (bei Excel mittels Strg + F) alle "<" durch "[" und alle ">" durch "]" ersetzen. Anschließend den Header (der Anteil mit <th></th>) und die letzte Zeile rauslöschen und den Rest zu bitcointalk kopieren.

Et voila:

Überschrift 1	|	Überschrift 2	|	Überschrift 3
________________	|	________________	|	________________
Daten Spalte 1	|	Daten Spalte 2	|	Daten Spalte 3
Daten Spalte 1	|	Daten Spalte 2	|	Daten Spalte 3
Daten Spalte 1	|	Daten Spalte 2	|	Daten Spalte 3
Daten Spalte 1	|	Daten Spalte 2	|	Daten Spalte 3
Daten Spalte 1	|	Daten Spalte 2	|	Daten Spalte 3

[Turbartuluk]

~

Nochmal ein Nachtrag, weil es auch direkt in Excel geht:

Als Beispiel habe ich wieder folgende Tabelle in Excel, die ich gerne für Bitcointalk aufbereiten möchte:


Nun gebe ich bei Zelle D1 folgende Formel ein:

Code:

="[tr][td]"&A1&"[/td][td]|[/td][td]"&B1&"[/td][td]|[/td][td]"&C1&"[/td][/tr]"

Die Formel ziehe ich über alle Zeilen und kopiere die Text zu Bitcointalk. Et voila:

Überschrift 1	|	Überschrift 2	|	Überschrift 3
____________	|	____________	|	____________
Daten Spalte 1	|	Daten Spalte 2	|	Daten Spalte 3
Daten Spalte 1	|	Daten Spalte 2	|	Daten Spalte 3
Daten Spalte 1	|	Daten Spalte 2	|	Daten Spalte 3
Daten Spalte 1	|	Daten Spalte 2	|	Daten Spalte 3
Daten Spalte 1	|	Daten Spalte 2	|	Daten Spalte 3

funktioniert interessanterweise auch ohne "table" bzw. "/table" am Anfang bzw. Ende.

 

[Lakai01]

[...]
funktioniert interessanterweise auch ohne "table" bzw. "/table" am Anfang bzw. Ende.

Super Idee, darauf wär ich nicht gekommen!

Warum das ohne Table funktioniert liegt an der Forensoftware. Die ist, was die Sonderauszeichnungen wie "table" oder "quote" betrifft durchaus intelligent (auch wenn mans der Software rein visuell vielleicht gar nicht so zutraut) und erkennt, dass du hier eine Tabellenstruktur einfügen möchtest. Fehlen dann die "table"-Elemente, so fügt dir die Software die einfach ein. Das sieht man dann, wenn man den Beitrag wieder editiert.

Betrifft wie gesagt nicht nur Tables sondern geht bspw. auch bei Listen oder überall dort, wo bspw. nur der Anfangs-Tag existiert, der End-Tag nicht.

[Turbartuluk]

~

Ich bin da auch nicht selber drauf gekommen, die Lorbeeren kann ich leider nicht für mich beanspruchen.

Ich hatte im internationalen Board auch eine Auswertung wo ich nen bissl mit der Zusammenführung der Daten aus dem @DdmrDdmr Merit Dashboard und @TryNinja Ninjastic.space gekämpft habe.

Da hat mir @DdmrDdmr dann freundlicherweise ein wenig unter die Arme gegriffen.

<…>  Last step is the conversion from excel to html tables for bitcointalk.
Is there maybe a smart way to do this within excel itself, so that 3rd party excel-html converter are not necessary?

You can create a trailing column in Excel that creates each row, concatenating all the BBCode and fields per row.

i.e.

Code:

="[tr][td]"&A4&"[/td][td]"&B4&"[/td][td]|[/td][td]"&D4&"[/td][td]"&E4&"[/td][td]"&F4&"[/td][td]|[/td][td]"&H4& "[/td][/tr]"

The above would be the constructor (Excel formula) for a given row on your last table, rendering the following result when extended to the first four rows + hearers in Excel (which I then copied here):

 

[Cricktor]

Überschrift linksbündig	Überschrift zentriert	Überschrift rechtsbündig	Mit Unterstrichen
			____________________
kürzer als Überschrift	auch kürzer	deutlich viel länger als die Überschrift	passt es so nicht
			____________________

Mit [hr] bekommt man Spaltenlinien, die sich automatisch der Spaltenbreite anpassen. Allerdings kann man dies nicht optisch sinnvoll mit einer erzwungenen Spaltenbreite durch eine geeignete Zahl von Unterstrichen kombinieren. Wenn es eine Möglichkeit gäbe, unsichtbaren Text zu generieren, könnte man den Trick mit den Unterstrichen weglassen (siehe P.S. unten). Mir persönlich gefallen die dünneren Spaltenlinien mit [hr] besser.


Der Code obiger Beispieltabelle lautet:

[table]
[tr][td][b]Überschrift[nbsp]linksbündig[/b][/td][td][center][b]Überschrift[nbsp]zentriert[/b][/center][/td][td][right][b]Überschrift[nbsp]rechtsbündig[/b][/right][/td][td][b]Mit[nbsp]Unterstrichen[/b][/td][/tr]
[tr][td][hr][/td][td][hr][/td][td][hr][/td][td]____________________[/td][/tr]
[tr][td]kürzer als Überschrift[/td][td]auch kürzer[/td][td]deutlich viel länger als die Überschrift[/td][td]passt es so nicht[/td][/tr]
[tr][td][hr][/td][td][hr][/td][td][hr][/td][td]____________________[/td][/tr]
[/table]


(Komischerweise musste ich zumindest in der ersten Spalte [nbsp] als nicht-umbrechbares Leerzeichen verwenden, weil es ohne zweizeilig umgebrochen wurde. Zumindest in meiner verwendeteten Fensterbreite wäre das nicht nötig gewesen.)

Um den Abstand zwischen den Spalten zu vergrößern, sofern gewünscht, kann man z.B. eine leere Spalte einfügen, ggf. mit unsichtbaren Platzhaltern (siehe unten).


Um die Interpretation von BBcode temporär auszuschalten, kann man den BBcode-Tag nobbc benutzen, wenn man [code][/code] nicht nutzen möchte, z.B. mitten in einem Satz. Der BBcode-Tag code würde einen Satz ja auseinanderreissen.


P.S.
Transparenter Text sollte sich mit [color=transparent][/color] einfügen lassen. Der transparente Text muss allerdings zusammenhängend sein, also keine Leerzeichen enthalten, wenn ich das recht verstehe (hab's hier irgendwo im Forum gefunden).
Test folgt... |XXXXXXXXXX| die Lücke zwischen den | ist generiert durch [color=transparent]XXXXXXXXXX[/color], was man beim Markieren mit dem Cursor dann auch sehen kann.