Rumah  >  Artikel  >  hujung hadapan web  >  Sifat CSS asas untuk helaian gaya

Sifat CSS asas untuk helaian gaya

王林
王林ke hadapan
2023-09-02 10:25:011256semak imbas

Kita boleh menggunakan CSS untuk menentukan gaya jadual. Sifat berikut biasanya digunakan untuk menggayakan

dan elemennya -
  • sempadan

    Sifat sempadan CSS digunakan untuk menentukan sempadan - lebar, gaya sempadan dan warna sempadan.

  • border-collapse

    Atribut ini digunakan untuk menentukan sama ada elemen

harus mempunyai sempadan dikongsi atau berasingan.
  • caption

    atribut sisi kapsyen digunakan untuk meletakkan kotak tajuk jadual secara menegak.

  • empty-cells

    Atribut ini digunakan untuk menentukan paparan sel kosong dalam jadual.

  • table-layout strong>

    Mentakrifkan algoritma yang digunakan oleh penyemak imbas untuk menyusun baris, lajur dan sel jadual.

  • example

    Contoh berikut menggambarkan gaya jadual -

    demo live

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    table, table * {
       border: thin solid;
       padding: 5px;
       font-style: italic;
    }
    caption {
       caption-side: bottom;
    }
    td {
       box-shadow: inset 0 0 6px green;
    }
    </style>
    </head>
    <body>
    <table>
    <caption>Demo caption</caption>
    <tr>
    <td>demo</td>
    </tr>
    <tr>
    <td>demo</td>
    <td></td>
    </tr>
    <tr>
    <td>demo</td>
    <td>demo</td>
    <td></td>
    </tr>
    </table>
    </body>
    </html>
    e

    output

    ini memberikan output berikut -

    样式表的基本 CSS 属性

    example

    live demo

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
       display: flex;
       float: left;
    }
    table {
       border: 3px solid black;
    }
    td {
       border: 3px solid lightgreen;
    }
    th {
       border: 3px solid lightblue;
    }
    #t2 {
       border-collapse: collapse;
    }
    </style>
    </head>
    <body>
    <h2>Team Rankings</h2>
    <div>
    <table id="t1">
    <tr>
    <th>Team (Test)</th>
    <th>Rank </th>
    </tr>
    <tr>
    <td>India </td>
    <td>1 </td>
    </tr>
    <tr>
    <td>Australia</td>
    <td>2</td>
    </tr>
    </table>    
    </div>
    <div>
    <table id="t2">
    <tr>
    <th>Team (ODI) </th>
    <th>Rank </th>
    </tr>
    <tr>
    <td>India </td>
    <td>1 </td>
    </tr>
    <tr>
    <td>England</td>
    <td>2</td>
    </tr>
    </table>
    </div>
    </body>
    </html>
    e样式表的基本 CSS 属性output

    🎜 ini adalah Keluaran berikut keluar-🎜🎜🎜🎜

    Atas ialah kandungan terperinci Sifat CSS asas untuk helaian gaya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

    Kenyataan:
    Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
    Artikel sebelumnya:Nilai sifat muat objek CSSArtikel seterusnya:Nilai sifat muat objek CSS