HTML和CSS —— 11、表单和表格

表格和表单

一、表格

1.1 表格基本

<table border="1" width='50%' aligh='center'>
    <!--在tr中使用td表示一个单元格,有几个td就有几个单元格-->
    <tr>
        <!--在tr中使用td表示一个单元格,有几个td就有几个单元格-->
    	<td>A1</td>
        <td>B1</td>
        <td>C1</td>
    </tr>
      <tr>
    	<td>A2</td>
        <td>B2</td>
         <!--rowspan 纵向的合并单元格-->
        <td rowspan="2">C2</td>
    </tr>
    <tr>
        <!--colspan 横向的合并单元格-->
    	<td colspan="2">A3</td>
        <td>B3</td>
        <td>C3</td>
    </tr>
</table>

1.2 长表格,表格结构

<table border="1" width='50%' aligh='center'>
    <!--
		可以将一个表格分成三个部分
	-->
    <thead>
    	<tr>
            <th>A1</th>
            <th>B1</th>
            <th>C1</th>
    	</tr>
    </thead>
    <tbody>
    	<tr>
            <td>A2</td>
            <td>B2</td>
             <!--rowspan 纵向的合并单元格-->
            <td rowspan="2">C2</td>
 	   </tr>
            <tr>
            <!--colspan 横向的合并单元格-->
            <td colspan="2">A3</td>
            <td>B3</td>
            <td>C3</td>
    	</tr>
    </tbody>
    <tfoot>
    	<tr>
        	<td></td>
            <td colspan="2">合计</td>
            <td></td>
        </tr>
    </tfoot>
</table>

注意:如果表格中没有使用tbody而是直接使用tr,那么浏览器会自动创建一个tbody,并且将tr全部放到tbody中,所以tr不是table的子元素

1.3 表格的样式

1.3.1 表格边框样式
<style>
    table{
        /*1.指定边框之间的距离*/
        border-spacing:1px;
        /*2.设置边框的合并,即边框不会重合*/
        border-collapse:collapse;
    }
</style>
1.3.2 表格背景设置
<style>
    /*可以让一行有背景颜色一行没有*/
    tbody > tr:nth-child(odd){
        background-color:#bfa;
    }
</style>
1.3.3 表格内容的样式
<style>
    td{
        /*设置内容位置*/
        /*垂直方向*/
        vertical-align:middle;
        /*水平方向*/
        text-align:center;
    }
</style>

二、表单

2.1 表单介绍

​ 在网页中也可以使用表单,网页中的表单用于将本地的数据交给远程服务器

​ 使用form标签来创建一个表单

2.2 form的属性

  1. action

    ​ 表单要提交的服务器的地址

  2. method

    ​ 表单提交的方式

  3. 特殊

    以下可以用在form表示表单中标签都应用,也可以单独应用在input中

    autocomplete="off"   关闭自动补全
    readonly    将表单项设置为只读,数据会提交
    disabled    将表单项设置为禁用,数据不会提交
    aotofocus   设置表单项自动获取焦点
    

2.3 form中标签中的内容

  • input

    • type来指定input的类型
    • 数据要提交到服务器,必须要为元素指定一个name属性
    • checked属性可以选择默认值
    1. 文本框

      <input type="text" name="username"/>

    2. 密码框

      <input type="password" name="password"/>

    3. 单选按钮

      这种单选按钮,必须要指定一个value属性,value属性最终会作为用户的填写值

      多个按钮,如果name中的值一样,可以实现只能选一个

      <input type="radio" name="hello" value="a"><br>
      <input type="radio" name="hello" value="b" checked><br>
      
  1. 按钮

    <!--1.提交表单按钮-->
    <input type="submit">
    <!--2.重置表单按钮-->
    <input type="reset">
    <!--3.普通按钮-->
    <input type="button" value="按钮">
    
  • 下拉列表

    select属性为默认选择

    <select name="haha">
        <option value="i">选项一</option>
        <option selected value="ii">选项二</option>
        <option value="iii">选项三</option>
    </select>
    
  • 按钮

    1. 方式一 input

      <!--1.提交表单按钮-->
      <input type="submit"/>
      <!--2.重置表单按钮-->
      <input type="reset"/>
      <!--3.普通按钮-->
      <input type="button" value="按钮"/>
      
    2. 方式二 button

      <!--1.提交表单按钮-->
      <button type="submit"></button>
      <!--2.重置表单按钮-->
      <button type="reset"></button>
      <!--3.普通按钮-->
      <button type="button"></button>
      
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值