What are the table attributes of css3

css3 table attributes: 1. border-collapse; 2. border-spacing; 3. caption-side; 4. empty-cells; 5. table-layout; 6. width; 7. padding; 8. text-align etc.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

1.CSS table

Using CSS can make HTML tables more beautiful. To specify the CSS table border, use the border attribute.

Abbreviated border properties set all border properties in one declaration.

The properties that can be set are (in order):border-width, border-style, border-color. (That is, the width of the border, the style of the border, and the color of the border)

It doesn't matter if one of the above values is missing, for example, border: #FF0000; is allowed.

1.1 border attribute

##Value Description Specify the width of the border Specify the style of the border ##border-color

border-width
border-style
Specify the color of the border

1.2 border-width attribute

Value thin medium thick length

Description
Define thin borders.
Default. Define a medium border.
Define a thick border.
Allows you to customize the width of the border.

1.3 border-style attribute

value none hidden dotted dashed solid double groove ridge inset outset

Description
Define no border.
Same as "none". Except when applied to tables, for which hidden is used to resolve border conflicts.
Define dotted border. Renders as a solid line in most browsers.
Define dashed line. Renders as a solid line in most browsers.
Define a solid line.
Define double line. The width of the double line is equal to the value of border-width.
Define the 3D groove border. The effect depends on the value of border-color.
Define the 3D ridge border. The effect depends on the value of border-color.
Define the 3D inset border. The effect depends on the value of border-color.
Define the 3D outset border. The effect depends on the value of border-color.

1.4 border-color attribute

value color transparent small example:

Description
Specifies the background color.
Specifies that the border color should be transparent. This is the default

      
  
 
 
英文名
 
中文名
 
 
 
HTML
 
超文本标记语言
 
 
 
CSS
 
层叠样式表
 
 
  

Please note that in the above example the table There are double borders. This is because the table and th/td elements have separate boundaries.

To display a single border of a table, use the border-collapse property. As follows:

1.5 border-collapse attribute

      
  
 
 
英文名
 
中文名
 
 
 
HTML
 
超文本标记语言
 
 
 
CSS
 
层叠样式表
 
 
  

1.6 border-spacing 属性

（1）作用：该属性指定分隔边框模型中单元格边界之间的距离。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。

（2）可能的值：

value collapse separate

Description
If possible, the borders will be merged into a single border. The border-spacing and empty-cells properties
default values will be ignored. The borders will be separated. The border-spacing and empty-cells properties are not ignored

值	描述
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）两种算法：

f35d6e602fd7d0f0edfa6f7d103c1b57固定表格布局: fixed

#优点：允许浏览器更快地对表格进行布局, （在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。）；

#缺点：不太灵活。

2cc198a1d5eb0d3eb508d858c9f5cbdb自动表格布局：automatic

#优点：更能反映传统的 HTML，（在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。）；

#缺点：自动算法比较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。

（3）可能的值：

值	描述
automatic	默认。列宽度由单元格内容设定。
fixed	列宽由表格宽度和列宽度设定。
inherit	规定应该从父元素继承 table-layout 属性的值。

---

2.CSS表格的宽度和高度（width、height）

width和height属性定义表格的宽度和高度。

下面的例子是设置30％的宽度，30像素的th元素，20像素的td元素的高度的表格：

小实例：

      
  
 
 
姓名
 
性别
 
年龄
 
 
 
张三
 
男
 
31
 
 
 
李四
 
男
 
43
 
 
 
王五
 
男
 
24
 
 
  

---

3.CSS表格的文字对齐方式（text-align）

表格中的文本对齐和垂直对齐属性。

text-align属性设置水平对齐方式，向左，右，或中心。

vertical-align属性设置垂直对齐方式，比如顶部，底部或中间。

小实例：

      
  
 
 
姓名
 
性别
 
年龄
 
 
 
张三
 
男
 
31
 
 
 
李四
 
男
 
43
 
 
 
王五
 
男
 
24
 
 
  

---

4.CSS表格填充（padding）

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

值	说明
length	规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比的填充
inherit	指定应该从父元素继承padding

小实例：

      
  
 
 
姓名
 
性别
 
年龄
 
 
 
张三
 
男
 
31
 
 
 
李四
 
男
 
43
 
 
 
王五
 
男
 
24
 
 
  

---

5.CSS表格的背景颜色及字体颜色（background-color、color）

      
  
 
表1.1-学生个人信息表
 
 
姓名
 
性别
 
年龄
 
 
 
张三
 
男
 
31
 
 
 
李四
 
男
 
43
 
 
 
王五
 
男
 
24
 
 
  

---

6.CSS表格多属性综合练习

      
  
 
表6.66-英雄联盟娱乐信息表
 
 
英雄名称
 
定位
 
推荐符文
 
可选神话装备
 
 
 
熔岩巨兽
 
辅助
 
不灭之握
 
霜火护手
 
 
 
战争女神
 
AD Carry
 
致命节奏
 
海妖杀手
 
 
 
战争之影
 
打野
 
征服者
 
三项之力
 
 
 
诺克萨斯之手
 
上单
 
征服者
 
渴血战斧
 
 
 
疾风剑豪
 
中单
 
征服者
 
不朽盾弓
 
 
  

（学习视频分享：css视频教程）

The above is the detailed content of What are the table attributes of css3. For more information, please follow other related articles on the PHP Chinese website!