首页  >  文章  >  web前端  >  HTML table属性你知道多少,进来了解一下?

HTML table属性你知道多少,进来了解一下?

寻∝梦
寻∝梦原创
2018-08-14 16:22:534015浏览

HTML table属性你知道多少,进来了解一下?在html中表格标签的使用十分广泛,对于初学者很好入手,不过也有一些属性,可以使表格的功能极大提升。应用得当,你会发现它会使页面变得清晰美观。让我们好好学习HTML table属性吧。

什么是表格&表格的作用

什么是表格:由一些 被称之为 单元格的矩形框 按照从左到右从上到下的顺序排列到一起组成的

表格的作用:以一定的结构来显示信息的。 

如何使用table表格

定义表格:f5d188ed2c074f8b944552db028f98a1f16b1740fad44fb09bfe928bcc527e08

创建表行:a34de1251f0d9fe1e645927f19a896e8fd273fcf5bcad3dfdad3c41bd81ad3e5

创建列(单元格):b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf 

注意:默认情况下,每行中的列数是统一的。

table表格的特点:

1、独占一行

2、宽度自适应(由内容来决定) 

table表格属性:

f5d188ed2c074f8b944552db028f98a1 属性

  • width:        设置表格宽度

  • height:       设置表格高度

  • align:           设置 表格 在其 父元素中的水平对齐方式,取值:left,center,right

  • border:        边框,边框宽度,以px为单位的数值,px可以省略

  • cellpadding: 单元格内边距

  •                    单元格边框与内容之间的距离

  • cellspacing:  单元格外边距

  •                    单元格与单元格之间或者单元格与表格之间的 距离

  • bgcolor:       背景颜色

a34de1251f0d9fe1e645927f19a896e8 属性

  • 1.align:          该行的内容 水平对齐方式

  • 2.valign:        该行的内容 垂直对齐方式,取值:top,middle,bottom

  • 3.bgcolor      该行的文本颜色

b6c5a531a458a2e790c1fd6421739d1c 属性

  • width

  • height

  • align

  • valign

  • bgcolor

  • colspan设置单元格跨列

  • rowspan设置单元格跨行

3、table表格中的其他标记

1.63bd76834ec05ac1f4c0ebbeaafb099437eb775bb5a9e6f3d094e96a76117fe8

   作用:为表格定义标题

    位置:表格正上方居中显示

                              <table>
                 <caption>标题</caption>
                 <tr>
                    <td></td>
                     <td></td>
                 </tr>
               </table>

2.行标题或列标题

    列标题:第一行中的每一列,加粗,水平居中的效果显示

    行标题:每行里面的第一列, 加粗,水平居中的效果显示

    行(列)标题:b4d429308760b6c2d20d6300079ed38e01c3ce868d2b3d9bce8da5c1b7e41e5b

    b4d429308760b6c2d20d6300079ed38e01c3ce868d2b3d9bce8da5c1b7e41e5b作用 与 b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf一模一样

table边框合并:

属性:border-collapse

取值:

    1.separate默认值,分离边框模式

     2.collapse边框合并模式

table边框边距:

1.作用:设置相邻单元格边框之间的距离(类似于cellspacing)

2.属性:border-spacing

  取值:

       1.取1个值:表示水平和垂直间距相等

       2.取2个值:第一个值表示的 水平间距

          第二个值表示的 垂直间距

           两个值之间用 空格 隔开

3.要求

    border-collapse必须为separate

    必须为分离边框模式时有效

隐藏的显示效果:

    属性:  visibility:collap:se

     用在表格元素上,删除一行或一列,不影响表格整个布局

【相关推荐】

html的基础元素,让你零基础学习HTML

什么是HTML文件?HTML文件的初步认识


以上是HTML table属性你知道多少,进来了解一下?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn