Tabelle mit einigen Linien

[augustq]

Hi,

ich erstelle gerade eine Tabelle und benötige zwischen manchen Zeilen eine Linie als Trenner. Wie mache ich das?

Also so etwas:

Header
darunter eine weitere Zeile
Linie
Zeile mit Bildern
Zeile mit Bildern
Linie
usw.

Also nicht eine Linie zwischen jeder Zeile sondern nur, wenn von mir gewünscht.

Ein kleiner Tipp bitte. Danke AugustQ

[TS]

Hello August,

ich erstelle gerade eine Tabelle und benötige zwischen manchen Zeilen eine Linie als Trenner. Wie mache ich das?

Also so etwas:

Header
darunter eine weitere Zeile
Linie
Zeile mit Bildern
Zeile mit Bildern
Linie
usw.

Also nicht eine Linie zwischen jeder Zeile sondern nur, wenn von mir gewünscht.

Ein kleiner Tipp bitte. Danke AugustQ

Ich setze voraus, dass Du HTML und CSS nutzen möchtest. Damit ist es durchaus möglich, deine momentanen Wünsche zu erfüllen.

Bitte lass uns aber vorher noch darüber nachdenken, ob Du wirklich eine "Tabelle" benötigst, oder ob die Darstellung auf unterschiedlichen Displays ggf. angepasst werden muss.

Eine Tabelle sollte man nur nutzen, wenn tatsächlich (mindestens) wiederkehrende zweidimensionale Zusammenhänge dargestellt werden sollen.

Beschreibe doch bitte die Aufgabe noch etwas genauer, damit wir Dir am Ende nicht die falschen Tipps geben.

Glück Auf
Tom vom Berg

[augustq]

Hi,

was ich will:

• ich mache eine Übersicht übe das Thema: ich schreibe eine Mail
• in der linken Spalte stehen die Schritte für unverschlüsselte Mails
• in der rechten Spalte stehen die Schritte für verschlüsselte Mails
• dies alles sind Hardcopies
• dazwischen gibt es auch Textzeilen

und um die einzelnen Bereich abzugrenzen wollte ich Linien einfügen.

Schönen Gruß AugustQ

PS: ich komme weder aus dem Bereich Web noch aus dem Bereich Grafik. Mein Job ist programmieren.

[Matthias Scharwies]

Servus!

was ich will:

• ich mache eine Übersicht über das Thema: ich schreibe eine Mail
• in der linken Spalte stehen die Schritte für unverschlüsselte Mails
• in der rechten Spalte stehen die Schritte für verschlüsselte Mails
• dies alles sind Hardcopies
• dazwischen gibt es auch Textzeilen

Oh, das ist keine Tabelle, sondern ein 2-Spaltenlayout:

<header>
  <h1>Mails schreiben</h1>
  ...
</header>
<section>
  <h1>unverschlüsselte Mails</h1>
</section>
<section>
  <h1>verschlüsselte Mails</h1>
</section>

Das kannst du mit CSS stylen:

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

header {
  grid-column: span 2;
}

Besser wäre es, die 2-Spaltigkeit mit media queries aber erst ab einer gewissen Breite einzurichten, da diese auf Handys blöd aussieht.

und um die einzelnen Bereich abzugrenzen wollte ich Linien einfügen.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

<header>
  <h1>Mails schreiben</h1>
  ...
</header>
<section>
  <h1>unverschlüsselte Mails</h1>
</section>
<section>
  <h1>verschlüsselte Mails</h1>
</section>

Die Überschriften in den sections müssen h2 sein.

Besser wäre es, die 2-Spaltigkeit mit media queries aber erst ab einer gewissen Breite einzurichten, da diese auf Handys blöd aussieht.

Noch besser wäre, das ohne media queries zu tun.

LLAP 🖖

[Matthias Scharwies]

Die Überschriften in den sections müssen h2 sein.

Stimmt!

Besser wäre es, die 2-Spaltigkeit mit media queries aber erst ab einer gewissen Breite einzurichten, da diese auf Handys blöd aussieht.

Noch besser wäre, das ohne media queries zu tun.

Auch richtig.

Herzliche Grüße

