百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> html里table有哪些
分享文章到:

html里table有哪些

发布时间:09/01 来源:未知 浏览: 关键词:
HTML中的table标签是用来定义表格的,它与一个或者多个tr,th,td元素共同构成html表格,在table表格里可以给它设定边框乃至间距等

在HTML中可以通过table标签用于定义html表格,接下来在文章中将为大家详细介绍table标签,具有必然的参照 作用但愿对大家有所帮忙。

【引荐课程:HTML教程

简便的HTML表格是由table标签乃至一个或者多个tr,th,td元素组成。

table标签

table标签可以定义简便的表格,它主如果用来操纵表格的外边框的,它具有margin属性主如果设定表格的外边距。border属性用于设定表格的边框乃至cellspacing属性用于规定单元格之间的空白

tr部分:

tr是主要用来来分割表格中有几行,一样只需要用来设定heigth

td部分:

td是用来操纵每个单元格的属性,可是离别操纵每个单元格的上下摆布边框,其中也包括padding属性。

th部分:

th的用途与td的用途雷同,只是它是用来区分表头的。

留意:在表格我国使用百分比和使用像素为单位是雷同的

例:

<table border="1px solid #ccc">
        <h4>百分百源码网</h4>
     <tr>
        <td>教程</td>
        <td>教程地址</td>
   </tr>
   <tr>
        <td>php教程</td>
        <td>http://www.php.cn</td>
          
   </tr>
   <tr>
        <td>html教程</td>
        <td>http://www.php.cn</td>
            
    </tr>
    </table>

结果图:

表格的跨行与跨列处置

我们也可以通过设定单元格的 colspan 属性使其跨列合并,也可以设定单元格的rowspan 属性使其跨行合并,如下所示

单元格跨两列

 <tr>
        <td colspan="2">php教程</td>
        <td>http://www.php.cn</td>
          
   </tr>
   <tr>
        <td colspan="2">html教程</td>
        <td>http://www.php.cn</td>
            
    </tr>
     <tr>
        <td colspan="2">css教程</td>
        <td>http://www.php.cn</td>    
   </tr>

结果图如下:

单元格跨两行

 <tr>
        <td  rowspan="2">教程</td>
        <td>教程地址</td>
   </tr>

结果图如下:

Image 021.png

边框设定

在默许状况下 table 是没有边框的,只要为 table标签设定 border 属性后才会显示边框,但这种边框由于有间距所以看上去是比力难看的,因此我们可以通过collapse属性来去除边框间距

例:

<table border="1" style="border-collapse:collapse">
 </table>

结果图如下:

Image 022.png

留意:在table中,width指的是整个表格的宽度,而td的width值得指内部不包罗内容content的宽度

总结:以上就是本篇文章的全部内容了,但愿对大家学习table标签有所帮忙。

以上就是html里table是啥的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有150人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板