首页 > Web开发 > 详细

HTML 表格

时间:2019-11-28 01:57:08      阅读:72      评论:0      收藏:0      [点我收藏+]

表格本身并不是用来布局,而是用来展示表格数据

###1.基本结构 table:表格标签(默认独占一行,宽度100%) tr:行标签 td/th:单元格标签,其中th标签中的文本会显示为粗体居中(单元格的宽度由同一列中的最宽的那个元素决定)

<body style="padding:30px;">
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三丰</td>
            <td>120</td>
        </tr>
        <tr>
            <td>杨过</td>
            <td>24</td>
        </tr>
    </table>
</body>

技术分享图片

###2.caption标签 caption标签用来定义表格的标题,caption标签的文本会居中显示

<body style="padding:30px;">
    <table>
        <caption>我是表格的标题</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>简介</th>
        </tr>
        <tr>
            <td>张三丰</td>
            <td>120</td>
            <td>本名张君宝,自创太极拳剑,将武当派发扬光大</td>
        </tr>
        <tr>
            <td>杨过</td>
            <td>24</td>
            <td>金庸武侠小说《神雕侠侣》的主人公</td>
        </tr>
    </table>
</body>

技术分享图片

###3.为表格添加边框 默认情况下表格是咩有边框的 在table标签中添加border属性,可以为表格添加边框(表格中一般不使用css中的边框属性)。值越大,表格最外层的边框也就越粗。

<body style="padding:30px;">
    <table border="1">
        ...
    </table>
    <table border="10">
        ...
    </table>
</body>

技术分享图片

###4.设定各个单元格之间的间距 在table标签中添加cellspacing属性,可以设定各个单元格之间的间距。这个属性默认值为2

<body style="padding:30px;">
    <table border="1" cellspacing="5">
        ...
    </table>
    <table border="1" cellspacing="0">
        ...
    </table>
</body>

技术分享图片

###5.设定单元格的内边距 在table标签中添加cellpadding属性,可以设定单元格的内边距。这个属性默认值为0(因为单元格的宽度由同一列中的最宽的那个元素决定,所以这个属性只在同一列中的最宽的那个元素上才能看到效果)

<body style="padding:30px;">
    <table border="1" cellspacing="0">
        ...
    </table>
    <table border="1" cellspacing="0" cellpadding="10">
        ...
    </table>
</body>

技术分享图片

HTML 表格

原文:https://www.cnblogs.com/OrochiZ-/p/11946347.html

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