表格table标签 && form 表单标签

Posted 2021-12-19 by xiongmao; tagged with 按钮 , 表格 , 表单

表格 table

   
    表格table  tr表示一行  td表示一个
     
    <table border="1" align="center">
        <tr>
            <td>A1</td>
            <td>B1</td>
            <td>C1</td>
            <td>D1</td>
        </tr>
        <tr>
            <td>A2</td>
            <td>B2</td>
            <td>C2</td>
            rowspan 纵向合并 
            <td rowspan="2">D2</td>
        </tr>
        <tr>
            <td>A3</td>
            <td>B3</td>
            <td>C3</td>
         
        </tr>
        <tr>
            <td>A4</td>
            <td>B4</td>
            colspan 横向合并单元格 
            <td colspan="2">C4</td>
           
        </tr>
    </table>

长表格

 
        头部 thead
        主体 tbody
        底部 tfoot

        th 表示头部的单元格
     
     <table border="1" width="50%" align="center">
         <thead>
             <tr>
                 <th>日期</th>
                 <th>日期</th>
                 <th>日期</th>
                 <th>日期</th>
             </tr>
         </thead>
         <tbody>
             <tr>
                 <td>2000.1.1</td>
                 <td>500</td>
                 <td>500</td>
                 <td>500</td>
             </tr>
             <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>500</td>
                <td>500</td>
            </tr>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>500</td>
                <td>500</td>
            </tr>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>500</td>
                <td>500</td>
            </tr>
         </tbody>
         <tfoot>
             <tr>
                 <td></td>
                 <td></td>
                 <td>合计</td>
                 <td>500</td>
             </tr>
         </tfoot>
     </table>

表格样式

 <style>
   table{
            width: 50%;
            margin: 0 auto;
            border: 1px solid black;
              border-spacing: 指定边框之间的距离
                 border-spacing: 0px;
            
            border-collapse:collapse;设置边框的合并
           border-collapse: collapse;
        }
        td{
            border: 1px solid black;
            height: 100px;
            默认情况下元素在td中是垂直居中的，可以通过veryical-align 来设置
            
            vertical-align: middle;
            text-align: center;
        }
        
            如果浏览器中没有使用tbody而是直接使用tr
                那么浏览器会自动生成一个tbody，并且tr全部放到tbody中
                tr不是table的资源
        
        tbody > tr:nth-child(2n+1){
            background-color: #bfa;
        }
        .box1{
            width: 300px;
            height: 300px;
            background-color: orange;
            将元素设置为单元格 td

            display: table-cell;
            vertical-align: middle;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin: 0 auto;
        }
    </style>

表单 form

 
        表单：form的属性
            action 表单提交的服务器地址
  
     <form action="target.html">
        文本框
        input标签 type设置，需要设置一个name
        
       文本框 <input type="text" name="username">
       <br><br>
       密码框<input type="password" name="password">
       <br><br>
           单选按钮
                -像这种选择框，必须设置value 属性
                checked 可以将单选框设置为默认值
                单选框name属性必须填写一样
 
        单选按钮<input type="radio" name="hello" value="a">
        <input type="radio" name="hello" value="b" checked>

       <br><br>
        多选按钮<input type="checkbox" name="test" value="1">
        <input type="checkbox" name="test" value="2">
        <input type="checkbox" name="test" value="2">
       <br><br>

       下拉列表 
        select标签 > option标签
        selected 设置默认
   
        <select name="haha" >
            <option value="i">选项一</option>
            <option selected value="ii">选项二</option>
            <option value="iii">选项三</option>
        </select>


       <br><br>
       提交按钮，需要将type="submit"  修改名字value 
       <input type="submit" value="注册">

autocomplete="off" 关闭自动补全
        readonly  将表单设置为只读，数据会提交
        disabled  将表单项设置为禁用
        autofocus  设置表单自动获取焦点
        <input type="text" name="username" value="hello" readonly>
        <br><br>
        <input type="text" name="a" disabled>
        <br><br>
        <input type="text" name="b" autofocus>
        <br><br>
        <input type="color" email tel 等> 

       <input type="submit">
        重置按钮 
       <input type="reset">
         普通按钮 
        <input type="button" value="按钮">
        <br><br>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">按钮</button>
     </form>