首页  >  文章  >  web前端  >  样式表的基本 CSS 属性

样式表的基本 CSS 属性

王林
王林转载
2023-09-02 10:25:011260浏览

我们可以使用 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删除