点击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!

单纯的table应该比CSS还要老,也就是说在出现CSS布局之前就已经有了table布局。后来CSS又加强了和table的联系,如对table类别的display属性值的支持等。然而,table本身还有有很多使用场景的,关键是要知道什么时候适应使用table来处理问题。

一,常规的table属性

<table aling=left>...</table> 表格位置,置左

<table aling=center>...</table> 表格位置,置中

<table background=图片路径>...</table> 背景图片的URL=就是路径网址

<table border=边框大小>...</table> 设定表格边框大小(使用数字)

<table bgcolor=颜色码>...</table> 设定表格的背景颜色

<table borderclor=颜色码>...</table> 设定表格边框的颜色

<table borderclordark=颜色码>...</table> 设定表格暗边框的颜色

<table borderclorlight=颜色码>...</table> 设定表格亮边框的颜色

<table cellpadding=参数>...</table> 指定内容与格线之间的间距(使用数字)

<table cellspacing=参数>...</table> 指定格线与格线之间的距离(使用数字)

<table cols=参数>...</table> 指定表格的栏数

<table frame=参数>...</table> 设定表格外框线的显示方式

<table width=宽度>...</table> 指定表格的宽度大小(使用数字)

<table height=高度>...</table> 指定表格的高度大小(使用数字)

<td colspan=参数>...</td> 指定储存格合并栏的栏数(使用数字)

<td rowspan=参数>...</td> 指定储存格合并列的列数(使用数字)

二、td宽度固定table-layout

这个属性,我曾经专门分析过,也写过一篇文章,可以参考一下。

主要注意,列宽一个由内容设定一个由表格本身宽度设定,如下图所示:

表格怎么用颜色区分每列 关于表格的常用属性都在这里(1)

很好理解。

三、合并表格边框border-collapse

先来看一下它的取值有哪些:

表格怎么用颜色区分每列 关于表格的常用属性都在这里(2)

就是三个,当取collapse时,边框会合并为一个单一的边框,如下所示:

表格怎么用颜色区分每列 关于表格的常用属性都在这里(3)

当取separate时,边框会被分开,如下所示:

表格怎么用颜色区分每列 关于表格的常用属性都在这里(4)

最后总结:

关于表格的常用属性常用的都在这里,最后那两个相对来说比较新, 重点理解一下。

,