Was sind die Tabellenattribute von CSS3?-Front-End-Fragen und Antworten-php.cn

CSS3-Tabellenattribute: 1. Randabstand; 4. Leerzellen; 8. Textausrichtung; usw. .

Was sind die Tabellenattribute von CSS3?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3- und HTML5-Version, Dell G3-Computer.

1.CSS-Tabelle

Verwenden Sie CSS, um HTML-Tabellen schöner zu machen. Um den CSS-Tabellenrahmen anzugeben, verwenden Sie das border-Attribut.

Abgekürzte Randeigenschaften legen alle Randeigenschaften in einer Deklaration fest.

Die Attribute, die festgelegt werden können, sind (in der Reihenfolge):Rahmenbreite, Rahmenstil, Rahmenfarbe. (d. h. Randbreite, Randstil, Randfarbe)

Es spielt keine Rolle, ob einer der oben genannten Werte fehlt, zum Beispiel ist border: #FF0000; 1.1 Rahmenattribut

border-style

Geben Sie den Stil des Rahmens an

border-color Geben Sie die Farbe des Rahmens an Beschreibung dünn mittel Standard. Definieren Sie einen mittleren Rand.


1.2 border-width-Attribut
Wert
Definieren Sie dünne Ränder.

dickDefinieren Sie dicke Ränder. Mit

können Sie die Breite des Randes anpassen. 1.3 Rahmenstil-Attribut Wert Beschreibung keine hidden ist dasselbe wie „none“. Außer bei Anwendung auf Tabellen, bei denen „hidden“ zur Lösung von Randkonflikten verwendet wird.

Länge



definiert keinen Rahmen.

gepunktetDefinieren Sie gepunktete Ränder. Wird in den meisten Browsern als durchgezogene Linie dargestellt.

dashed definiert die gestrichelte Linie. Wird in den meisten Browsern als durchgezogene Linie dargestellt. solid definiert eine durchgezogene Linie. double definiert Doppellinien. Die Breite der Doppellinie entspricht dem Wert von border-width. Groove 3D-Rillenrand definieren. Der Effekt hängt vom Wert von border-color ab. Grat Definieren Sie den 3D-Gratrand. Der Effekt hängt vom Wert von border-color ab. Einfügung Definieren Sie den 3D-Einfügungsrand. Der Effekt hängt vom Wert von border-color ab. Anfang Definieren Sie den 3D-Anfangsrand. Der Effekt hängt vom Wert von border-color ab. Wert Beschreibung Farbe Gibt die Hintergrundfarbe an. transparent








	1.4 Rahmenfarbenattribut

Gibt an, dass die Rahmenfarbe transparent sein soll. Dies ist die Standardeinstellung

kleines Beispiel:

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

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

Nach dem Login kopieren

Um einen einzelnen Rand einer Tabelle anzuzeigen, verwenden Sie die Eigenschaft border-collapse. Wie folgt: 1.5 border-collapse-Attribut Beschreibung

	Bitte beachten Sie, dass die Tabelle im obigen Beispiel doppelte Ränder hat. Dies liegt daran, dass die Elemente table und th/td separate Grenzen haben.

	Wert

collapse

Wenn möglich, werden die Ränder zu einem einzigen Rand zusammengeführt. Die Standardwerte der Eigenschaften border-spacing und empty-cells

separate
werden ignoriert. Die Grenzen werden getrennt. Die Eigenschaften „Rahmenabstand“ und „Leere Zellen“ werden nicht ignoriert

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

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

Nach dem Login kopieren

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 属性的值。

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

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

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

小实例：

    CSS简单学习  
    姓名  性别  年龄  
  张三  男  31  
  李四  男  43  
  王五  男  24

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

Nach dem Login kopieren

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

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

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

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

小实例：

    CSS简单学习  
    姓名  性别  年龄  
  张三  男  31  
  李四  男  43  
  王五  男  24

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

Nach dem Login kopieren

4.CSS表格填充（padding）

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

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

小实例：

    CSS简单学习  
    姓名  性别  年龄  
  张三  男  31  
  李四  男  43  
  王五  男  24

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

Nach dem Login kopieren

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

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

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

Nach dem Login kopieren

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

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

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

Nach dem Login kopieren

（学习视频分享：css视频教程）
Das obige ist der detaillierte Inhalt vonWas sind die Tabellenattribute von CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!