首頁 >web前端 >css教學 >樣式表的基本 CSS 屬性

樣式表的基本 CSS 屬性

王林
王林轉載
2023-09-02 10:25:011283瀏覽

我們可以使用 CSS 定義表格的樣式。以下屬性通常用於設定

及其元素的樣式-
  • border

    #CSS border 屬性用於定義邊框-width、border-style 和border- color。

  • border-collapse

    此屬性用於指定

元素是否應具有共享或單獨的邊框。
  • caption

    caption-side 屬性用於垂直定位表格標題框。

  • empty-cells

    此屬性用於指定表格中空單元格的顯示。

  • table-layout strong>

    定義瀏覽器用於佈置表格的行、列和儲存格的演算法。

  • 範例

    以下範例說明了表格的樣式-

     即時示範

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

    輸出

    這給出了以下輸出-

    样式表的基本 CSS 属性

    範例

     現場示範

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

    輸出

    ##這給出了以下輸出-

    样式表的基本 CSS 属性

    以上是樣式表的基本 CSS 屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    陳述:
    本文轉載於:tutorialspoint.com。如有侵權,請聯絡admin@php.cn刪除