table邊框設定

2021-09-07 10:21:39 字數 3223 閱讀 9959

一、**的常用屬性

基本屬性有:width(寬度)、height(高度)、border(邊框值)、cellspacing(**的內寬,即**與tr之間的間隔)、 cellpadding(**內元素的間隔,即tr與tr之間的間隔)、bordercolorlight(**的亮邊框顏色)、 bordercolordark(**的暗邊框顏色)、bgcolor(**的背景色)、background(**的背景)、 bordercolor(**邊框的顏色),

二、table邊框單線的實現方法

現在給出效果圖:

1、實現方法一:

2、實現方法二:

實現原理:利用table的border,bordercolor="#a0c6e5"實現table的邊框,但是此時的邊框太粗,

這時就可以用到style屬性裡的border-collapse:collapse樣式

二、**內部分隔線的屬性

起作用的是rules這個引數,它有三個值(cols,rows,none),當rules=cols時,**會隱藏橫向的分隔線,也就是我們只能看到表 格的列;當rules=rows時,就隱藏了縱向的分隔線,也就是我們只能看到**的行;而當rules=none時,縱向分隔線和橫向分隔線將全部隱 藏,我們就只能看到乙個**的外框了。看一下下面的對比效果你就會明白的

a

b

c

a

b

c

a

b

c

這是最普通的**形式

a

b

c

a

b

c

a

b

c

這是隱藏了橫向分隔線的**,即rules=cols

a

a

a

b

b

b

c

c

c

這是隱藏了縱向分隔線的**,即rules=rows

a

b

c

a

b

c

a

b

c

這是隱藏了所有內部分隔線的**,即rules=none

三、**外部分隔線的屬性

**外邊框的顯示與隱藏,是可以用frame引數來控制的。注意:只對**的外邊框起作用,對內部邊、線不起作用

只顯示上邊框

只顯示下邊框

只顯示左、右邊框

只顯示上、下邊框

只顯示左邊框

只顯示右邊框

不顯示任何邊框

a

b

c

a

b

c

a

b

c

這是最普通的**形式

a

b

c

a

b

c

a

b

c

這是只顯示上邊框的**,即frame=above

a

b

c

a

b

c

a

b

c

這是只顯示下邊框的**,即frame=below

a

b

c

a

b

c

a

b

c

這是只顯示左、右邊框的**,即frame=vsides

a

b

c

a

b

c

a

b

c

這是只顯示上、下邊框的**,即frame=hsides

a

b

c

a

b

c

a

b

c

這是只顯示左邊框的**,即frame=lhs

a

b

c

a

b

c

a

b

c

這是只顯示右邊框的**,即frame=rhs

a

b

c

a

b

c

a

b

c

這是不顯示任何邊框的**,即frame=void

table邊框設定

一 的常用屬性 基本屬性有 width 寬度 height 高度 border 邊框值 cellspacing 的內寬,即 與tr之間的間隔 cellpadding 內元素的間隔,即tr與tr之間的間隔 bordercolorlight 的亮邊框顏色 bordercolordark 的暗邊框顏色 b...

table邊框設定總結

一 的常用屬性 基本屬性有 width height border 邊框值 cellspacing 的內寬,即 與tr之間的間隔 cellpadding 內元素的間隔,即tr與tr之間的間隔 bordercolorlight 的亮邊框顏色 bordercolordark 的暗邊框顏色 bgcolor...

設定Table的細邊框

1 設定邊框的border 0 cellspacing 1,設定table的背景色為所要的邊框色,再設定所有的td背景色為白色,這樣細邊框就顯露出來了。2 設定border 0 再通過css,給table加上1px的border top,border left,然後再設定所有的td的border r...