Tabellen-Aussehen erstellen

Ron

Hallo von einem Neuling in diesem Forum!

Ich hoffe, dass ich hier eine Lösung für mein ansich wohl einfaches Problem bekomme:

Ich möchte per HTML - ähnlich wie in Tabellenkalkulations-Programmen - eine drei-mal-drei-Tabellle mit erkennbaren Gitternetzlinien erstellen.

Nach Grid habe ich auch schon geguckt, aber sehe nach dem Anlegen dort auch keine Gitternetzlinien.

m.scatello

Die Frage ist, was für Daten willst du darstellen? Wenn es um tabellarische Daten geht, ist eine Tabelle ok, ansonsten nicht.

Ansonsten google füttern mit diesem Input:

CSS Grid mit 3x3 Feldern und Rahmen, die direkt nebeneinnander sind

Sempervivum

Hallo Ron und willkommen im Forum!

Mit einem Gridlayout bist Du schon auf dem richtigen Weg. Du brauchst nur den Grid-Elementen einen Rand zu geben, dann solltest Du das Ergebnis bekommen, was Du dir wünschst:

Code

        .grid-3x3 {
            display: inline-grid;
            grid-template-columns: 200px 200px 200px;
            grid-template-rows: 200px 200px 200px;
            border: 2px solid lightblue;
        }

        .grid-item {
            border: 2px solid lightblue;
        }

Code

    <div class="grid-3x3">
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
    </div>

Alles anzeigen

Viel Erfolg und beste Grüße, Ulrich

Tabellen-Aussehen erstellen

Jetzt mitmachen!

Tags