表格的css属性
行分组标签
标签 | 含义 |
---|---|
thead | 表格的头部 |
tbody | 表格的主体 |
tfoot | 表格的尾部 |
只允许有一个头部,一个尾部,但是可以有多个主体。如果没有分组标签的话,浏览器会默认创建一个tbody
表格标题
标签:caption
属性 | 属性值 |
---|---|
text-align | 调整表格标题水平对齐方式 |
caption-side | 调整上下位置:top bottom |
列分组标签
标签:colgroup
<colgroup span="数值"></colgroup>
让多少列分成一组,实现效果:比较好看的表格,方便js里面或所有的列
表格的CSS属性
标签table的常用属性
属性 | 属性值 |
---|---|
取消单元格与单元格之间的间距:border-spacing | 0px |
实现1px的细线边框:border-collapse | collapse |
表格布局算法的属性:table-layout | auto,fixed |
标签td的常用属性
属性 | 属性值 |
---|---|
取消单元格与内容之间的间距:padding | 0px |
隐藏空内容的单元格:empty-cells | hide,用来做日历的效果 |
表单的补充
表单的作用:用来收集用户信息。
表单的标签:form标签
基本语法:<form action="提交跳转地址" method="提交方法"></form>
学习表单的时候学习的是一系列控件
input类型
<input type="?">
1)输入框:单行文本输入框,文本框
type=“text”
2)密码框:加密框
type="password"
3)提示文本
placeholder,和value的区别:value占位置才能显示,但是placeholder纯提示文本
4)单选框
应用场景:单选题
<input type="radio">男
<input type="radio">女
单选框默认存在问题:共选问题,通过一个name属性来解决,name取值一致
<input type="radio" name="sex">男
<input type="radio" name="sex">女
默认的选中:checked
<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女
5)文本上传
文件上传:type=“file”;
6)隐藏域
隐藏文本上传:type=“hidden”
通过隐藏域上传的东西,用户是看不见的。
7)按钮类
提交按钮=type=“submit”;
重置按钮=type=“reset”;
普通按钮=======type=“button”;
下拉菜单
<select name="" id="">
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>广州</option>
</select>
select属性:
属性 | 属性值 |
---|---|
size | 默认只选择一个 |
multiple | 可以选择多个 |
option属性
属性 | 属性值 |
---|---|
value属性 | 方便js获取下拉菜单的值 |
selected | 默认选中的 |
textarea类型
多行文本输入框,当文本输入完一整行时,文本会这行显示,使用语法
<textarea></textarea>
注意:两个标签不要分开,因为分开之后标签会有很多的空格tab。
标签的属性:cols输入的列数控制的宽度
rows输入的行数,控制的高度
resize属性,none代表不能拖拽,both两个方向都能拖拽,vertical垂直方向拖拽,horizontal水平方向拖拽