重走前端入门路（一）——HTML（2）
HTML表格
序号
产品名称
产品价格
01
苹果
¥5.00
可以在
一般是依靠字体自己撑开边框的，如果想要自定义宽和高，可以：
th默认居中对齐，加粗
td默认左对齐，不加粗
如果想要td/th 水平方向居中，可以
如果想要th/td 垂直方向靠上，可以
如果想要一行的五个格子合并：，并删除其他四个td
如果想要合并一列的五个格子：，并删除其他四个tr里面的td
table常用标签
table标签：声明一个表格
tr标签：定义表格中的一行
td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格
table常用属性
border 定义表格的边框
cellpadding 定义单元格内内容与边框的距离
cellspacing 定义单元格与单元格之间的距离
align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
colspan 设置单元格水平合并
rowspan 设置单元格垂直合并
用表格实现部分简历
表格合并
表格合并
基本情况
姓名
性别
民族
出生日期
政治面貌
健康情况
籍贯
学历
电子邮箱
联系电话
表格合并实现简单个人简历
传统布局
传统布局(table布局)：
传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：
定义表格宽高，将border、cellpadding、cellspacing全部设置为0
单元格里面嵌套表格
单元格中的元素和嵌套的表格用align和valign设置对齐方式
通过属性或者css样式设置单元格中元素的样式
传统布局目前应用：
快速制作用于演示的html页面
商业推广EDM制作(广告邮件)
个人简历table布局
个人简历
胡歌
131xxxxxxxx
[email protected]
个人基本信息
姓 名：胡歌
籍 贯：北京
性 别：男
身 高：185cm
民 族：汉
体 重：70kg
出生日期：1985.1.1
电 话：131xxxxxxxx
专 业：演员专业
现居住地：三里屯
教育背景及工作经历
2013-2017 北京戏剧学院 演员专业
2017-2019 横店华谊公司 专业演员
获奖经历
2016： 华谊优秀演员奖
2018： 华谊终身成就奖
table布局实现详细个人简历
HTML表单
html表单
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成；
实现一个特定功能的表单区域（比如：注册），首先应该用标签来定义表单区域整体，在此标签中再使用不同的表单控件来实现不同类型的信息输入。
相关标签及属性用法如下：
标签 定义整体的表单区域。action属性定义表单数据提交地址；method属性定义表单提交的方式，一般是get和post；少量数据用get，大量数据，敏感数据用post； 标签 为表单元素定义文字标注； 标签 定义多行文本输入框； 标签 定义下拉表单元素； 标签 与标签配合使用，定义下拉表单中的选择选项； 标签 定义通用的表单元素； 其中，input的属性包含： ``` value属性 定义表单元素的值； name属性 定义表单元素的属性，此名字是提交数据时的键名； type属性： type="text" 定义单行文本输入框 type="password" 定义密码输入框 type="radio" 定义单选框 type="checkbox" 定义多选框 type="file" 定义上传文件 type="submit" 定义提交按钮 type="reset" 定义重置按钮 type="image" 定义图片作为提交按钮，用src属性定义图片地址，不建议使用 type="hidden" 定义一个隐藏的表单域，用来存储值，比如以后学的csrftoken ``` 用表单实现用户注册示例 ``` 注册页面注册表单
男
女
唱歌
篮球
rap
表单实现用户注册页面
label的for属性
原来激活用户名输入框，必须要点击输入框才行；使用for属性，可以通过用户名来激活输入框；提高用户体验；
for属性示例
姓名：
性别： 男 女
``` HTML内嵌框架 内嵌框架的使用 标签会创建包含另外一个html文件的内联框架（即行内框架）； src属性来定义另一个html文件的引用地址； frameborder属性定义边框； scrolling属性定义是否有滚动条； 代码如下： ``` ``` 内嵌框架与a标签配合使用a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中，代码如下：
页面一
页面二
页面三
最后，给大家推荐一个前端学习进阶内推交流群685910553（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）
如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。
如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。
愿大家都能在编程这条路，越走越远。
更多文章：
前端HTML & CSS 基础入门（1）初识
前端HTML & CSS 基础入门（2）段落及文本
前端HTML & CSS 基础入门（3）列表及其样式
前端HTML & CSS 基础入门（4）边框与背景
前端HTML & CSS 基础入门（5）超链接
前端HTML & CSS 基础入门（6）表格
前端HTML & CSS 基础入门（7）表单
前端HTML & CSS 基础入门（8）CSS盒子
前端HTML & CSS 基础入门（9）布局与定位