Matthias Scharwies

[TS]

Hello,

@@Matthias Scharwies

<header>
  <h1>Mails schreiben</h1>
  ...
</header>
<section>
  <h1>unverschlüsselte Mails</h1>
</section>
<section>
  <h1>verschlüsselte Mails</h1>
</section>

Die Überschriften in den sections müssen h2 sein.

Besser wäre es, die 2-Spaltigkeit mit media queries aber erst ab einer gewissen Breite einzurichten, da diese auf Handys blöd aussieht.

Noch besser wäre, das ohne media queries zu tun.

Mir dünkt, dass das die Anforderungen noch nicht trifft. Soweit ich den OP verstanden habe, soll eine Gegenüberstellung vorgenommen werden. Deshalb dachte er sofort an eine Tabelle. Es sollen also bestimmte Absätze miteinander korrespondieren, sozusagen synchronisiert werden. Das funktioniert bei einer Tabelle quasi automatisch.

Was ist aber nun, wenn der Viewport zu schmal wird? Dann muss ich die Tabellenstruktur aufbrechen und die korrespondierenden Absätze kämmen, also erst einige von den "Linken", dann die korrespondierenden von den "Rechten". Damit man die Übersicht behält, hilft Farbe. Dann kommt der nächste Hauptabschnitt und das Spiel wiederholt sich.

Wie baut man nun eine Quasitabelle, die bei Bedarf zur sequentiellen Liste mutiert?

Wenn ich den OP richtig verstanden habe, möge sich bitte melden. :-)

Glück Auf
Tom vom Berg

[Matthias Apsel]

Hallo TS,

Wenn ich den OP richtig verstanden habe, möge sich bitte melden. :-)

Ich habe den OP auch so verstanden.

Bis demnächst
Matthias

[TS]

Hello Matthias,

Wenn ich den OP richtig verstanden habe, möge er sich bitte melden. :-)

Ich habe den OP auch so verstanden.

Ich dachte da eher an eine Lösung mit Flexbox. Leider verstehe ich zu wenig davon. Gunnars Beispiel zeigt ja leider nur ein Absatzpaar. Wenn man da nun das nächste anhängt, weiß ich nicht, wie man die Sychronisation aufrecht erhalten kann.

Glück Auf
Tom vom Berg

[Auge]

Hallo

Ich dachte da eher an eine Lösung mit Flexbox. Leider verstehe ich zu wenig davon. Gunnars Beispiel zeigt ja leider nur ein Absatzpaar. Wenn man da nun das nächste anhängt, weiß ich nicht, wie man die Sychronisation aufrecht erhalten kann.

In einer Tabelle gäbe es die automatisch, da sich beide Zellen in einer gemeinsamen Zeile befinden. In Gunnars Code kann man ein weiteres, die sections bindendes Element um diese herum legen. Dann gehören sie schon einmal semantisch zusammen.

Tschö, Auge

[TS]

Hello,

Hallo

Ich dachte da eher an eine Lösung mit Flexbox. Leider verstehe ich zu wenig davon. Gunnars Beispiel zeigt ja leider nur ein Absatzpaar. Wenn man da nun das nächste anhängt, weiß ich nicht, wie man die Sychronisation aufrecht erhalten kann.

In einer Tabelle gäbe es die automatisch, da sich beide Zellen in einer gemeinsamen Zeile befinden. In Gunnars Code kann man ein weiteres, die sections bindendes Element um diese herum legen. Dann gehören sie schon einmal semantisch zusammen.

Das könnte gehen. Die Zusammengehörigkeit müsste man ja ohnehin manuell festlegen. Und dann müssten die "Rechten" auch per CSS automatisch nach unten rutschen können, wenn der Viewport zu schmal wird.

1P4Y :-)

Glück Auf
Tom vom Berg

[Matthias Scharwies]

Servus!

Hi,

ich erstelle gerade eine Tabelle und benötige zwischen manchen Zeilen eine Linie als Trenner. Wie mache ich das?

Wie @TS bereits sagte, wenn Du tabellarische Daten hast, kannst du eine HTML-Tabelle verwenden und den Tabellenzellen einen Rand geben. Z.B. so:

