html5中表格table

表格 table
     表格的行:tr
     每行中的列:td
     表格的标题:<th></th> 默认加粗,单元格居中
     表格头:caption
    [常用属性]
    1border:给表格添加边框。
        当border属性增大时,只有外围框线增加,单元格的边框始终为1px
    2bordercolor="blue" 边框颜色
    3WidthHeight:表格的宽高
    4Cellspacing:单元格与单元格之间的间隙距离。
       当cellspacing="0",只会使单元格间隙为0,但不会合并边框线。
       表格边框合并:style="border-collapse: collapse;",
       无需再写cellspacing="0"
    5Cellpadding:每个单元格中的内容与边框线的距离。
    6align:表格在屏幕的左中右位置显示,left center right
       注意:给表格加上align属性,相当于让表格浮动。
       会直接打破表格后面元素的原有排列方式
    7bgcolor:背景色   等同于style="background-color:;"
    8background:   background="img/computer.jpg"设置背景图片
      等同于style="background-image:;" 且背景图会覆盖背景色
trtd相关的属性】
    1width/height: 单元格的宽高
    2bgcolor:单元格的背景颜色
    3align: left center right 单元格中的文字,水平对齐方式
    4valign:top center bottom 单元格中的文字,垂直对齐方式
    5nowrap="nowrap" 单元格中文字不换行

    注意:1、当表格属性与行列属性冲突时,以行列属性为准。(近者优先,就近原则)
         2、表格的align属性,是控制表格自身在浏览器的显示位置;
            行和列的align属性,是控制单元格中文字在单元格中的对齐方式;
         3、表格的align属性,并不影响表格内,文字的水平对齐方式
            tralign或者valign属性,可以控制一行中所有单元格的水平或者垂直对齐方式
[表格的跨行与跨列]---td
         colspan 跨列,当某个格跨N列时,其右边N-1个单元格需删除
         rowspan 跨行,当某个格跨N行时,其下方N-1个单元格需删除
【表格的结构化】
         完整表格结构:caption thead  tbody  tfoot
         无论各部分在表格什么位置,显示时,
         caption均在表格外最上方,
         thead均会在表格内最上方,
         tfoot均会在最下方。
         【表格的直列化】
         <colgroup style="background-color: yellow;">   前两列为一组
            <col />      第一列
            <col />      第二列
         </colgroup>
         <col style="background-color: blue;"/>         第三列

   【优点】
     1:语义化:看到标签能明白包含的内容
     2:便于浏览器搜索。
     3:可以调整书写顺序实现某些部分的优先展示,而不打乱显示顺序。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值