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>
    
  • 相关阅读:
    HashMap源码解析
    如何同时运行两个Tomcat
    Thymeleaf遍历List<Map>和Map<>
    Apache POI详解
    如何管理系统的右键新建菜单
    datatable的dom配置
    如何获取Html的height和width属性(网页宽、高)
    什么是跨域?如何解决跨域问题?
    C# 各类文件扩展名
    C# 接口与抽象类的区别? 什么情景下使用接口,什么情景下使用抽象类?
  • 原文地址:https://www.cnblogs.com/lnrick/p/9438117.html
Copyright © 2011-2022 走看看