3 表格

1. 表格table

表格是一种常用的标签，但不是用来布局，常用来 显示、展示表格式数据。

因为它可以让数据显示的非常的规整，可读性非常好。

特别是后台展示数据的时候表格运用是否熟练就显得很重要。一个清爽简约的表格能够吧繁杂的数据表现得很有调理，虽然div布局也可以做到，但是总没有表格来的方便。

• 1. 创建表格

创建表格的基本语法：

<table> <tr> <td>表格内的文字</td> <td>表格内的文字</td> <td>表格内的文字</td> </tr> <tr> <td>表格内的文字</td> <td>表格内的文字</td> <td>表格内的文字</td> </tr> </table>

 

总结：

• 表格的主要目的是用来显示特殊数据的
• 一个完整的表格有表格标签table 、行标签tr 、单元格标签td组成，没有列的标签
• <tr></tr>中只能嵌套<td></td>类的单元格
• <td></td>标签，他就像一个容器，可以容纳所有的元素

• 1. 大的

 

1. 表格属性

表格有部分属性我们不常用，这里重点记住cellspacing和cellpadding

属性名	含义	常用属性值
border	设置表格table的边框（默认border=“0”无边框）	像素值
cellspacing	设置单元格与单元格边框之间的空白间距	像素值（默认为2px）
cellpadding	设置单元格内容与单元格边框之间的空白间距	像素值（默认为1px）
width	设置表格table的宽度	像素值
height	设置表格table的高度	像素值
align	设置表格table在网页中的对齐方式	left、center、right

 

 

 

我们通常有个说法，是三参为0，平时开发的时候，border、cellspacing、cellpadding为0

 

1. 表头单元格th

 

• 作用
  • 一般表头单元格位于表格的第一行或者第一列，并且文本加粗居中
• 语法
  • 只需用表头标签<th></th>替代相应的单元格标签<td></td>即可

 

1. 表格标题caption

定义和用法

<table> <caption>表格的标题</caption> <tr> <th>表头</th> <th>表头</th> <th>表头</th> <th>表头</th> <th>表头</th> </tr> <tr> <td>qqq</td> <td>qqq</td> <td>qqq</td> <td>qqq</td> <td>qqq</td> </tr> </table>

 

注意：

• caption元素定义表格标题，通常这个标题会被居中且显示于表格之上。
• caption标签必须紧随table标签之后。
• 这个标签只存在表格里面才有意义

 

1. 合并单元格

• 跨行合并： rowspan
• 跨列合并：colspan

合并的顺序按照 先上后下 先左后右的顺序

 

合并单元格三步曲

1. 先确定是跨行还是跨列合并
2. 根据先上后下 先左后右的员额找到目标单元格，然后写上合并方式和合并的单元格数量

eg: <td colspan="3"></td>

1. 删除多余的单元格

 

 

1. 拓展阅读
   1. 表格划分结构（了解）

对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用 thead、tbody、tfoot来标注，这样更好的分清表格结构。

• 1. 注意
     1. thead：用于定义表格的头部，用来存放标题之类的东西。thead内部必须拥有tr标签！
     2. tbody：用于定义表格的主，放数据本体
     3. tfoot：放表格的脚注之类。
     4. 以上标签都是放到table标签中。