html 之表格样式的联系

最新推荐文章于 2022-04-07 15:12:15 发布

Mr_gxj

最新推荐文章于 2022-04-07 15:12:15 发布

阅读量326

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/Mr_gxj/article/details/53044035

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏


四种表格，实现了边距，内边距，表格列和行的合并，图片的插入
<head>
<style>
    #table{
        border: 1px;
        border-spacing:  10px;
    }
    #table td{
        border: 1px solid red;
    }
    #table th{
        border: 1px solid red;
    }
</style>

</head>
<!-- cellpading 表示内边距  border-spacing 表示边框之间的距离 border 表示边框 --><table border="1"  style="border: 1px solid red"  cellpadding="10px">    <tr>        <th colspan="2">成绩</th>        <th>合计</th>    </tr>    <tr>        <td>语文</td>        <td>90</td>        <td rowspan="2">170</td>    </tr>    <tr>        <td>数学</td>        <td>80</td>    </tr></table><table border="1">    <tr>        <th colspan="3">商品类目</th>    </tr>    <tr>        <td rowspan="3">虚拟</td>        <td>移动</td>        <td>联通</td>    </tr>    <tr>        <td>充值卡</td>        <td>彩票</td>    </tr>    <tr>        <td>梦幻</td>        <td>qq</td>    </tr>    <tr>        <td rowspan="3">化妆</td>        <td>美容护肤</td>        <td>媒体</td>    </tr>    <tr>        <td>彩妆</td>        <td>香水</td>    </tr>    <tr>        <td>保健</td>        <td>狐狸</td>    </tr></table><table id="table">    <tr>        <th colspan="3">杰瑞教育</th>    </tr>    <tr>        <td>html</td>        <td rowspan="2">应用开发</td>        <td>安卓</td>    </tr>    <tr>        <td>ioos</td>        <td>web</td>    </tr></table><table border="1" style="border: 5px solid red;border-spacing:0px " width="200px" height="250px" >    <tr>        <td rowspan="6" style="background-image:url('../img/a7.jpg') "></td>        <td rowspan="3"></td>        <td rowspan="2"></td>        <td></td>    </tr>    <tr>        <td></td>    </tr>    <tr>        <td rowspan="2"></td>        <td></td>    </tr>    <tr>        <td rowspan="3"></td>        <td></td>    </tr>    <tr>        <td rowspan="2"></td>        <td></td>    </tr>    <tr>        <td></td>    </tr></table>
运行结果如下

Mr_gxj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 之表格样式的联系

四种表格，实现了边距，内边距，表格列和行的合并，图片的插入style> #table{ border: 1px; border-spacing: 10px; } #table td{ border: 1px solid red; } #table th{ border: 1px sol
复制链接

扫一扫