Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Tabellen mit CSS gestalten

PHPz
Freigeben: 2023-08-19 14:29:04
nach vorne
768 Leute haben es durchsucht

Wir können CSS verwenden, um den Stil der Tabelle zu definieren. Die folgenden Eigenschaften werden verwendet, um Stile für

und seine Elemente zu definieren:

  • border

    Die border-Eigenschaft von CSS wird verwendet, um die Rahmenbreite, den Rahmenstil und die Rahmenfarbe zu definieren.

  • border-collapse

    Mit diesem Attribut wird angegeben, ob das

-Element einen gemeinsamen oder unabhängigen Rahmen haben soll. Das Attribut

  • caption

    caption-side wird verwendet, um das Tabellentitelfeld vertikal zu positionieren.

  • empty-cells

    Mit diesem Attribut wird festgelegt, wie leere Zellen der Tabelle angezeigt werden.

  • table-layout wird verwendet, um den Algorithmus zu definieren, den der Browser beim Layouten der Zeilen, Spalten und Zellen einer Tabelle verwendet.

  • Beispiel

    Das folgende Beispiel veranschaulicht den Stil der Tabelle:

    Live-Demo

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
       font-family: &#39;Bookman Old Style&#39;, serif;
    }
    th {
       letter-spacing: 1.9px;
    }
    #one {
       border-right: thick solid blue;
    }
    td {
       text-align: center;
    }
    </style>
    </head>
    <body>
    <h2>Employee List</h2>
    <div>
    <table>
    <tr>
    <th id="one">Employee</th>
    <th>Department</th>
    </tr>
    <tr>
    <td>John </td>
    <td>Marketing</td>
    </tr>
    <tr>
    <td>Brad</td>
    <td>Finance</td>
    </tr>
    <tr>
    <td>Tim </td>
    <td>IT</td>
    </tr>
    <tr>
    <td>Steve</td>
    <td>Operations</td>
    </tr>
    </table>
    </div>
    </body>
    </html>
    Nach dem Login kopieren

    Ausgabe

    Dies ergibt die folgende Ausgabe Live-Demo

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    table {
       float: left;
       empty-cells: hide;
       box-shadow: inset 0 0 4px orange;
    }
    tr {
       box-shadow: inset 0 0 10px greenyellow;
    }
    td {
       font-style: italic;
       box-shadow: inset 0 0 8px red;
    }
    table,td {
       margin: 6px;
       padding: 6px;
       border: 1px solid black;
    }
    table
    </style>
    </head>
    <body>
    <table>
    <caption>Demo Table</caption>
    <tr>
    <th>Head 1</th>
    <th>Head 2</th>
    <th>Head 3</th>
    </tr>
    <tr>
    <td>demo</td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td>demo</td>
    </tr>
    <tr>
    <td></td>
    <td>demo</td>
    <td></td>
    </tr>
    </table>
    </body>
    </html>
    Nach dem Login kopieren

    Ausgabe Styling Tables Working with CSS

    Dies ergibt die folgende Ausgabe: −

    Das obige ist der detaillierte Inhalt vonTabellen mit CSS gestalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Quelle:tutorialspoint.com
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!