Tabellen-Aussehen erstellen

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

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:

        .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;
        }

    <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>

Viel Erfolg und beste Grüße, Ulrich

Kleiner Tipp dazu: Wenn jedes Feld einen eigenen Rand hat, werden die Linien zwischen den Zellen doppelt so dick wie außen. Gleichmäßige Gitternetzlinien wie in einer Tabellenkalkulation bekommt man einfacher, wenn der Container die Linienfarbe als Hintergrund bekommt und die Zellen weiß sind:

.grid-3x3 { display: inline-grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); gap: 1px; background: #999; border: 1px solid #999; }

.grid-item { background: #fff; }

Und wenn es wirklich Tabellendaten sind, geht auch eine normale table mit border-collapse: collapse.