浅析Table 和 div 的简介及用法

Web前端1

学号	姓名	性别	年龄
01	张三	男	20
02	李四	女	21
人数合计			60

表格的组成部分：

    标题 表头 主体 表尾

Table 定义一个表格

1. <table border="1" cellspacing="0" cellpadding="0" align="center">
   
2. </table>

复制代码

Caption 定义表格的标题

1. <caption>web前/caption>端1<

复制代码

Thead 定义表头的部分

1. <thead>
   
2.                                 <tr>
   
3.                                         <th>学号</th>
   
4.                                         <th>姓名</th>
   
5.                                         <th>性别</th>
   
6.                                         <th>年龄</th>
   
7.                                 </tr>
   
8.                         </thead>

复制代码

Tbody 定义表格的主体

1. <tbody>
   
2.                                 <tr>
   
3.                                         <td>01</td>
   
4.                                         <td>张三</td>
   
5.                                         <td>男</td>
   
6.                                         <td>20</td>
   
7.                                 </tr>
   
8.                                 <tr>
   
9.                                         <td>02</td>
   
10.                                         <td>李四</td>
    
11.                                         <td>女</td>
    
12.                                         <td>21</td>
    
13.                                 </tr>
    
14.                                 <tfoot>
    
15.                                         <tr>
    
16.                                                 <td colspan="3">人数合计:</td>
    
17.                                                 <td>60</td>
    
18.                                         </tr>
    
19.                                 </tfoot>
    
20.                         </tbody>

复制代码

Tfoot 定义表尾，一般来显示汇总信息

1. <tfoot>
   
2.                                         <tr>
   
3.                                                 <td colspan="3">人数合计:</td>
   
4.                                                 <td>60</td>
   
5.                                         </tr>
   
6.                                 </tfoot>

复制代码

Tr 定义一行

1. <tr>
   
2.                                         <th>学号</th>
   
3.                                         <th>姓名</th>
   
4.                                         <th>性别</th>
   
5.                                         <th>年龄</th>
   
6.                                 </tr>

复制代码

Th td 定义数据项（单元格） th 一般用于表头，有加粗的样式

Td 一般用于主体部分，没有加粗样式

1. <tr>
   
2.                                         <td>01</td>
   
3.                                         <td>张三</td>
   
4.                                         <td>男</td>
   
5.                                         <td>20</td>
   
6.                                 </tr>

复制代码

Td rowspan 和 colspan 分别定义单元格跨行的行数，跨列的列数

1. <td colspan="3">人数合计:</td>

复制代码

Cellspacing 定义表格的间距和边距

1. <table border="1" cellspacing="0" cellpadding="10">

复制代码

Div 定义一个分块 （division）

1. <div style="width: 200px;height: 200px;background-color:skyblue";>

复制代码

特点：在新的一行显示  块级标签

块级标签 与 行内标签的区别：

块级标签占满行  行内标签会按照顺序从左到右依次排列

块级标签：h1-h6  p  ul  ol  li  div table  dl  form

行内标签：span  a  br lable  I  em

块级元素的特点：display:block

• 每个块都是从新的一行开始，后面的元素会另起一行
• 元素的宽度、高度、行高、内外边距都可设置
• 若不设置元素的宽度，是他父容器的100%，除非给他设定高度
  

行内元素的特点：display：inline

• 和其他的元素都在一行上
• 不能设置元素的宽度，高度，行高，内外边距
• 元素的宽度是他包含文字或图片的宽度，不能改变
  

行内块元素的特点：display：inline-block

• 和其他的元素都在一行上
• 宽度，高度，行高，内外边距都可以设置
  

Web前端1

学号	姓名	性别	年龄
01	张三	男	20
02	李四	女	21
人数合计			60

表格的组成部分：

    标题 表头 主体 表尾

Table 定义一个表格

1. <table border="1" cellspacing="0" cellpadding="0" align="center">
   
2. </table>

复制代码

Caption 定义表格的标题

1. <caption>web前/caption>端1<

复制代码

Thead 定义表头的部分

1. <thead>
   
2.                                 <tr>
   
3.                                         <th>学号</th>
   
4.                                         <th>姓名</th>
   
5.                                         <th>性别</th>
   
6.                                         <th>年龄</th>
   
7.                                 </tr>
   
8.                         </thead>

复制代码

Tbody 定义表格的主体

1. <tbody>
   
2.                                 <tr>
   
3.                                         <td>01</td>
   
4.                                         <td>张三</td>
   
5.                                         <td>男</td>
   
6.                                         <td>20</td>
   
7.                                 </tr>
   
8.                                 <tr>
   
9.                                         <td>02</td>
   
10.                                         <td>李四</td>
    
11.                                         <td>女</td>
    
12.                                         <td>21</td>
    
13.                                 </tr>
    
14.                                 <tfoot>
    
15.                                         <tr>
    
16.                                                 <td colspan="3">人数合计:</td>
    
17.                                                 <td>60</td>
    
18.                                         </tr>
    
19.                                 </tfoot>
    
20.                         </tbody>

复制代码

Tfoot 定义表尾，一般来显示汇总信息

1. <tfoot>
   
2.                                         <tr>
   
3.                                                 <td colspan="3">人数合计:</td>
   
4.                                                 <td>60</td>
   
5.                                         </tr>
   
6.                                 </tfoot>

复制代码

Tr 定义一行

1. <tr>
   
2.                                         <th>学号</th>
   
3.                                         <th>姓名</th>
   
4.                                         <th>性别</th>
   
5.                                         <th>年龄</th>
   
6.                                 </tr>

复制代码

Th td 定义数据项（单元格） th 一般用于表头，有加粗的样式

Td 一般用于主体部分，没有加粗样式

1. <tr>
   
2.                                         <td>01</td>
   
3.                                         <td>张三</td>
   
4.                                         <td>男</td>
   
5.                                         <td>20</td>
   
6.                                 </tr>

复制代码

Td rowspan 和 colspan 分别定义单元格跨行的行数，跨列的列数

1. <td colspan="3">人数合计:</td>

复制代码

Cellspacing 定义表格的间距和边距

1. <table border="1" cellspacing="0" cellpadding="10">

复制代码

Div 定义一个分块 （division）

1. <div style="width: 200px;height: 200px;background-color:skyblue";>

复制代码

特点：在新的一行显示  块级标签

块级标签 与 行内标签的区别：

块级标签占满行  行内标签会按照顺序从左到右依次排列

块级标签：h1-h6  p  ul  ol  li  div table  dl  form

行内标签：span  a  br lable  I  em

块级元素的特点：display:block

• 每个块都是从新的一行开始，后面的元素会另起一行
• 元素的宽度、高度、行高、内外边距都可设置
• 若不设置元素的宽度，是他父容器的100%，除非给他设定高度
  

行内元素的特点：display：inline

• 和其他的元素都在一行上
• 不能设置元素的宽度，高度，行高，内外边距
• 元素的宽度是他包含文字或图片的宽度，不能改变
  

行内块元素的特点：display：inline-block

• 和其他的元素都在一行上
• 宽度，高度，行高，内外边距都可以设置