手记

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

1人推荐
随时随地看视频
慕课网APP