课程名称：前端零基础入门（体系课）
课程章节：第一章 基础表格、第二章表格的操作
主讲老师：(课程中没有显示)
课程内容：
今天学习的内容包括：
了解表格的使用场景
表格的基本结构
如何操作表格
表格属性
表格跨行跨列
表格嵌套
表格的操作
课程收获：
基础表格
1、<table> 标签 代表表格
2、<tr> 标签 代表行
3、<td> 标签 代表单元格
4、
<table> <!-- table表格开始 -->
<tr> <!-- tr行标签 -->
<td></td> <!-- td单元格标签 -->
<td></td>
</tr>
</table> <!-- 表格结束 -->
5、<table border="1"> <!-- table标签的border属性代表着表格的边框，值为边框的粗细 -->
表格的操作
1、添加行：复制整个<tr>..</tr>来添加
2、添加列：每一行相对应的位置都要添加<td>...</td>；
3、删除行：把对对应位置的<tr>...</tr>内容全部删除
4、删除列：把每一行（<tr>...</tr>）的对应的<td>..</td>都删除
标题、表头和结构的表格
<caption></caption> 表格标题，居中显示
<th></th> 表格头，内容居中、加粗显示
带结构的表格：优化显示，加载一部分显示一部分
表格划分三部分：
thead：表格的头（放表格的表头）
tbody：表格的主体（放数据本体）
tfoot：表格的脚
这三个标签要统一使用，不能分开使用，按顺序使用,这三个标签不影响表格的布局，但对表结构进行了划分，如果表格过长，就能按照结构加载；就算把这个三个标签的顺序打乱，<thead>总是在表格最上方，<tfoot>总是在表格最下方,不仅划分不规则顺序表格,更重要是优化网页加载速度.
table标签的属性
1. width | height属性：宽 | 高
2. align属性：表格在包容它的容器里的位置 默认值：left 左 | right 右 | center 居中
3. border属性： 表格边框
4. bgcolor属性： 背景颜色
5. cellpadding属性： 单元格边与内容间距
6. cellspacing属性： 单元格间间距
7. frame属性： 外侧边框可见
默认值：void 不显示 | above 上 | below 下 | hsides 上下 | vsides 左右 | lhs 左 | rhs 右 |
box 所有四个边上显示外侧边框 / border 所有四个边上显示外侧边框
8. rules属性： 内侧边框可见
默认值： none 没有 | groups 位于行组和列组间的线条 | rows 行间 | cols 列间 | all 位于行组和列组间的线条
<tr>标签属性
1.align(行内容的水平对齐)left/center/right/justify/char
2.valign(行内容的垂直对齐)top/middle/bottom/baseline
Bgcolor(行的背景颜色)三种表示方式（rgb,十六进制，颜色名称）
单元格属性设置：
<td>和<th>
align,valign,bgcolor,width,height
三、<thead><tbody><tfoot>标签属性
align,valign对相对应内容进行水平和垂直对齐方式设置
bgcolor属性有三种形式
1.bgcolor="colorname"(直接输入颜色的英文名称如：red)
2.bgcolor="#xxxxxx"(用十六进制来表示：如#ff0000 可以用photoshop来提取颜色的值)
3.bgcolor="rgb(x,x,x)"(用rgb代码来表示如：rgb(255.,0,0) 值在0~255之间)
合并单元格
1. 跨列属性 colspan 相对应的列删除
2. 跨行属性 rowspan 相对应的下一行要删除
表格嵌套
把一个表格嵌入到另一个表格内需注意：
1.嵌入的表格一定是个完整的结构
2.嵌入的表格要放入td标签内
3.不能直接放入tr或者table标签内，因为<td>标签是我们表格最小单位，存放内容的单位
今天学习课程共用了125分钟，学习了一下表格在网页中用于数据和排版，本课程介绍表格概念、语法、操作，并通过案例掌握知识.最后对这几天学习的内容进行了总结今天也是收获满满的一天，希望能够每天学习一点点,一直坚持下，加油!
共同学习，写下你的评论
评论加载中...
作者其他优质文章
