首页 > Web开发 > 详细

Html table、thead、tr、th、td 标签

时间:2019-02-19 18:58:46      阅读:180      评论:0      收藏:0      [点我收藏+]

Html table、thead、tr、th、td 标签

案例一

<!-- table 表格标签,配置表格使用、border="1" 添加表格框架 -->
<table border="1">
     <!-- thead 设置表头 -->
    <thead>
        <!-- tr 指定表行标签-->
        <tr>
            <!-- th 设置表头内容,默认加粗-->
            <th>表头1</th>
            <th>表头2</th>
        </tr>
    </thead>
    <!-- tbody 设置表内容 -->
    <tbody>
        <!-- tr 指定报表行标签-->
        <tr>
            <!-- td 指定表列标签-->
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
        </tr>
    </tbody>
</table>

 

案例二

<!-- table 表格标签,配置表格使用、border="1" 添加表格框架 -->
<table border="1">
    <!-- thead 设置表头 -->
    <thead>
    <!-- tr 指定表行标签-->
        <tr>
            <!-- th 设置表头内容,默认加粗-->
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
    </thead>
    <!-- tbody 设置表内容 -->
    <tbody>
        <tr>
            <!-- rowspan="2" 纵向 列 合并两个表格空间,等号后面是拼接数-->
            <td rowspan="2">1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <!-- rowspan="2" 横向 行 合并接两个表格空间,等号后面是拼接数-->
            <td colspan="2">1</td>
        </tr>
    </tbody>
</table>

 

效果:案例一


 

表头1表头2
1 1
2 2

 


 

 

 

效果:案例二


 

表头1表头2表头3
1 1 1
1

 


 

Html table、thead、tr、th、td 标签

原文:https://www.cnblogs.com/xiangsikai/p/10402872.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!