- 表格table
表格是一种常用的标签,但不是用来布局,常用来 显示、展示表格式数据。
因为它可以让数据显示的非常的规整,可读性非常好。
特别是后台展示数据的时候表格运用是否熟练就显得很重要。一个清爽简约的表格能够吧繁杂的数据表现得很有调理,虽然div布局也可以做到,但是总没有表格来的方便。
-
- 创建表格
创建表格的基本语法:
<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>标签,他就像一个容器,可以容纳所有的元素
-
- 大的
- 表格属性
表格有部分属性我们不常用,这里重点记住cellspacing和cellpadding
属性名 | 含义 | 常用属性值 |
border | 设置表格table的边框(默认border=“0”无边框) | 像素值 |
cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值(默认为2px) |
cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值(默认为1px) |
width | 设置表格table的宽度 | 像素值 |
height | 设置表格table的高度 | 像素值 |
align | 设置表格table在网页中的对齐方式 | left、center、right |
我们通常有个说法,是三参为0,平时开发的时候,border、cellspacing、cellpadding为0
- 表头单元格th
- 作用
- 一般表头单元格位于表格的第一行或者第一列,并且文本加粗居中
- 语法
- 只需用表头标签<th></th>替代相应的单元格标签<td></td>即可
- 表格标题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标签之后。
- 这个标签只存在表格里面才有意义
- 合并单元格
- 跨行合并: rowspan
- 跨列合并:colspan
合并的顺序按照 先上后下 先左后右的顺序
合并单元格三步曲
- 先确定是跨行还是跨列合并
- 根据先上后下 先左后右的员额找到目标单元格,然后写上合并方式和合并的单元格数量
eg: <td colspan="3"></td>
- 删除多余的单元格
- 拓展阅读
- 表格划分结构(了解)
对于比较复杂的表格,表格的结构也就相对的复杂了,所以又将表格分割成三个部分:题头、正文和脚注。而这三部分分别用 thead、tbody、tfoot来标注,这样更好的分清表格结构。
-
- 注意
- thead:用于定义表格的头部,用来存放标题之类的东西。thead内部必须拥有tr标签!
- tbody:用于定义表格的主,放数据本体
- tfoot:放表格的脚注之类。
- 以上标签都是放到table标签中。
- 注意