css3表格屬性:1、border-collapse;2、border-spacing;3、caption-side;4、empty-cells;5、table-layout;6、width;7、padding;8、 text-align等。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
使用 CSS 可以讓 HTML 表格更美觀。指定CSS表格邊框,使用border屬性。
縮寫邊框屬性設定在一個宣告中所有的邊框屬性。
可以設定的屬性分別(依序):border-width,border-style,border-color。 (即邊框的寬度、邊框的樣式、邊框的顏色)
如果上述值缺少一個沒有關係,例如border:#FF0000;是允許的。
1.1 border屬性
值 | 說明 |
---|---|
border-width | 指定邊框的寬度 |
border-style | 指定邊框的樣式 |
border-color | 指定邊框的顏色 |
1.2 border-width屬性
值 | 描述 |
---|---|
thin | 定義細的邊框。 |
medium預設。定義中等的邊框。
允許您自訂邊框的寬度。 | |
1.3 border-style屬性 | |
值 | |
none | |
hidden | |
dotted | |
dashed | |
solid | |
double | |
groove |
ridge定義 3D 壟斷邊框。其效果取決於 border-color 的值。
定義 3D inset 邊框。其效果取決於 border-color 的值。 | |
---|---|
定義 3D outset 邊框。其效果取決於 border-color 的值。 | |
1.4 border-color屬性 |
值
說明
color指定背景顏色。
transparent
指定邊框的顏色應該是透明的。這是預設小實例: | |
---|---|
請注意,在上面的範例中的表格有雙邊框。這是因為表和th/ td元素有獨立的邊界。 | 為了顯示一個表格的單一邊框,使用 border-collapse 屬性。如下: |
1.5 border-collapse屬性 |
1.6 border-spacing 属性
(1)作用:该属性指定分隔边框模型中单元格边界之间的距离。除非 border-collapse 被设置为 separate,否则将忽略这个属性。尽管这个属性只应用于表,不过它可以由表中的所有元素继承。
(2)可能的值:
值 | 描述 |
length length | 规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。 如果定义一个length参数,那么定义的是水平和垂直间距。 如果定义两个length参数,那么第一个设置水平间距,而第二个设置垂直间距。 |
1.7 caption-side属性
(1)作用:设置表格标题的位置,该属性指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前(或之后)的一个块级元素。
(2)可能的值:
值 | 描述 |
top | 默认值。把表格标题定位在表格之上。 |
bottom | 把表格标题定位在表格之下。 |
(3)浏览器的兼容性:除IE外的所有主流浏览器都支持 caption-side 属性。如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 caption-side属性。
1.8 empty-cells 属性
(1)作用:该属性定义了不包含任何内容的表单元格如何表示。如果显示,就会绘制出单元格的边框和背景。除非 border-collapse 设置为 separate,否则将忽略这个属性。
(2)可能的值:
值 | 描述 |
hide | 不在空单元格周围绘制边框。 |
show | 在空单元格周围绘制边框。默认。 |
(3)浏览器的兼容性:除IE外的所有浏览器都支持 empty-cells 属性。如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 empty-cells 属性。
1.9 table-layout属性
(1)作用:来显示表格单元格、行、列的算法规则,该属性指定了完成表布局时所用的布局算法。
(2)两种算法:
<1>固定表格布局: fixed
#优点:允许浏览器更快地对表格进行布局, (在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。);
#缺点:不太灵活。
<2>自动表格布局:automatic
#优点:更能反映传统的 HTML,(在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的。);
#缺点:自动算法比较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容。
(3)可能的值:
值 | 描述 |
automatic | 默认。列宽度由单元格内容设定。 |
fixed | 列宽由表格宽度和列宽度设定。 |
inherit | 规定应该从父元素继承 table-layout 属性的值。 |
width和height属性定义表格的宽度和高度。
下面的例子是设置30%的宽度,30像素的th元素,20像素的td元素的高度的表格:
小实例:
表格中的文本对齐和垂直对齐属性。
text-align属性设置水平对齐方式,向左,右,或中心。
vertical-align属性设置垂直对齐方式,比如顶部,底部或中间。
小实例:
padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。
值 | 说明 |
---|---|
length | 规定以具体单位计的填充值,比如像素、厘米等。默认值是 0px |
% | 规定基于父元素的宽度的百分比的填充 |
inherit | 指定应该从父元素继承padding |
CSS简单学习
英雄名称 | 定位 | 推荐符文 | 可选神话装备 |
---|---|---|---|
熔岩巨兽 | 辅助 | 不灭之握 | 霜火护手 |
战争女神 | AD Carry | 致命节奏 | 海妖杀手 |
战争之影 | 打野 | 征服者 | 三项之力 |
诺克萨斯之手 | 上单 | 征服者 | 渴血战斧 |
疾风剑豪 | 中单 | 征服者 | 不朽盾弓 |
(学习视频分享:css视频教程)
以上是css3的表格屬性有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!