<style>
  table, th, td { 
    border: 1px solid;
    border-collapse: collapse; 
  }
</style> 
</head>
<body>
    <table>
      <caption>Zusammenfallende Rahmen</caption>
      <tbody>
        <tr>
          <td>Feld 1</td>  
          <td>Feld 2</td>  
          <td>Feld 3</td>  
        </tr>
        <tr>
          <td>Feld 4</td>  
          <td>Feld 5</td>  
          <td>Feld 6</td>  
        </tr>
      </tbody>
    </table>

Einer Reihe class="summe" könntest du dann einen breiteren, oberen Rand geben:

table tr.summe {
  border-top: 2px solid red;
}

Wenn es aber eine normale Seite mit Bildern wäre, würde ich diese eher mit grid positionieren

Herzliche Grüße

Matthias Scharwies

[augustq]

Hi,

Danke für die Hinweise. Das sehe ich mir morgen an.

Schönen Gruß AugustQ

[Rolf B]

Hallo Matthias,

kann man so machen, muss man aber eventuell nicht.

Wenn die Table mit collapsed borders arbeitet (CSS: border-collapse: collapse), dann kann man die für eine logische Strukturierung einer Table vorgesehenen Elemente thead, tbody und tfoot verwenden. Bei collapsed borders sind border-Angaben, die man für diese Elemente setzt, sichtbar. Bei separate borders nicht.

Wenn die Table mehrere Bereiche hat, zwischen denen Striche zu setzen sind, kann man auch mehrere tbody-Elemente verwenden. thead und tfoot sind nur einmal erlaubt.

Das heißt:

benötige zwischen manchen Zeilen eine Linie als Trenner

• die Überschrift-tr in ein thead einschließen
• die Bilder-tr in tbody einschließen. Sollen zwischen bestimmten Bilder-tr Striche sein, an der Stelle einen neuen tbody beginnen
• nach Bedarf noch einen tfoot-Bereich hinzufügen.

Und dann für thead und tbody ein border-bottom setzen.

Wenn border-collapse:separate verwendet werden soll, dann erscheinen die borders auf thead/tbody/tfoot nicht. Man kann sich dann so behelfen:

thead tr:last-of-type th  { 
   border-bottom: 1px solid red;
}

tbody tr:last-of-type td { 
   border-bottom: 1px solid red;
}

bzw. man verwendet :first-of-type, wenn border-top gebraucht wird. Dieser Behelf funktioniert für beider border-collapse Modi, man kann ihn also auch generell verwenden.

Rolf

[marctrix]

Hej Rolf,

Wenn die Table mit collapsed borders arbeitet (CSS: border-collapse: collapse), dann kann man die für eine logische Strukturierung einer Table vorgesehenen Elemente thead, tbody und tfoot verwenden.

aber nur wenn es sich tatsächlich um tabellarische Daten handelt.

Marc

[Gunnar Bittersmann]

@@marctrix

Wenn die Table mit collapsed borders arbeitet (CSS: border-collapse: collapse), dann kann man die für eine logische Strukturierung einer Table vorgesehenen Elemente thead, tbody und tfoot verwenden.

aber nur wenn es sich tatsächlich um tabellarische Daten handelt.

Was die Frage aller Fragen ist.

LLAP 🖖

[Gunnar Bittersmann]

@@augustq

Als angemeldeter Nutzer kann ich alle Postings dieses Threads lesen – bis auf meins von 20:21. Auch die Nested-Ansicht funktioniert nicht.

Als nichtangemeldeter Nutzer kommt bei jedem Posting die Fehlermeldung.

@Christian Kruse⁠?

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

dieser Bug hat mich meine Frühstückspause gekostet 😜

✅ fixed

LG,
CK

[JürgenB]

Hallo Christian,

dieser Bug hat mich meine Frühstückspause gekostet 😜

✅ fixed

und wer holt jetzt die Krümel aus der Tastatur?😀

Gruß
Jürgen

[Christian Kruse]

Hallo JürgenB,

und wer holt jetzt die Krümel aus der Tastatur?😀

Müsli krümmelt nicht 😂

