范仁义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\tbody\tfoot元素的作用？

thead\tbody\tfoot都是语义化标签：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\tbody\tfoot元素

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>

四、课程代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>表格小实例</title>

 </head>

 <body>

     <table border="1">

         <colgroup span="1" style="background-color: red;">

         </colgroup>

         <colgroup span="3" style="">

             <col span="1" style="background-color: aqua;">

             <col span="1" style="background-color: green;">

             <col span="1" style="background-color: blue;">

         </colgroup>

         <colgroup span="1" style="background-color: darkseagreen;">

         </colgroup>

         <caption>表格标题</caption>

         <thead>

         <tr>

             <th>id</th>

             <th>姓名</th>

             <th>年龄</th>

             <th>爱好</th>

             <th>职业</th>

         </tr>

         </thead>

         <tbody>

         <tr>

             <td>1</td>

             <td>西门无恨</td>

             <td>55</td>

             <td>演戏</td>

             <td>南翔挖掘机</td>

         </tr>

         <tr>

             <td colspan="2">单元格</td>

             <td>单元格</td>

             <td>单元格</td>

             <td>单元格</td>

         </tr>

         <tr>

             <td rowspan="3">单元格</td>

             <td>单元格</td>

             <td>单元格</td>

             <td>单元格</td>

             <td>单元格</td>

         </tr>

         <tr>

             <td>单元格</td>

             <td>单元格</td>

             <td>单元格</td>

             <td>单元格</td>

         </tr>

         <tr>

             <td>单元格</td>

             <td>单元格</td>

             <td>单元格</td>

             <td>单元格</td>

         </tr>

         </tbody>

         <tfoot>

         <tr>

             <td colspan="5">这是测试表格注释信息</td>

         </tr>

         </tfoot>

     </table>

 </body>

 </html>

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