(4)表格的html标签,html标签之表格标签

叁歲伎倆 2022-10-19 15:56 242阅读 0赞

HTML表格组成:

由

其语法如下：

…

2行1列的内容2行2列的内容

…

里面,它不能单独使用,相当于

<table> 
 <tbody> 
  <tr> 
   <td>、</td> 
   <th>标示行中的一个列,需要嵌套在</th> 
  </tr> 
 </tbody> 
</table>

table标签属性:

1)border标签属性：设定围绕表格的边框的宽度。实际上border标签属性不仅设置围绕表格边框的宽度，还为每个单元格添加宽度为1px的边框；

例：

border标签属性

table\{

border: 15px solid \#000;

th,td\{

border: 1px solid \#000;

2)width标签属性：设定表格的宽度；不建议通过width标签属性设置表格宽度，建议向table标签添加width样式属性进行设置。

px :设置以像素计的宽度(例：width="100px")

%：设置以包含元素的百分比计的宽度(例：width="100%")

例：

width标签属性

table\{

width:"80%"；

3)align标签属性：指定表格相对于周围标签的对齐方式,建议向table标签添加样式属性进行设置;

属性值：

left：左对齐表格

right：右对齐表格

center：居中对齐表格

(1)通过float样式属性实现左右对齐；

left：元素向左浮动

right：元素向右浮动

none：默认值，元素不浮动

inherit：规定应该从父元素继承float属性的值

(2)通过margin样式属性实现居中对齐；

margin:0 auto;

例:

align标签属性

table\{

margin: 0 auto；

4)cellspacing 标签属性：设定单元格之间的间距(单位：px),建议向table标签添加border-spacing样式属性进行设置;

例:

cellspacing标签属性

table\{

border-spacing: 0；

5)cellpadding标签属性：设定单元边沿与单元内容之间的间距(单位：px)，建议向td或th标签添加padding样式属性来实现；

例：

cellspacing标签属性

table\{

padding: 8px；

6)bgcolor标签属性：设置表格背景颜色；

color\_name：规定颜色值为颜色名称的背景颜色

hex\_number：规定颜色值为十六进制的背景颜色

rgb\_number：规定颜色值为rgb代码的背景颜色

bgcolor标签属性

table\{

background-color: "red"；

7)border-collapse样式属性：设置表格的边框是否被合并为一个单一的边框；

separate:默认值，边框会被分开；

collapse:边框会合并为一个单一的边框；

inherit:规定应该从父元素继承border-collapse属性的值；

例:

border-collapse样式属性

table\{

font: 12px;/\*字体大小\*/

padding:10px;/\*单元格边框与内容之间的间距\*/

border: 1px solid \#000;/\*表格边框\*/

用标签属性完成一个表格：

table\{

border: 1px solid black;

width: 20%;

/\*float:right;\*/

margin: 0 auto;

border-spacing:0 ;

background-color: red;

border-collapse: collapse;

td\{

border: 1px solid black;

padding: 10px;

标签属性：

1)align标签属性：设置表格行中单元格内容的水平对齐方式；

left：左对齐内容(默认值)

right：右对齐内容

center：居中对齐内容(th元素的默认值)

justify：对行进行伸展，这样每行都可以有相等的长度

char：将内容对准指定字符

2)valign标签属性：设置表格行中单元格内容的垂直对齐方式；

top：对内容进行上对齐

middle：对内容进行居中对齐(默认值)

bottom：对内容进行下对齐

baseline：与基线对齐

3)bgcolor标签属性：设定表格行的背景颜色

color\_name：规定颜色值为颜色名称的背景颜色

hex\_number：规定颜色值为十六进制的背景颜色

rgb\_number：规定颜色值为rgb代码的背景颜色

例：

table\{

border: 1px solid black;

width: 20%;

/\*float:right;\*/

margin: 0 auto;

border-spacing:0 ;

background-color: red;

border-collapse: collapse;

tr\{

height: 50px;

text-align: center;

vertical-align: top;

background-color: salmon;

td\{

border: 1px solid black;

和标签属性：

1)width标签属性与height标签属性：设定单元格的宽度和高度

pixels :设置以像素计的宽度(例：width="100px")

percent：设置以包含元素的百分比计的宽度(例：width="100%")

2)bgcolor标签属性：设定单元格背景颜色

color\_name：规定颜色值为颜色名称的背景颜色

hex\_number：规定颜色值为十六进制的背景颜色

rgb\_number：规定颜色值为rgb代码的背景颜色

3)align标签属性：设置单元格内容的水平对齐方式

left：左对齐内容(默认值)

right：右对齐内容

center：居中对齐内容(th元素的默认值)

justify：对行进行伸展，这样每行都可以有相等的长度

char：将内容对准指定字符

4)valign标签属性：设置单元格内容的垂直对齐方式

top：对内容进行上对齐

middle：对内容进行居中对齐(默认值)

bottom：对内容进行下对齐

baseline：与基线对齐

5)colspan样式属性：设置单元格横跨多少列

例：

colspan标签属性

\#title \{

text-align: center；

font-weight: bold;

6)rowspan样式属性：设置单元格横跨多少行

例：

rowspan标签属性

7)nowrap标签属性：设定单元格的内容是否换行

使用table表的知识完成如下操作：

nowrap标签属性

<table> 
 <tbody> 
  <tr> 
   <th> 姓名 </th> 
   <th> 年龄</th> 
   <th> 地址</th> 
  </tr> 
  <tr> 
   <td> 张三</td> 
   <td> 19 </td> 
   <td>北京市海淀区 </td> 
  </tr> 
 </tbody> 
</table>

(4)表格的html标签,html标签之表格标签

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 html表格标签(下)：lable标签，select标签和textara标签

相关 html的表格标签

相关网页设计：HTML表格标签

相关 html标签之表格标签

相关 HTML中的表格标签

相关三、 HTML表格标签

相关 (4)表格的html标签,html标签之表格标签

相关 html语言中移动表格,HTML标签表格滑动

相关 html用table标签制作表格

相关 html 表格的标签