标签：表格 展示 -- 标签 单元格 合并 HTML 用于

表格的基本标签

运用场景

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

相关标签名及用法

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>
            </tbody>
        </tr>
        <tr>
            <tbody>
                <!-- 表格主题 -->
                <td>李四</td>
                <td>20级</td>
                <td>网络工程</td>
            </tbody>
        </tr>
        <tr>
            <tfoot>
                <!-- 表格底部 -->
                <td>总结</td>
                <td>分配得体</td>
                <td>分配得体</td>
            </tfoot>
        </tr>
    </table>

 

运行效果展示

合并单元

运用场景

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

标签名及用法

rowspan

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

colspan

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

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

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

标签：表格,展示,--,标签,单元格,合并,HTML,用于
来源： https://www.cnblogs.com/smbsm/p/15615773.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。