范仁义html+css课程---6、表格

一、总结

一句话总结：

表格中最常用的元素就是table、tr、td、th，还有语义化的thead、tbody、tfoot标签

1、表格构成三个基本要素？

table：表格的范围，外框；用来定义表格，表格的其他元素包含在table标签里面

tr：表格的行

td：表格的单元格

2、表格中的th元素和 caption 元素分别是做什么的？

th：用来定义表格的标题单元格，要放在tr里面

caption元素：给表格添加标题，放在table元素中

3、table中如何合并单元格？

colspan元素：横向合并单元格： <td colspan="3">单元格内容</td>

rowspan元素：纵向向合并单元格：<td rowspan="3">单元格内容</td>

4、thead body foot元素的作用？

thead body foot都是语义化标签：thead元素：表格的表头；tbaody元素：表格的主体；tfoot元素:表格的页脚；

5、colgroup元素和 col元素如何使用？

colgroup元素可以组合列，为列设置样式，它的span属性为几就是表示组合几列

col元素在colgroup元素组合的列为多列时，可以用span属性设置一列或多列的样式

二、表格相关知识

博客对应视频课程位置：6、表格
https://fanrenyi.com/video/2/11

1、表格基本要素

a、表格构成三个基本要素

table：表格的范围，外框；用来定义表格，表格的其他元素包含在table标签里面；

tr: 表格的行；

td:表格的单元格

td，英文全称是"table data cell"，中文含义："表中的数据单元".

tr ，英文全称是"table row"的缩写，中文含义"表行".

b、th元素:为表格添加标题行

th，英文全称是"table header cell"的缩写，中文含义"表头单元格".

th元素用来定义表格的标题单元格，他是tr元素的子元素，必须放在tr标签里边；tr元素的内容会自动居中对齐并加粗文字

c、一点说明：关于表格的属性

HTML5中删除了HTML4中table的大部分属性，HTML5中推荐使用CSS设定原来table属性实现的效果。对于HTNL5中已经废弃的大部分属性不在对其讲解

d、caption元素:给表格添加标题

用来制定表格的标题或者说明；是table的子元素，必须放在table中使用
caption的align属性可以设置标题的位置，但是，在HTML5中已经被废弃，不推荐使用，建议使用CSS样式设置，后边课程会讲到。

2、合并单元格

colspan元素:横向合并单元格

属性值为正整数，表示该单元格合横向合并的列数，语法为 <td colspan="3">单元格内容</td>

colspan 英文全称为：column span 。

