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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,133评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,682评论 3 390
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,784评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,508评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,603评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,607评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,604评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,359评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,805评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,121评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,280评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,959评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,588评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,206评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,442评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,193评论 2 367
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,144评论 2 352

推荐阅读更多精彩内容