首頁 > web前端 > css教學 > 主體

樣式表的基本 CSS 屬性

王林
發布: 2023-09-02 10:25:01
轉載
1249 人瀏覽過

我們可以使用 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
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!