Ankündigung

Einklappen
Keine Ankündigung bisher.

[CSS] Tabellen anordnen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [CSS] Tabellen anordnen

    Was einfach klingt und im Grunde vermutlich auch ist bereitet mir gerade große Probleme.
    Ich hänge mal ein Bild an.
    tabellen.png
    Ich möchte nun, dass die Tabelle "Software" 10px unter der Tabelle "Allgemein" anfängt. Momentan orientiert sie sich ja an der Tabelle "System". Könnt ihr mir bitte sagen, wie das funktioniert?
    Ich packe mal den Code hier rein. Ich habe diesen etwas gekürzt, damit jetzt nicht jede Zeile der Tabelle drin ist. Sollte ja nicht nötig sein.
    HTML-Code:
    <!-- Anfang Hauptinhalt -->
                <?php $computer = readOneComputer($_GET['computerid']); ?>
                <div id="main">
                    <div class="headline">
                        Details von <?= htmlspecialchars($computer['computerNname']) ?>
                    </div>
    
                    <!-- Angang Leerzeile -->
                    <div class="leerzeile">
                    </div>
                    <!-- Ende Leerzeile -->
    
                    <!-- Anfang Allgemein -->
                    <div>
                        <table style="width:400px; float: left;">
                            <tr>
                                <th colspan="2"><span>Allgemein</span></th>
                            </tr>
                            <tr>
                                <td style="width: 150px;">Modell</td>
                                <td></td>
                            </tr>
                        </table>
                    </div>
                    <!-- Ende Allgemein -->
    
                    <!-- Anfang System -->
                    <div>
                        <table style="width:400px; margin-left: 410px;">
                            <tr>
                                <th colspan="2"><span>System</span></th>
                            </tr>
                            <tr>
                                <td style="width: 150px;">Betriebssystem</td>
                                <td></td>
                            </tr>
                        </table>
                    </div>
                    <!-- Ende System -->
    
                    <!-- Anfang Software -->
                    <div>
                        <table style="width:400px; float: left;">
                            <tr>
                                <th colspan="2"><span>Software</span></th>
                            </tr>
                            <tr>
                                <td style="width: 150px;">Citrix Workspace</td>
                                <td></td>
                            </tr>
                        </table>
                    </div>
                    <!-- Ende Software -->
    
                    <!-- Angang Leerzeile -->
                    <div class="leerzeile">
                    </div>
                    <!-- Ende Leerzeile -->
    
                    <!-- Anfang Monitor -->
                    <div>
                        <table style="width:400px; margin-left: 410px;">
                            <tr>
                                <th colspan="2"><span>Monitor</span></th>
                            </tr>
                            <tr>
                                <td style="width: 150px;">Modell</td>
                                <td></td>
                            </tr>
                        </table>
                    </div>
                    <!-- Ende Monitor -->                
    
                </div>
                <!-- Ende Hauptinhalt -->
    PHP 8.3
    MariaDB 10.6
    Symfony 6.4 (LTS)

  • #2
    Warum verwendest du Float? Das ist doch hier nur kontraprodukiv. Abstände steuerst du z.B. mit margin. Das sind aber CSS-Grundlagen.

    Kommentar


    • #3
      Zitat von Little Tester Beitrag anzeigen
      Ich möchte nun, dass die Tabelle "Software" 10px unter der Tabelle "Allgemein" anfängt. Momentan orientiert sie sich ja an der Tabelle "System". Könnt ihr mir bitte sagen, wie das funktioniert?
      Als erstes musst du dich mal von der Einheit Pixel verabschieden: die ist fast immer falsch, auch für deine Breitenangaben! Als nächstes solltest du dich vom float als Krücke zum Layouten lösen, beschäftige dich mit dem Thema grid, damit solltest du deine Tabellen wie gewünscht anordnen können.
      Als drittes solltest du noch auf die Semantik achten: das was du in die erste Tabellenzeile mit colspan=2 packst, gehört eigentlich in ein <caption> wobei das ganze ohnehin eher keine Tabelle sondern eine Definitions- bzw. Beschreibungsliste ist. Ziemlich sicher falsch sind die beiden divs mit #main bzw. .headline, die wären gerne <main> bzw. <h1> (oder eine weitere Ebene wenn es vorher schon eine Hauptüberschrift gibt).

      Kommentar


      • #4
        Mit etwas CSS könnte dein HTML so aussehen:

        Bildschirmfoto 2021-06-11 um 19.46.27.png

        HTML-Code:
        <!DOCTYPE html>
        <html>
            <head>
                <style>
                    table {
                        width: 400px;
                        border-collapse: collapse;
                    }
                    caption {
                        padding: 0.25rem;
                        background-color: #fa0;
                        border: solid 2px #000;
                        border-bottom: none;
                        font-weight: bold;
                    }
                    th, td {
                        border: solid 2px #000;
                        padding: 0.25rem;
                    }
                    th {
                        width: 150px;
                    }
                    .tables {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 1rem;
                    }
                </style>
            </head>
            <body>
                <main>
                    <h1>Details von <?php htmlspecialchars($computer['computerNname']); ?></h1>
        
                    <div class="tables">
                        <table>
                            <caption>Allgemein</caption>
                            <tr>
                                <th>Modell</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th>Typ</th>
                                <td></td>
                            </tr>
                        </table>
        
                        <table>
                            <caption>System</caption>
                            <tr>
                                <th>Betriebssystem</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th>Bitlocker</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th>Zuletzte gestartet</th>
                                <td></td>
                            </tr>
                        </table>
        
                        <table>
                            <caption>Software</caption>
                            <tr>
                                <th>Citrix Workspace</th>
                                <td></td>
                            </tr>
                        </table>
        
                        <table>
                            <caption>Monitor</caption>
                            <tr>
                                <th>Modell</th>
                                <td></td>
                            </tr>
                        </table>
                    </div>
        
                </main>
            </body>
        </html>

        Kommentar

        Lädt...
        X