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>
     

4. 按钮

   <!--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>