美文网首页前端
表格标签的使用

表格标签的使用

作者: Immensity_G | 来源:发表于2017-02-08 14:54 被阅读153次

    1.什么是表格标签?

    表格标签作用: 用来给一堆数据添加表格语义
    其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式

    2.表格标签格式:

    <table> <tr> <td>显示内容</td> </tr> </table>

    其实表格标签中的table代表整个表格, 也就是一堆table标签就是一个表格
    其实表格标签中的tr标签代表整个表格中的一行数据, 也就是说一对tr标签就是表格中的一行
    其实表格标签中的td标签代表表格中一行中的一个单元格, 也就是说一对td标签就是一行中的一个单元格

    3.注意点

    3.1表格标签有一个边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框
    3.2表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现

    4.表格标签的属性

    1.宽度和高度的属性

    可以给table标签和td标签使用

    1.1表格的宽度和高度默认是按照内容的尺寸来调整的, 也可以通过给table标签设置width/height属性的方式来手动指定表格的宽度和高度

    1.2如果给td标签设置widht/height属性, 会修改当前单元格的宽度和高度, 不会影响整个表格的宽度和高度

    2.水平对齐和垂直对齐的属性

    其中水平对齐可以给table标签和tr标签和td标签使用
    垂直对齐只能给tr标签和td标签使用

    2.1给table标签设置align属性, 可以控制表格在水平方向的对齐方式

    2.2给tr标签设置align属性, 可以控制当前行中所有单元格内容的水平方向的对齐方式

    2.3给td标签设置align属性, 可以控制当前单元格中内容在说方向的对齐方式

    注意点: 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐

    2.4给tr标签设置valign属性, 可以控制当前行中所有单元格中的内容, 在垂直方向的对齐方式

    2.5给td标签设置valign属性, 可以控制当前单元格中的内容在垂直方向的对齐方式

    注意点: 如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐

    3.外边距和内边距的属性
    只能给table标签使用

    3.1.外边距就是单元格和单元格之间的距离, 我们称之为外边距
    默认情况下单元格和单元格之间的外边距的距离是2px

    3.2 内边距就是单元格的边框和文字之间的间隙, 我们称之为内边距
    默认情况下内边距是1

    相关文章

      网友评论

        本文标题:表格标签的使用

        本文链接:https://www.haomeiwen.com/subject/gbgvittx.html