column ['kɒləm]： n.栏、柱子，列

span [spæn]：n.间距、跨度

colspan意思是：列跨度

rowspan元素:纵向向合并单元格

属性值为正整数，表示该单元格合纵向向合并的行数数，语法为 <td rowspan="3">单元格内容</td>

3、thead body foot元素

thead元素：表格的表头；tbaody元素：表格的主体；tfoot元素:表格的页脚；表格规范的写法应该包含这三部分内容
注：这三个主要结合CSS、javaScript来使用

4、组合列元素

colgroup元素

colgroup元素用来组合列，他的span属性可以设置组合列的数目；它可以包含一个子元素 col;
colgroup元素为table元素的子元素，必须放在caption元素之后，thead元素之前。

col元素

col元素用来设定列的属性，他也可以使用span属性；
col元素一般作为colgroup元素的子元素配合使用。

三、表格实例

一个简单的表格

表格由行<tr> 和列<td> ,<td>必须包含在<tr>中。一行可以有多个列

<table border="1">      //表示带边框的表格

<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

表格的标题

caption

<table border="1">     
<caption>这是一个表格</caption>
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

表头和表项

表头由<tr> 和<th>组成。
表项由<tr>和<td>组成。


<table border="1"  width="300px" >   
<tr>
	 <th>姓名</th>
 	 <th>年龄</th>
  	<th>职业</th>
	</tr>
<tr>
  <td>张三</td>
  <td>20</td>
  <td>学生</td>
</tr>
<tr>
  <td>李四</td>
  <td>30</td>
  <td>开挖机</td>
</tr>
</table>

合并单元格

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">	
	<title></title>
</head>
<body>

<table border="1"  width="300px" >   

<tr>
	 <th  rowspan="4"> 基本情况 </th>    //rowspan="4"表示占一列的4个单元格
	 <th>姓名</th>
 	 <th>年龄</th>
  	<th>职业</th>
	</tr>

<tr>
  <td>张三</td>
  <td>20</td>
  <td>学生</td>
</tr>

<tr>
  <td>李四</td>
  <td>30</td>
  <td>开挖机</td>
</tr>

<tr>
 <td colspan="3">共统计：2人</td>     //colspan="3"  表示水平共占3个单元格。
  
</tr>
</table>
</body>
</html>

表头和表脚

使用thead可以指定一行为表头，可以在代码的任何地方。表头的内容是粗体显示，居中。
tfoot 表示表脚。显示的指出哪一行为表脚
tbody` 表示表的主体部分，可以不写

//最开始写表脚，因为显示的指出是表脚，所以在表的最底部显示。动态生成时会用到共统计：2人张三 20 学生李四 30 开挖机 //表头写在最后，也会在最上面显示姓名年龄职业 ```

设置一列的背景颜色

如果想把第二列的背景颜色设置为红色。可以用如下代码
colgroup style=“background: blank;” span=“1” /colgroup //把第一列设置成白色 span="1"表示影响一列

<table border="1"  width="300px" >   
<colgroup style="background: blank;" span="1"> </colgroup>   //把第一列设置成白色    span="1"表示影响一列
<colgroup style="background: red;" span="1"> </colgroup>	    //把第一列设置成红色
<tr>
   <th>姓名</th>
   <th>年龄</th>
    <th>职业</th>
  </tr>
<tr>
  <td>张三</td>
  <td>20</td>
  <td>学生</td>
</tr>
<tr>
  <td>李四</td>
  <td>30</td>
  <td>开挖机</td>
</tr>
</table>

第二种写法

<colgroup>
<col >
<col style="background: red;">
</colgroup>

四、课程代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表格小实例</title>
 6 </head>
 7 <body>
 8     <table border="1">
 9         <colgroup span="1" style="background-color: red;">
10         </colgroup>
11         <colgroup span="3" style="">
12             <col span="1" style="background-color: aqua;">
13             <col span="1" style="background-color: green;">
14             <col span="1" style="background-color: blue;">
15         </colgroup>
16         <colgroup span="1" style="background-color: darkseagreen;">
17 
18         </colgroup>
19         <caption>表格标题</caption>
20         <thead>
21         <tr>
22             <th>id</th>
23             <th>姓名</th>
24             <th>年龄</th>
25             <th>爱好</th>
26             <th>职业</th>
27         </tr>
28         </thead>
29         <tbody>
30         <tr>
31             <td>1</td>
32             <td>西门无恨</td>
33             <td>55</td>
34             <td>演戏</td>
35             <td>南翔挖掘机</td>
36         </tr>
37         <tr>
38             <td colspan="2">单元格</td>
39             <td>单元格</td>
40             <td>单元格</td>
41             <td>单元格</td>
42         </tr>
43         <tr>
44             <td rowspan="3">单元格</td>
45             <td>单元格</td>
46             <td>单元格</td>
47             <td>单元格</td>
48             <td>单元格</td>
49         </tr>
50         <tr>
51             <td>单元格</td>
52             <td>单元格</td>
53             <td>单元格</td>
54             <td>单元格</td>
55         </tr>
56         <tr>
57             <td>单元格</td>
58             <td>单元格</td>
59             <td>单元格</td>
60             <td>单元格</td>
61         </tr>
62         </tbody>
63         <tfoot>
64         <tr>
65             <td colspan="5">这是测试表格注释信息</td>
66         </tr>
67         </tfoot>
68     </table>
69 </body>
70 </html>

部分资料来源于网络，侵删