表格的css属性

本文介绍了HTML表格的CSS属性,包括行分组标签、表格标题、列分组标签的使用,以及table和td标签的常用属性。此外,还补充了表单的相关内容,如input类型的多种用途、下拉菜单的option属性以及textarea的配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

表格的css属性

行分组标签

标签含义
thead表格的头部
tbody表格的主体
tfoot表格的尾部

只允许有一个头部,一个尾部,但是可以有多个主体。如果没有分组标签的话,浏览器会默认创建一个tbody

表格标题

标签:caption

属性属性值
text-align调整表格标题水平对齐方式
caption-side调整上下位置:top bottom

列分组标签

标签:colgroup

<colgroup span="数值"></colgroup>
让多少列分成一组,实现效果:比较好看的表格,方便js里面或所有的列

表格的CSS属性

标签table的常用属性

属性属性值
取消单元格与单元格之间的间距:border-spacing0px
实现1px的细线边框:border-collapsecollapse
表格布局算法的属性:table-layoutauto,fixed

标签td的常用属性

属性属性值
取消单元格与内容之间的间距:padding0px
隐藏空内容的单元格:empty-cellshide,用来做日历的效果

表单的补充

  表单的作用:用来收集用户信息。
  表单的标签: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水平方向拖拽

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值