【静态页面架构】CSS之表格

最新推荐文章于 2021-12-30 18:41:46 发布

weixin_34261415

最新推荐文章于 2021-12-30 18:41:46 发布

阅读量159

点赞数

原文链接：https://segmentfault.com/a/1190000016183846

版权

CSS架构

表格:

1.元素:

表格的基本结构；
以table元素建立表格
tr元素是表格行，td元素是表示表格单元格

<body>
<!--<table> 表格以行和列表示容器元素
    borber属性 默认的表格和单元格都有边框
    表格默认是有宽度的单元格之和决定
    -->
<table border="2">
    <tr>
        <!--
            <td>元素 - 表示表格中的单元格
            * 单元格默认宽度由内容决定
         -->
        <td>姓名</td>
        <td>年龄</td>
        <td>职业</td>
    </tr>
    <tr>
        <td>桐人</td>
        <td>17</td>
        <td>剑士</td>
    </tr>
    <tr>
        <td>亚丝娜</td>
        <td>16</td>
        <td>补师</td>
    </tr>
</table>
</body>

表格的表头单元格；

th元素来定义表格行或列表头单元格
th元素中使用scope属性设置单元格的行和列表头

<body>
<tr>
    <!--
        <th>元素 - 表示表格中的表头
        * 表头文本内容字体加粗
        * 表头文本内容为水平方向居中
     -->
    <th>姓名</th>
    <th>年龄</th>
    <th>职业</th>
</tr>
<tr>
    <td>桐人</td>
    <td>17</td>
    <td>剑士</td>
</tr>
<tr>
    <td>亚丝娜</td>
    <td>16</td>
    <td>补师</td>
</tr>
</body>

表格的标题；

caption元素定义表格的标题
caption元素被定义在table元素中顶部

<table border="2">
    <caption>登录人员表</caption>
    <!--<caption>元素  表示表格的标题-->
    <tr>

        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
    </tr>
    <tr>
        <td>桐人</td>
        <td>17</td>
        <td>剑士</td>
    </tr>
    <tr>
        <td>亚丝娜</td>
        <td>16</td>
        <td>补师</td>
    </tr>
</table>
</body>

跨行与跨列；

colspan属性是设置单元格横跨的列数
rowspan属性是设置单元格横跨的行数

<body>
<table border="2">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>职业</td>
    </tr>
    <tr>
        <td rowspan="2">桐人</td>
        <!--跨行时，会强制在被占的行里相应去掉一个单元格-->
        <td colspan="2">17</td>
        <!--跨列时，会强制在被占的列里相应去掉一个单元格-->
    </tr>
    <tr>
        <td>亚丝娜</td>
        <td>16</td>
    </tr>
</table>
</body>

长表格；

thead元素；设置表格的页眉内容
tbody元素；设置表格的主题内容
tfoot元素；设置表格的页脚内容

<body>
<table border="2">
    <caption>登录人员表</caption>
    <!--<caption>元素  表示表格的标题-->
    <thead>
    <!-- 表格顶部 页眉<thead>元素 -->
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
    </tr>
    </thead>
    <!-- 表格主体 主体<tbody>元素 -->
    <tbody>
    <tr>
        <td>桐人</td>
        <td>16</td>
        <td>剑士</td>
    </tr>
    <tr>
        <td>亚丝娜</td>
        <td>17</td>
        <td>补师</td>
    </tr>
    </tbody>
    <!-- 表格底部 页脚<tfoot>元素 -->
</table>
</body>

2.样式:

表格布局；

以table-layout属性定义布局表格单元格
fixed值；

 <style>
        table {
            table-layout: fixed;
            /*table-layout 表示布局
            auto：自动计算表格的宽和高度{由单元格内容决定}
            加载速度慢
            fixed：只加载首行单元格宽度，其之外的单元格不会影响表单宽度
            加载速度快*/
        }
    </style>
</head>
<body>
<table border="2">
    <tr>

        <td>姓名</td>
        <td>年龄</td>
        <td>职业</td>
    </tr>
    <tr>
        <td>桐人</td>
        <td>17</td>
        <td>剑士</td>
    </tr>
    <tr>
        <td>亚丝娜</td>
        <td>16</td>
        <td>补师</td>
    </tr>
</table>
</body>

表格标题；

以caption-side属性来是caption元素显示表格位置
有2个值表示；top表示表格的顶部，bottom表示表格的底部

<style>
        caption{
            caption-side: bottom;
            /*caption-side属性 表示标题元素<caption>设置
              top：默认值；表示标题出现在表格顶部
              bottom：表示标题出现在表格底部
             */
        }
    </style>
</head>
<body>
<table border="1">
    <!-- <caption>元素 - 表示表格中的标题 -->
    <caption>登录人员表</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
    </tr>
    <tr>
        <td>桐人</td>
        <td>17</td>
        <td>剑士</td>
    </tr>
    <tr>
        <td>亚丝娜</td>
        <td>16</td>
        <td>补师</td>
    </tr>
</table>
</body>

表格边框；

border-collapse属性来表示决定边框是分开还是合并
border-spacing属性设置相邻单元格边框之间距离

 <style>
        table, td {
            /*
                border属性；设置边框
                border-width；设置边框宽度
                border-style；设置边框样式
                border-color；设置边框颜色
             */
            border: 1px solid black;
            /*
                border-collapse属性；设置边框是分离还是合并
                separate；默认值，表示分离
                collapse；表示合并
             */
            border-collapse: collapse;
            /*
                border-spacing属性；设置两个边框之间的距离
                必须在border-collapse属性值为separate时才有效
             */
            border-spacing: 10px;
        }
    </style>
</head>
<body>
<table>
<!--元素的属性border；表示同时设置单元格和表格的表框-->
    <tr>

        <td>姓名</td>
        <td>年龄</td>
        <td>职业</td>
    </tr>
    <tr>
        <td>桐人</td>
        <td>17</td>
        <td>剑士</td>
    </tr>
    <tr>
        <td>亚丝娜</td>
        <td>16</td>
        <td>补师</td>
    </tr>
</table>
</body>

weixin_34261415

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【静态页面架构】CSS之表格

CSS架构表格:1.元素:表格的基本结构；以table元素建立表格tr元素是表格行，td元素是表示表格单元格<body><ta...
复制链接

扫一扫