LG,
CK

[JürgenB]

Hallo Christian,

Hallo JürgenB,

und wer holt jetzt die Krümel aus der Tastatur?😀

Müsli krümmelt nicht 😂

und wer holt jetzt die Müslipampe aus der Tastatur? 🥣

Gruß
Jürgen

[Christian Kruse]

Hallo JürgenB,

und wer holt jetzt die Krümel aus der Tastatur?😀

Müsli krümmelt nicht 😂

und wer holt jetzt die Müslipampe aus der Tastatur? 🥣

Computer! Computer? Hallo Computer! … Tastatur, wie rückständig!

LG,
CK

[Gunnar Bittersmann]

@@JürgenB

und wer holt jetzt die Krümel aus der Tastatur?😀

Müsli krümmelt nicht 😂

und wer holt jetzt die Müslipampe aus der Tastatur? 🥣

Die guten Macbook Pro, die haben eine Wanne unter der Tastatur. Die Suppe kommt nicht bis zur Platine, das Ding läuft weiter.

Fängt bloß etwas an zu müffeln, wenn die Milch sauer wird.

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

Die guten Macbook Pro, die haben eine Wanne unter der Tastatur. Die Suppe kommt nicht bis zur Platine, das Ding läuft weiter.

Sorry, kein Macbook Pro. Ein iMac Pro 😍

LG,
CK

[TS]

Hello CK,

weil es so schön zum Thema des OP passt:

dieser Bug hat mich meine Frühstückspause gekostet 😜

Vielleicht kannst Du mir ja in der Mittagspause Nachhilfe geben, wieso Tabellen im Markdown nicht mehr funktionieren, oder was man tun muss?

Aber nur, wenn es keine (Div-)Suppe gibt :-p

Glück Auf
Tom vom Berg

[Christian Kruse]

Hallo TS,

Vielleicht kannst Du mir ja in der Mittagspause Nachhilfe geben, wieso Tabellen im Markdown nicht mehr funktionieren, oder was man tun muss?

Tabellen funktionieren durchaus noch. Eine kurze Beschreibung findet sich auf Github.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Tabellen funktionieren durchaus noch.

Nicht all die Tabellen im Archiv.

LLAP 🖖

[robertroth]

Lieber CK, lieber Tom, liebe Mitdenker, liebe Wissende,

Vielleicht kannst Du mir ja in der Mittagspause Nachhilfe geben, wieso Tabellen im Markdown nicht mehr funktionieren, oder was man tun muss?

Tabellen funktionieren durchaus noch. Eine kurze Beschreibung findet sich auf Github.

Ich finde Toms Einwurf überhaupt nicht lächerlich!

Im SelfHTML-Wiki steht nämlich noch etwas gant Anderes.

Wo finde ich das Normalo-verständliche Change-Log zu Cramdown/Markdown oder was hier verwendet wird. Dann würde ich die Wikiseiten anpassen. Aber bitte vorher sichern! Ich weiß ja nicht, ob es nicht am Ende alles rückgängig gemacht wird, damit das Archiv nicht kaputt geht!?

Spirituelle Grüße
Euer Robert

[Christian Kruse]

Hallo robertroth,

Ich finde Toms Einwurf überhaupt nicht lächerlich!

Wie kommst du darauf, dass das jemand „lächerlich“ findet? Ich habe nur klargestellt, dass Tabellen durchaus noch funktionieren. Mit einem Link auf die Syntax-Beschreibung.

Im SelfHTML-Wiki steht nämlich noch etwas gant Anderes.

Das ist möglich. Dann hat es wohl noch keiner angepasst.

Wo finde ich das Normalo-verständliche Change-Log zu Cramdown/Markdown oder was hier verwendet wird.

Das gibt es nicht. Selbst erarbeiten. Hier wird, wie ich das bereits schonmal gesagt habe, Markdown-It mit ein paar Plugins verwendet. Siehe Github.

LG,
CK

[robertroth]

Lieber CK, liebe Wissende,

Im SelfHTML-Wiki steht nämlich noch etwas gant Anderes.

Das ist möglich. Dann hat es wohl noch keiner angepasst.

