2-11. 表格的属性

1、宽度和高度属性(width/height)

  • 可以给table标签和td标签使用
  • 表格的宽度和高度默认是按照内容的尺寸来调整的, 也可以通过给table标签设置width/height属性的方式来手动指定表格的宽度和高度
  • 如果给td标签设置widht/height属性, 会修改当前单元格的宽度和高度, 不会影响整个表格的宽度和高度

2、水平对其和垂直对其属性(align/valign)

  • 其中水平对齐可以给table标签和tr标签和td标签使用
  • 垂直对齐只能给tr标签和td标签使用
  • 给table标签设置align属性, 可以控制表格在水平方向的对齐方式
  • 给tr标签设置align属性, 可以控制当前行中所有单元格内容的水平方向的对齐方式
  • 给td标签设置align属性, 可以控制当前单元格中内容在说方向的对齐方式
    注意点: 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐
  • 给tr标签设置valign属性, 可以控制当前行中所有单元格中的内容, 在垂直方向的对齐方式
  • 给td标签设置valign属性, 可以控制当前单元格中的内容在垂直方向的对齐方式
    注意点: 如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐

3、单元格间距和单元格内边距属性(cellspacing/cellpadding)

  • 只能给table标签使用
  • 外边距就是单元格和单元格之间的距离, 我们称之为外边距
  • 默认情况下单元格和单元格之间的外边距的距离是2px
  • 内边距就是单元格的边框和文字之间的间隙, 我们称之为内边距
  • 默认情况下内边距是1
<body>
<!--
Excel中,最常见的表格

table标签代表一个表格,复合标签
tr: table row ,表格中的一行
td: table data ,每一行中的单元格

属性:
    border: 控制表格的边框,初始边框值为0,如果需要边框就要给他赋值
    width: 宽度, 使用在table,和td上,如果同时设置table上的宽度,和td上的宽度,最终td的宽度就近原则

    height: 高度,
        使用在table上,决定整个table的高度
        使用在tr上,改变当前行的所有td的高度
        使用在td上,也会改变当前行所有td的高度
        同时使用在tr和td上,会听tr的

    cellspacing: 改变单元格之间的间距,不能够做到变成细线表格
    cellpadding: 单元格和内容之间的间距
    align: 水平对齐方向
        取值: left, center, right
        使用在table上是使得整个table在网页中变化
        使用在tr上,会是当前行的单元格内容变化
        使用在td上时,会使当前单元格内容变化
        当同事使用在tr和tr中的td上时,就近原则
    valign: 垂直方向上的对齐方式
        取值:
            top
            middle
            bottom
    对table标签没有作用
    使用在tr上面,使得当前tr中的td内容位置发生变化
    使用在td上,当前单元格内容在垂直方向上发生变化
    同时设置tr和td,遵循就近原则
注意点:
    如果没有指定表格的宽高,则表格会根据内容进行调整
-->

<!--<table border="1" cellspacing="0" cellpadding="0"  width="200">-->
    <!--<tr align="right">-->
        <!--<td align="center">账单</td>-->
        <!--<td >账单</td>-->
    <!--</tr>-->
    <!--<tr>-->
        <!--<td>账单</td>-->
        <!--<td>账单</td>-->
    <!--</tr>-->
    <!--<tr>-->
        <!--<td>账单</td>-->
        <!--<td>账单</td>-->
    <!--</tr>-->
<!--</table>-->



<table border="1" cellspacing="0" cellpadding="0"  width="200" height="200" >
    <tr valign="bottom">
        <td valign="top">账单</td>
        <td >账单</td>
    </tr>
    <tr>
        <td>账单</td>
        <td>账单</td>
    </tr>
    <tr>
        <td>账单</td>
        <td>账单</td>
    </tr>
</table>
</body>

图片.png

http://www.w3school.com.cn/html/html_tables.asp
http://www.w3school.com.cn/tags/tag_table.asp

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容