【学习打卡】第5天 前端零基础入门 HTML表格

课程名称：前端零基础入门（体系课）

课程章节：第一章 基础表格、第二章表格的操作

主讲老师：(课程中没有显示)

课程内容：

今天学习的内容包括：

• 了解表格的使用场景

• 表格的基本结构

• 如何操作表格

• 表格属性
  

• 表格跨行跨列
  

• 表格嵌套

• 表格的操作
  

  
  

课程收获：

基础表格

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分钟，学习了一下表格在网页中用于数据和排版，本课程介绍表格概念、语法、操作，并通过案例掌握知识.最后对这几天学习的内容进行了总结今天也是收获满满的一天，希望能够每天学习一点点,一直坚持下，加油!