Das hatte ich doch gerade angeboten.

Wo finde ich das Normalo-verständliche Change-Log zu Cramdown/Markdown oder was hier verwendet wird.

Das gibt es nicht. Selbst erarbeiten.

Das finde ich jetzt etwas befremdlich.
Ok, ich werde es morgen aber trotzdem mal versuchen, die aktuell gültige Fassung ins Wiki zu bringen.

Und wie es der Zufall will, hat da doch gerade jemand nach einem CSS-Layout für Gegenüberstellungen gefragt und durch Zusammenarbeit von @Gunnar Bittersmann und @Auge eine praktikable Lösung erfahren.

Schade nur, dass die für das Wiki vermutlich nicht gilt?!

<frust>Man kann Mitarbeit auch einfacher unterbinden</frust>

Spirituelle Grüße
Euer Robert

[Matthias Apsel]

Hallo robertroth,

<frust>Man kann Mitarbeit auch einfacher unterbinden</frust>

??

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Christian Kruse

Ich habe nur klargestellt, dass Tabellen durchaus noch funktionieren.

Nein, die vorhandenen funktionieren nicht mehr.

Hier wird, wie ich das bereits schonmal gesagt habe, Markdown-It mit ein paar Plugins verwendet.

Warum nicht mehr Kramdown?

Siehe Github.

Kein README.md.

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

Ich habe nur klargestellt, dass Tabellen durchaus noch funktionieren.

Nein, die vorhandenen funktionieren nicht mehr.

Du solltest sinnentnehmendes Lesen üben.

Hier wird, wie ich das bereits schonmal gesagt habe, Markdown-It mit ein paar Plugins verwendet.

Warum nicht mehr Kramdown?

Weil Kramdown Ruby only ist.

Siehe Github.

Kein README.md.

View the source, Luke.

LG,
CK

[augustq]

Hi,

Danke für die vielen Hinweise.

Ich habe jetzt einiges ausprobiert und bin auf folgende Lösung gestossen: <tr style="border-bottom:2px solid black">

und ich denke, ich werde es auch so machen.

Schönen Gruß AugustQ

[Rolf B]

Hallo AugustQ,

für welches Tier arbeitet der Mensch am meisten?

Für die Katz.

Weil:

• Tabellenlayout wurde als „nicht das Mittel der Wahl“ festgestellt.
• Und wenn es denn doch sein soll, ist der Einsatz von gruppierenden Elementen wie thead, tbody und tfoot empfehlenswert. Mit diesen Elementen und passenden CSS Selektoren kann man die passenden Stellen für das Setzen von Rahmen vorgeben. Und sie bringen Semantik mit, die dabei helfen, Assistenztechnologien einzusetzen
• Inline-Styles hat hier keiner vorgeschlagen. Warum wohl? Sie sind heutzutage das letzte Mittel der Wahl. Das vorletzte Mittel sind Klassen, mit denen spezielle Formatierungen markiert werden.

Wenn Du die im Thread gemachten Vorschläge nicht verstanden hast, ist das ja nicht schlimm. Man kann drüber reden. Eine Lösung mit Inline-Styles ist heute nur noch in Systemen, die CSS nicht unterstützen, sinnvoll (z.B. HTML Mail).

Rolf

[MudGuard]

Hi,

Eine Lösung mit Inline-Styles ist heute nur noch in Systemen, die CSS nicht unterstützen, sinnvoll (z.B. HTML Mail).

Nö. Wenn kein CSS unterstützt wird, sind inline-styles auch nicht sinnvoll.

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MudGuard,

na gut. CSS-Dateien. Und <style> Abschnitte auch nicht.

Rolf

[marctrix]

Hej augustq,

Ich habe jetzt einiges ausprobiert und bin auf folgende Lösung gestossen: <tr style="border-bottom:2px solid black">

und ich denke, ich werde es auch so machen.

Schade. Das ist die schlechteste aller hier genannten Lösungen…

Zumindest in Bezug auf:

• caching und damit
• Performance
• Zugänglichkeit
• Wartbarkeit
• Semantik
• Responsivität

Fast alles davon beeinträchtigt die SEO.

Marc