首页 > 其他 > 详细

table表格

时间:2020-04-29 23:26:32      阅读:84      评论:0      收藏:0      [点我收藏+]

1.合并单元格边框 border-collapse:collapse;

table{
    border-collapse:collapse;  /* 合并单元格边框 */
}
table td{
    border:1px solid #666;
}

2.table中的其他元素

 caption:表格的标题

 thead:表格的表头

 th:表格的表头单元格

 tbody:表格的主体

 tfoot:表格的页脚

3.单元格合并

colspan:跨列合并单元格

rowspan:跨行合并单元格

<table>
    <tr>
        <td colspan=‘2‘>单元格1</td> <!-- 跨列合并 -->
        <td>单元格3</td>
    </tr>
    <tr>
        <td rowspan="2">单元格1</td> <!-- 跨行合并 -->
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
    <tr>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
</table>

4.设置单元格之间的水平,垂直间距:  border-spacing

table{
    border-spacing:20px; /* 单元格之间会有上下左右的20px的间距 */
}

 

table表格

原文:https://www.cnblogs.com/rans/p/12805778.html

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