Hallo zusammen ich habe gerade eine Tabelle erstellt aber brauche eure Hilfe komme nicht weiter vllt habt ihr ein paar tipps was ich einfügen muss das es so ausschaut wie ich es gerne hätte. HTML: <table> <thead> <tr> <th>Nährwerte </th> <th>pro 100g</th> <th>pro Portion (15g)</th> <th>pro Portion %RI(DV)</th> </tr> </thead> <tfoot> <tr> <td colspan="4">*Referenzmenge für einen durchschnittlichen Erwachsenen (8400 kj/2000 kcal) †RI (dv) Keine empfholene Referenzmenge oder Nährstoffbezugswert vorhanden</td> </tr> </tfoot> <tbody> <tr> <td>Energie</td> <td>300 kcal/1260 kj</td> <td>45 kcal/189 kj</td> </tr> <tr> <td>Fette</td> <td><0.1 g</td> <td><0.1 g</td> <td>**</td> </tr> <tr> <td>davon gesättigte</td> <td><0.1 g</td> <td><0.1 g</td> <td>**</td> </tr> <tr> <td>Kohlenhydrate</td> <td><0.1 g</td> <td><0.1 g</td> <td>**</td> </tr> <tr> <td>davon Zucker</td> <td><0.1 g</td> <td><0.1 g</td> <td>**</td> </tr> <tr> <td>Ballastoffe</td> <td><0.1 g</td> <td><0.1 g</td> <td>**</td> </tr> <tr> <td>Eiweiß</td> <td><0.1 g</td> <td><0.1 g</td> <td>**</td> </tr> <tr> <td>Salz</td> <td><0.1 g</td> <td><0.1 g</td> <td>**</td> </tr> <tr> <td>L-Leucin</td> <td>13333 mg</td> <td>2000 mg</td> <td>†</td> </tr> <tr> <td>L-Valin</td> <td>11333 mg</td> <td>1700 mg</td> <td>†</td> </tr> <tr> <td>L-Isoleucin</td> <td>10000 mg</td> <td>1500 mg</td> <td>†</td> </tr> <tr> <td>L-Lysin</td> <td>10000 mg</td> <td>1500 mg</td> <td>†</td> </tr> <tr> <td>L-Phenylalanin</td> <td>8666 mg</td> <td>1300 mg</td> <td>†</td> </tr> <tr> <td>L-Threonin</td> <td>7333 mg</td> <td>1100 mg</td> <td>†</td> </tr> <tr> <td>L-Methionin</td> <td>4666 mg</td> <td>700 mg</td> <td>†</td> </tr> <tr> <td>L-Tryptophan</td> <td>2666 mg</td> <td>400 mg</td> <td>†</td> </tr> </tbody> </table> Code: table { background-color: #ffffff; border-collapse: collapse; border: none; } thead { background-color: #eee; } tfoot { background-color: #fff; font-size: 80%; border-top: 1px solid #999; } td, th { text-align: left; padding: 0.5em 1em; } Ih würde gerne das eine Zeile grau ist und die eine weiß. und im letzten abschnitt hätte ich gerne die *Referenzmenge und †RI (dv) untereinender. und als drittes falls es noch gehen würde das die angeben alle auf einer Linie sind bei den mg angeben
Ist Deine Tabelle Responsive? Das sieht nicht so aus, kann mich aber irren. Ich hätte das eher so geschrieben: HTML: <div class="row"> <div class="col-xs-12 col-lg-8"> <table class="table table-striped table-features"> <thead> <tr> <th style="font-size:16px; text-align: left; text-transform: unset;">Überschrift 1</th> <th style="font-size:16px; text-align: right; text-transform: unset;">Überschrift 2</th> <th style="font-size:16px; text-align: right; text-transform: unset;">Überschrift 3</th> <th style="font-size:16px; text-align: center; text-transform: unset;">Überschrift 4</th> </tr> </thead> <tbody> <tr> <td>Text </td> <td style= "text-align: right;">Wert</td> <td style= "text-align: right;">Wert</td> <td style= "text-align: center;">Wert</td> </tr> <tr> <td>Text </td> <td style= "text-align: right;">Wert</td> <td style= "text-align: right;">Wert</td> <td style= "text-align: center;">Wert</td> </tr> <tr> <td>Text </td> <td style= "text-align: right;">Wert</td> <td style= "text-align: right;">Wert</td> <td style= "text-align: center;">Wert</td> </tr> </tbody> </table> </div> <div class="col-xs-12" style= "text-align: center;"> hier steht ein Text </div> </div> Es kann sein, dass dadurch schon die Zeilen eine unterschiedliche Farbe bekommen, wenn nichgt kann man das einfach im Style Editor unter Allgemein -> Tabelle -> "Hintergrund gerade Zeile" und "Hintergrund ungerade Zeile" festlegen.
Hi Barbara habe es mit deinem code gemacht jetzt schaut es schon viel besser aus und das mit dem grau weiss meintest du über SE. Aber wie kriege ich ganz unten den text untereinander also wo der * und das† hätte ih gerne untereinander und am besten noch eine Linie durchziehen das es abgetrennt ist von den Nährwerten HTML: <h1>Nährwerttabelle</h1> <div class="row"> <div class="col-xs-12 col-lg-8"> <table class="table table-striped table-features"> <thead> <tr> <th style="font-size:16px; text-align: left; text-transform: unset;">Nährwerte</th> <th style="font-size:16px; text-align: right; text-transform: unset;">pro 100g</th> <th style="font-size:16px; text-align: right; text-transform: unset;">pro Portion (15g)</th> <th style="font-size:16px; text-align: center; text-transform: unset;">pro Portion %RI(DV)</th> </tr> </thead> <tbody> <tr> <td>Energie </td> <td style= "text-align: right;"><0.1 g</td> <td style= "text-align: right;"><0.1 g</td> <td style= "text-align: center;">**</td> </tr> <tr> <td>Fette </td> <td style= "text-align: right;"><0.1 g</td> <td style= "text-align: right;"><0.1 g</td> <td style= "text-align: center;">**</td> </tr> <tr> <td>-davon gesättigte </td> <td style= "text-align: right;"><0.1 g</td> <td style= "text-align: right;"><0.1 g</td> <td style= "text-align: center;">**</td> </tr> <tr> <td>Kohlenhydrate </td> <td style= "text-align: right;"><0.1 g</td> <td style= "text-align: right;"><0.1 g</td> <td style= "text-align: center;">**</td> </tr> <tr> <td>-davon Zucker </td> <td style= "text-align: right;"><0.1 g</td> <td style= "text-align: right;"><0.1 g</td> <td style= "text-align: center;">**</td> </tr> <tr> <td>Ballastoffe </td> <td style= "text-align: right;"><0.1 g</td> <td style= "text-align: right;"><0.1 g</td> <td style= "text-align: center;">**</td> </tr> <tr> <td>Eiweiß </td> <td style= "text-align: right;"><0.1 g</td> <td style= "text-align: right;"><0.1 g</td> <td style= "text-align: center;">**</td> </tr> <tr> <td>Salz </td> <td style= "text-align: right;"><0.1 g</td> <td style= "text-align: right;"><0.1 g</td> <td style= "text-align: center;">**</td> </tr> <tr> <td>L-Leucin </td> <td style= "text-align: right;">13333 mg</td> <td style= "text-align: right;">2000 mg</td> <td style= "text-align: center;">†</td> </tr> <tr> <td>L-Valin </td> <td style= "text-align: right;">11333 mg</td> <td style= "text-align: right;">1700 mg</td> <td style= "text-align: center;">†</td> </tr> <tr> <td>L-Isoleucin </td> <td style= "text-align: right;">10000 mg</td> <td style= "text-align: right;">1500 mg</td> <td style= "text-align: center;">†</td> </tr> <tr> <td>L-Lysin </td> <td style= "text-align: right;">10000 mg</td> <td style= "text-align: right;">1500 mg</td> <td style= "text-align: center;">†</td> </tr> <tr> <td>L-Phenylalanin </td> <td style= "text-align: right;">8666 mg</td> <td style= "text-align: right;">1300 mg</td> <td style= "text-align: center;">†</td> </tr> <tr> <td>L-Threonin </td> <td style= "text-align: right;">7333 mg</td> <td style= "text-align: right;">1100 m</td> <td style= "text-align: center;">†</td> </tr> <tr> <td>L-Methionin </td> <td style= "text-align: right;">4666 mg</td> <td style= "text-align: right;">700 mg</td> <td style= "text-align: center;">†</td> </tr> <tr> <td>L-Tryptophan </td> <td style= "text-align: right;">2666 mg</td> <td style= "text-align: right;">400 mg</td> <td style= "text-align: center;">†</td> </tr> </tbody> </table> </div> <div class="col-xs-12" style= "text-align: center;"> *Referenzmenge für einen durchschnittlichen Erwachsenen (8400 kj/2000 kcal) †RI (dv) Keine empfholene Referenzmenge oder Nährstoffbezugswert vorhanden </div> </div> Code: table { background-color: #ffffff; border-collapse: collapse; border: none; } thead { background-color: #eee; } tfoot { background-color: #fff; font-size: 80%; border-top: 1px solid #999; } td, th { text-align: left; padding: 0.5em 1em; }
ändere das einmal in Code: <div class="col-xs-12" style="text-align: center;">, <hr /> *Referenzmenge für einen durchschnittlichen Erwachsenen (8400 kj/2000 kcal)<br /> †RI (dv) Keine empfholene Referenzmenge oder Nährstoffbezugswert vorhanden </div>
Wo kommt denn das Komma plötzlich her...grübel, Das muss da natürlich weg; HTML: <div class="col-xs-12" style="text-align: center;"> <hr /> *Referenzmenge für einen durchschnittlichen Erwachsenen (8400 kj/2000 kcal)<br /> †RI (dv) Keine empfholene Referenzmenge oder Nährstoffbezugswert vorhanden </div> ist es denn sonst so. wie Du es haben wolltest?
also so schaut es auf dem pc aus und so mobil mobil find ich eigtl perfekt nur pc ragt es ein bisschen aus
Dann ändere einmal die Zeile <div class="col-xs-12" style="text-align: center;"> in Code: <div class="col-xs-12 col-lg-8" style="text-align: center;">
Hi Barbara besteht die Möglichkeit dort eine Linie einzubauen? da wo ich es markiert habe falls nicht wenigstens die Schrift dick?
Wenn es für eine Zeile gelten soll: HTML: <tr style="font-weight: bold; border-bottom: 2px solid #666;"> <td>Text </td> <td>Text </td> </tr> mit font-weight: bold; wird der Text fett und border-bottom: 2px solid #666; setzt eine 2px Linie
Code: <tr> <td colspan="2">Gesamt Vitamine ...</td> </tr> mit dem tr erstellst die Zeile der Tabelle und mit dem td die Zelle in der Zeile der Tabelle... und wen du z.B. zwei Zellen zu einer zusammen fügen möchtest dann ist der o.g. Code der passende Schau dir mal ein paar FAQs zum erstellen von Tabellen an
Habe noch mal eine frage bezüglich der Tabelle. Habe das Problem ich habe ein Artikel mit 5 verschiedenen Geschmäckern und alle 5 Artikel haben auch 5 verschiedene Nährwerte. Die frage ist jetzt wie kann ich alle 5 einfügen kann man irgendwie auf ein Button klicken das dann die Tabelle kommt zb ich wähle aus Vanille dann kommt die Tabelle ich wähle aus Apfel dann kommt die Tabelle?
Du kannst für jede Geschmacksrichtung einen eigenen Tab machen, oder einen Tab mit Nährwerten und darin 5 Tabellen, könnte man mit einem Anker verlinken, denke ich.
okay und wie füge ich so einen Anker hinzu? weil ich habe 6 Geschmäcker und wenn ich da 6 taps mache ist das bisschen viel glaub ich
Gehe in den Quellcode des Tabs und schreibe: <a href="#Tabelle1">Geschmack 1</a><br /> <a href="#Tabelle2">Geschmack 2</a><br /> <a href="#Tabelle3">Geschmack 3</a><br /> ... Wenn Du die Tabellen Schreibst setzt Du das Ankerziel über die Tabelle, z.B. so: <h3 id="Tabelle1">Geschmack 1</h3> <div class="row"> Deine Tabelle..... Dann hättest Du den Geschmack als h3 Überschrift.
Hi Barbara hab ich da irgendwo einen Fehler drinnen? weil er zeigt mir alle 3 Tabellen an und unten die 3 Geschmäcker wo ich drauf klicken kann. Hier wäre der code zur Übersicht: HTML: <h3 id="Tabelle1">Geschmack 1</h3> <div class="row"> <div class="row"> <div class="col-xs-12 col-lg-8"> <table class="table table-striped table-features"> <thead> <tr> <th style="font-size:16px; text-align: left; text-transform: unset;"><span style="color:#000000;">Nährwerte</span></th> <th style="font-size:16px; text-align: right; text-transform: unset;"><span style="color:#000000;">pro 100g</span></th> <th style="font-size:16px; text-align: right; text-transform: unset;"><span style="color:#000000;">1 Portion (15g)</span></th> <th style="font-size:16px; text-align: right; text-transform: unset;"><span style="color:#000000;">2 Portionen (30g)</span></th> </tr> </thead> <tbody> <tr> <td>Gesamt Vitamine und Mineralien:</td> </tr> <tr> <td>Niacin</td> <td style="text-align: right;">160 mg</td> <td style="text-align: right;">24 mg</td> <td style="text-align: right;">48 mg</td> </tr> <tr> <td>Folsäure</td> <td style="text-align: right;">333.3 mg</td> <td style="text-align: right;">50 mg</td> <td style="text-align: right;">100 mg</td> </tr> <tr> <td>Vitamin B6</td> <td style="text-align: right;">5.3 mg</td> <td style="text-align: right;">0.8 mg</td> <td style="text-align: right;">1.6 mg</td> </tr> <tr> <td>Vitamin B12</td> <td style="text-align: right;">333.33 mg</td> <td style="text-align: right;">2.5 µg</td> <td style="text-align: right;">5 µg</td> </tr> <tr> <td>Pump Matrix:</td> </tr> <tr> <td>Citrullin Malat</td> <td style="text-align: right;">30000 mg</td> <td style="text-align: right;">4500 mg</td> <td style="text-align: right;">9000 mg</td> </tr> <tr> <td>Arginin HCL</td> <td style="text-align: right;">13333 mg</td> <td style="text-align: right;">2000 mg</td> <td style="text-align: right;">4000 mg</td> </tr> <tr> <td>L-Glutathion</td> <td style="text-align: right;">1333 mg</td> <td style="text-align: right;">200 mg</td> <td style="text-align: right;">400 mg</td> </tr> <tr> <td>Rote Beete Wurzelpulver</td> <td style="text-align: right;">2000 mg</td> <td style="text-align: right;">300 mg</td> <td style="text-align: right;">600 mg</td> </tr> <tr> <td>Fokus Energie Matrix:</td> </tr> <tr> <td>Taurin</td> <td style="text-align: right;">10000 mg</td> <td style="text-align: right;">1500 mg</td> <td style="text-align: right;">3000 mg</td> </tr> <tr> <td>N-Acetyl-L-Tyrosin</td> <td style="text-align: right;">6667 mg</td> <td style="text-align: right;">1000 mg</td> <td style="text-align: right;">2000 mg</td> </tr> <tr> <td>Kakao Extrakt</td> <td style="text-align: right;">3333 mg</td> <td style="text-align: right;">500 mg</td> <td style="text-align: right;">1000 mg</td> </tr> <tr> <td>-davon Theobromin</td> <td style="text-align: right;">500 mg</td> <td style="text-align: right;">75 mg</td> <td style="text-align: right;">150 mg</td> </tr> <tr> <td>Cordyceps Sinensis</td> <td style="text-align: right;">3333 mg</td> <td style="text-align: right;">500 mg</td> <td style="text-align: right;">1000 mg</td> </tr> <tr> <td>Rhodiola Rosea Extrakt</td> <td style="text-align: right;">3333 mg</td> <td style="text-align: right;">500 mg</td> <td style="text-align: right;">1000 mg</td> </tr> <tr> <td>Alpha GPC</td> <td style="text-align: right;">2000 mg</td> <td style="text-align: right;">300 mg</td> <td style="text-align: right;">600 mg</td> </tr> <tr> <td>Koffein</td> <td style="text-align: right;">1667 mg</td> <td style="text-align: right;">250 mg</td> <td style="text-align: right;">500 mg</td> </tr> <tr> <td>DMAE</td> <td style="text-align: right;">1667 mg</td> <td style="text-align: right;">250 mg</td> <td style="text-align: right;">500 mg</td> </tr> <tr> <td>Silberweidenrindenextrakt</td> <td style="text-align: right;">333 mg</td> <td style="text-align: right;">50 mg</td> <td style="text-align: right;">100 mg</td> </tr> <tr> <td>Ginko Bilooa Extrakt</td> <td style="text-align: right;">333 mg</td> <td style="text-align: right;">50 mg</td> <td style="text-align: right;">100 mg</td> </tr> <tr> <td>Guarana Fruchtextrakt</td> <td style="text-align: right;">333 mg</td> <td style="text-align: right;">50 mg</td> <td style="text-align: right;">100 mg</td> </tr> <tr> <td>L-Theanin</td> <td style="text-align: right;">333 mg</td> <td style="text-align: right;">50 mg</td> <td style="text-align: right;">100 mg</td> </tr> <tr> <td>Absorptionsverstärker:</td> </tr> <tr> <td>Piperin</td> <td style="text-align: right;">66.7 mg</td> <td style="text-align: right;">5 mg</td> <td style="text-align: right;">10 mg</td> </tr> <tr> <td>Capsaicin</td> <td style="text-align: right;">133 mg</td> <td style="text-align: right;">10 mg</td> <td style="text-align: right;">20 mg</td> </tr> </tbody> </table> </div> <div class="col-xs-12 col-lg-8" style="text-align: center;"> <hr />*Referenzmenge für einen durchschnittlichen Erwachsenen (8400 kj/2000 kcal)<br /> †RI (dv) Keine empfholene Referenzmenge oder Nährstoffbezugswert vorhanden </div> </div> <h3 id="Tabelle2">Geschmack 2</h3> <div class="row"> <div class="row"> <div class="col-xs-12 col-lg-8"> <table class="table table-striped table-features"> <thead> <tr> <th style="font-size:16px; text-align: left; text-transform: unset;"><span style="color:#000000;">Nährwerte</span></th> <th style="font-size:16px; text-align: right; text-transform: unset;"><span style="color:#000000;">pro 100g</span></th> <th style="font-size:16px; text-align: right; text-transform: unset;"><span style="color:#000000;">1 Portion (15g)</span></th> <th style="font-size:16px; text-align: right; text-transform: unset;"><span style="color:#000000;">2 Portionen (30g)</span></th> </tr> </thead> <tbody> <tr> <td>Gesamt Vitamine und Mineralien:</td> </tr> <tr> <td>Niacin</td> <td style="text-align: right;">160 mg</td> <td style="text-align: right;">24 mg</td> <td style="text-align: right;">48 mg</td> </tr> <tr> <td>Folsäure</td> <td style="text-align: right;">333.3 mg</td> <td style="text-align: right;">50 mg</td> <td style="text-align: right;">100 mg</td> </tr> <tr> <td>Vitamin B6</td> <td style="text-align: right;">5.3 mg</td> <td style="text-align: right;">0.8 mg</td> <td style="text-align: right;">1.6 mg</td> </tr> <tr> <td>Vitamin B12</td> <td style="text-align: right;">333.33 mg</td> <td style="text-align: right;">2.5 µg</td> <td style="text-align: right;">5 µg</td> </tr> <tr> <td>Pump Matrix:</td> </tr> <tr> <td>Citrullin Malat</td> <td style="text-align: right;">30000 mg</td> <td style="text-align: right;">4500 mg</td> <td style="text-align: right;">9000 mg</td> </tr> <tr> <td>Arginin HCL</td> <td style="text-align: right;">13333 mg</td> <td style="text-align: right;">2000 mg</td> <td style="text-align: right;">4000 mg</td> </tr> <tr> <td>L-Glutathion</td> <td style="text-align: right;">1333 mg</td> <td style="text-align: right;">200 mg</td> <td style="text-align: right;">400 mg</td> </tr> <tr> <td>Rote Beete Wurzelpulver</td> <td style="text-align: right;">2000 mg</td> <td style="text-align: right;">300 mg</td> <td style="text-align: right;">600 mg</td> </tr> <tr> <td>Fokus Energie Matrix:</td> </tr> <tr> <td>Taurin</td> <td style="text-align: right;">10000 mg</td> <td style="text-align: right;">1500 mg</td> <td style="text-align: right;">3000 mg</td> </tr> <tr> <td>N-Acetyl-L-Tyrosin</td> <td style="text-align: right;">6667 mg</td> <td style="text-align: right;">1000 mg</td> <td style="text-align: right;">2000 mg</td> </tr> <tr> <td>Kakao Extrakt</td> <td style="text-align: right;">3333 mg</td> <td style="text-align: right;">500 mg</td> <td style="text-align: right;">1000 mg</td> </tr> <tr> <td>-davon Theobromin</td> <td style="text-align: right;">500 mg</td> <td style="text-align: right;">75 mg</td> <td style="text-align: right;">150 mg</td> </tr> <tr> <td>Cordyceps Sinensis</td> <td style="text-align: right;">3333 mg</td> <td style="text-align: right;">500 mg</td> <td style="text-align: right;">1000 mg</td> </tr> <tr> <td>Rhodiola Rosea Extrakt</td> <td style="text-align: right;">3333 mg</td> <td style="text-align: right;">500 mg</td> <td style="text-align: right;">1000 mg</td> </tr> <tr> <td>Alpha GPC</td> <td style="text-align: right;">2000 mg</td> <td style="text-align: right;">300 mg</td> <td style="text-align: right;">600 mg</td> </tr> <tr> <td>Koffein</td> <td style="text-align: right;">1667 mg</td> <td style="text-align: right;">250 mg</td> <td style="text-align: right;">500 mg</td> </tr> <tr> <td>DMAE</td> <td style="text-align: right;">1667 mg</td> <td style="text-align: right;">250 mg</td> <td style="text-align: right;">500 mg</td> </tr> <tr> <td>Silberweidenrindenextrakt</td> <td style="text-align: right;">333 mg</td> <td style="text-align: right;">50 mg</td> <td style="text-align: right;">100 mg</td> </tr> <tr> <td>Ginko Bilooa Extrakt</td> <td style="text-align: right;">333 mg</td> <td style="text-align: right;">50 mg</td> <td style="text-align: right;">100 mg</td> </tr> <tr> <td>Guarana Fruchtextrakt</td> <td style="text-align: right;">333 mg</td> <td style="text-align: right;">50 mg</td> <td style="text-align: right;">100 mg</td> </tr> <tr> <td>L-Theanin</td> <td style="text-align: right;">333 mg</td> <td style="text-align: right;">50 mg</td> <td style="text-align: right;">100 mg</td> </tr> <tr> <td>Absorptionsverstärker:</td> </tr> <tr> <td>Piperin</td> <td style="text-align: right;">66.7 mg</td> <td style="text-align: right;">5 mg</td> <td style="text-align: right;">10 mg</td> </tr> <tr> <td>Capsaicin</td> <td style="text-align: right;">133 mg</td> <td style="text-align: right;">10 mg</td> <td style="text-align: right;">20 mg</td> </tr> </tbody> </table> </div> <div class="col-xs-12 col-lg-8" style="text-align: center;"> <hr />*Referenzmenge für einen durchschnittlichen Erwachsenen (8400 kj/2000 kcal)<br /> †RI (dv) Keine empfholene Referenzmenge oder Nährstoffbezugswert vorhanden </div> </div> <a href="#Tabelle1">Geschmack 1</a><br /> <a href="#Tabelle2">Geschmack 2</a><br /> <a href="#Tabelle3">Geschmack 3</a>