表格的基本标签

运用场景

在网页中以行列形式的单元格的方式有序的展示信息和数据

相关标签名及用法

table标签

表示表格的整体，里面可以用于包裹多个tr标签

tr标签

表示表格的每一行，里面用于包裹多个td标签

td标签

表示表格每一个单元格，用于表示单元格内每一项具体内容

基本嵌套关系

table>tr>td

代码展示

    <table border="15"  >
        <!-- 表格整体标签 -->
        <tr>
            <!-- 表示每行的tr标签 -->
            <th>姓名</th>
            <!-- 行列小标题 -->
            <th>年级</th>
            <th>专业</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>张三</td>
        <!-- 表示每个单元格中内容 -->
            <td>19级</td>
            <td>软件工程</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>20级</td>
            <td>物联网工程</td>
            <td>女</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>19级</td>
            <td>计算机与信息科学</td>
            <td>男</td>
        </tr>
    </table>

 

基本表标签效果展示

 

 

 

表格相关属性

运用场景

写入table标签中，用于设置表格基本展示效果

常见基本属性

border标签

border标签的属性值为数字，用于设置表格的边框长度

width标签

width标签的属性值为数字，用于设置表格宽度

height

height标签属性值也为数字，用于设置表格高度

代码展示

   <table border="15" width="600" height="300" >
        <!-- 表格整体标签 -->
        <!-- 设置表格边框，宽度，高度 -->

 

效果图展示

 

 

 

 

注：实际开发中，多数使用css设置效果样式

表格标题和表头单元格标签

运用场景

用于生成表格整体大标签和一列小标签

标签名及用法

caption

表格大标题标签，用于表示表格整体大标题，默认表格顶部居中展示，只能书写在table标签内部

th

表头单元格标签，表示一列的小标签，通常在表格第一行，居中加粗展示。只能书写在tr标签内部代替td标签

代码展示

    <table border="15" width="600" height="300" >
        <!-- 表格整体标签 -->
        <!-- 设置表格边框，宽度，高度 -->
        <caption>成员信息表</caption>
        <tr>
            <!-- 表示每行的tr标签 -->
            <th>姓名</th>
            <!-- 行列小标题 -->
            <th>年级</th>
            <th>专业</th>
            <th>性别</th>
        </tr>

 

效果展示

 

 

 

表格的结构标签

运用场景

突出表格的不同部分（头部、主体、底部），表达效果更加清晰

标签名及用法

thead 头部标签，用于突出表格头部

tbody 主体标签，用于突出表格主体

tfoot 底部标签，用于突出表格底部

注：表格的结构标签均需要内部tr标签包裹，并且结构标签一般情况下可以省略

代码展示

    <table border="5"width="300">
        <caption>成员表</caption>
        <!-- 表头 -->
        <tr>
            <thead>
                <!-- 表格头部 -->
                <th>姓名</th>
                <th>年级</th>
                <th>专业</th> 
            </thead>
        </tr>
        <tr>
            <tbody>
                <!-- 表格主题 -->
            <td>张三</td>
            <td>19级</td>
            <td>软件工程</td>
        </tr>
        <tr>
                <!-- 表格主体 -->
                <td>李四</td>
                <td>20级</td>
                <td>网络工程</td>
            </tbody>
        </tr>
        <tr>
            <tfoot>
                <!-- 表格底部 -->
                <td>总结</td>
                <td>分配得体</td>
                <td>分配得体</td>
            </tfoot>
        </tr>
    </table>

 

运行效果展示

合并单元

运用场景

将相邻的多个单元格合并为一个单元格

标签名及用法

rowspan

rowspan标签属性值为合并单元格的个数，用于跨行合并，将同列的单元格垂直合并成一个单元格

colspan

colspan标签属性值为合并单元格的个数，用于跨列合并，将同行的单元格水平合并成一个单元格

注：要明确保留哪些单元格，合并哪些单元格；若跨行合并，则只保留最上面的单元格值，其余删除；跨列合并同理只保留最左边的；

只有同一结构标签中的单元格才能进行合并，切记不能跨结果标签进行合并

更多文章请关注《万象专栏》