html表格和表单

313 阅读1分钟

表格

表格基础

  • table标签:表格容器
  • tr标签:一个行
  • td标签:一个单元格
  • colspan属性:横向合并单元格
  • rowspan属性:纵向合并单元格
  • 长表格标签:thead头部、tbody主体、tfoot底部

表格的样式

  • table是块元素,具有块元素的特质。
  • border-spacing:指定边框的距离
  • border-collapse:collapse;边框合并
  • tr+:first-child/:nth-child(2n+1/2n/odd/even)伪类选择器设置样式
  • 如果没使用tbody,浏览器会自动创建tbody,tr是tbody的子元素,不是table的子元素。
  • td可以用vertical-align垂直居中、text-align水平居中

表格布局

基本不用了,只有在展示一些格式化数据时才用,例如日历等。

表单

表单用来提交数据,网页中的表单用于将本地的数据提交给远程的服务器

表单基础

  • form创建表单,action属性写服务器地址 常用表单元素:
  • 元素input:属性type可选值text文本框、password密码框、radio单选框、checkbox多选框、submit提交按钮、reset重置按钮、button普通按钮等;
  • 元素select下拉列表:option元素定义待选择的选项。
  • 元素button按钮:type可选值submit提交按钮、reset重置按钮、button普通按钮等;与input区别是button是双标签。
  • 另,name、value用于传值。

其他常用属性

  • autocomplete="off" 关闭自动补全
  • readonly 只读,数据会提交
  • disabled 禁用,数据不会提交
  • autofocus 自动获取焦点