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

表格标签的使用

作者: 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

相关文章

  • 认识html————表格的标签

    表格的标签的基本使用: 过去表格标签使用特别多。 什么是我们的表格标签? 表格标签的作用:用来给一堆数据添加表格语...

  • 2018-11-11 学习HTML CSS 笔记3

    目录 表格标签基本使用 一、表格标签基本使用 1. 格式 一个table代表一个表格 tr标签代表表格中的一行数据...

  • H5前端开发学习笔记——0x05表格标签

    本节大纲 课时37表格标签基本使用(理解) 课时38表格标签的属性(了解) 课时39细线表格(理解) 课时40表格...

  • 表格标签的使用

    1.什么是表格标签? 表格标签作用: 用来给一堆数据添加表格语义其实表格是一种数据的展现形式, 当数据量非常大的时...

  • 2-10. 表格

    1、表格标签的基本使用绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的代表http://20...

  • 04HTML基础-表格标签

    表格标签 在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的...

  • 04HTML基础--表格标签

    表格标签 在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的...

  • 04HTML基础表格标签

    表格标签 在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的...

  • 04HTML基础--表格标签

    表格标签 在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时代的...

  • 表格标签

    表格标签作用:在过去表格标签用的非常非常的多, 绝大多数的网站都是使用表格标签来制作的, 也就是说表格标签是一个时...

网友评论

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

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