zoukankan      html  css  js  c++  java
  • 前端 table form

    1,table表格标签

        table:设置broder'1' 属性,单元格带边框的效果

        style='border-collapse:collapse;'表格中很细表格线的制作:

        tr:每行

          td:,每行单元格的数据

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    </head>
    <body>
    	<table border='1'  width="1000px" height='500px'>
    		<tr>
    			<td width="100px" height="100px">
    				<span>id</span>
    			</td>
    			<td>姓名</td>
    			<td>年龄</td>
    			<td>爱好</td>
    		</tr>
    		<tr>
    			<td>1</td>
    			<td>浩旭</td>
    			<td>梁颖</td>
    			<td>梁爽</td>
    		</tr>
    		<tr>
    			<td>2</td>
    			<td>浩旭</td>
    			<td>梁颖</td>
    			<td>梁爽</td>
    		</tr>
    		<tr>
    			<td>2</td>
    			<td>浩旭</td>
    			<td>梁颖</td>
    			<td>梁爽</td>
    		</tr>
    	</table>
    
    
    	<table border="1">
          <caption>人物介绍</caption>
          <!-- 
          thead 
          
          tbody 
          tfooter  
    		
    
          	方法 -->
          <tbody>
                <tr>
                    <td>小马哥</td>
                    <th>18</th>
                    <td>男</td>
                    <td rowspan="3">中国</td>
                </tr>
            </tbody>
        
        <tfoot>
                <tr>
                    <td>小岳岳</td>
                    <td>45</td>
                    <td>男</td>
                    
                </tr>
            </tfoot>
        <thead>
                <tr>
                    <td>邓紫棋</td>
                    <td>23</td>
                    <td>女</td>           
                </tr>
            </thead>
    
        </table>
    
    </body>
    </html>
    

      

    2,form表单标签:

      action:提交的地址

      method:提交方式:

          get:不安全

          post:相对安全

     input表单控件:

        type:

          text:明文显示用户输入的数据

          passwordd:密文显示用户的数据

          radio:单选按钮

          checkbox:复选框

          file:上传文件所用

          submit:功能固定化,负责将表中中的表单控件提交给服务端

        value:控件的值既要提交给服务端的数据

        name:控件的名称,服务端用

        disabled:该属性只要出现在标签中,表示是禁用控件

      注意:如果有文件需要交给服务器,method必须为POST,enctype必须为multipart/form-data

        reset :重置按钮

        selet:<option>挑选框

        

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    </head>
    <body>
    	<table border='1'  width="1000px" height='500px'>
    		<tr>
    			<td width="100px" height="100px">
    				<span>id</span>
    			</td>
    			<td>姓名</td>
    			<td>年龄</td>
    			<td>爱好</td>
    		</tr>
    		<tr>
    			<td>1</td>
    			<td>浩旭</td>
    			<td>梁颖</td>
    			<td>梁爽</td>
    		</tr>
    		<tr>
    			<td>2</td>
    			<td>浩旭</td>
    			<td>梁颖</td>
    			<td>梁爽</td>
    		</tr>
    		<tr>
    			<td>2</td>
    			<td>浩旭</td>
    			<td>梁颖</td>
    			<td>梁爽</td>
    		</tr>
    	</table>
    
    
    	<table border="1">
          <caption>人物介绍</caption>
          <!-- 
          thead 
          
          tbody 
          tfooter  
    		
    
          	方法 -->
          <tbody>
                <tr>
                    <td>小马哥</td>
                    <th>18</th>
                    <td>男</td>
                    <td rowspan="3">中国</td>
                </tr>
            </tbody>
        
        <tfoot>
                <tr>
                    <td>小岳岳</td>
                    <td>45</td>
                    <td>男</td>
                    
                </tr>
            </tfoot>
        <thead>
                <tr>
                    <td>邓紫棋</td>
                    <td>23</td>
                    <td>女</td>           
                </tr>
            </thead>
    
        </table>
    
    </body>
    </html>
    
  • 相关阅读:
    [Codeforces Round #498 (Div. 3)] -F. Xor-Paths (折半搜索)
    Best Reward [HDU
    [Educational Codeforces Round 72] A. Creating a Character (简单数学)
    [Codeforces Round #624 (Div. 3)] -E. Construct the Binary Tree (构造二叉树)
    [Codeforces Round #626 (Div. 2, based on Moscow Open Olympiad in Informatics)] -D. Present(异或性质,按位拆分,双指针)
    [Codeforces Round #626 (Div. 2, based on Moscow Open Olympiad in Informatics)] -D. Present(异或性质,按位拆分,树桩数组)
    [Educational Codeforces Round 83 ] E. Array Shrinking
    [AtCoder Beginner Contest 158]
    [CodeCraft-20 (Div. 2)]- E. Team Building (状压DP)
    HDU 3308 LCIS (线段树区间合并)
  • 原文地址:https://www.cnblogs.com/lnrick/p/9438117.html
Copyright © 2011-2022 走看看