2. 程式人生 > >html表格佈局

html表格佈局

阿新 • • 發佈：2018-11-08

表格佈局

   
                <table border = "1" width= "600px" style="margin: auto">
	             <tr>
	              	<td colspan="6"  >ss
	               	</td>
					<td colspan="6"  >ss
	               	</td>
	             </tr>
	            <tr>
	                <td   width= "25% " colspan="4"> 　 </td>  
	                <td   width= "25% " colspan="4"> 　 </td>  
	                <td   width= "25% " colspan="4"> 　 </td>  
	           </tr>
                </table>
                <p align="center">灶具種類</p>
                <table border = "1" width= "600px" style="margin: auto">
	            <tr>
	                <td   width= "25% " colspan="3"> 　 </td>  
	                <td   width= "25% " colspan="3"> 　 </td>  
	                <td   width= "25% " colspan="3"> 　 </td>  
	                <td   width= "25% " colspan="3"> 　 </td>  
	           </tr>
				<tr>
	                <td   width= "25% " colspan="3"> 　 </td>  
	                <td   width= "25% " colspan="3"> 　 </td>  
	                <td   width= "25% " colspan="3"> 　 </td>  
	                <td   width= "25% " colspan="3"> 　 </td>  
	           </tr>
				<tr>
	                <td   width= "25% " colspan="8"> 　 </td>  
	                <td   width= "25% " colspan="4"> 　 </td>  
	           </tr>
                </table>
                <table border = "1" width= "600px" style="margin: auto">
	            <tr>
	                <td   width= "25% " colspan="12"> 　 </td> 
	           </tr>
				<tr>
	                <td   width= "25% " colspan="3"> 　 </td>  
	                <td   width= "25% " colspan="3"> 　 </td>  
	                <td   width= "25% " colspan="3"> 　 </td>  
	                <td   width= "25% " colspan="3"> 　 </td>  
	           </tr>
				<tr>
	                <td   width= "25% " colspan="8"> 　 </td>  
	                <td   width= "25% " colspan="4"> 　 </td>  
	           </tr>
                </table>

樣式

整個表格構建

<head>
    <meta charset="utf-8" />
    <style type="text/css">
    	table tr td{
    		height:70px;
    	}
    </style>
</head>
<body>
    <div id="pageloadingright" class="pageloadingright">
    </div>
    <div id="pageloading" class="pageloading">
        <div class="loader-inner">
        </div>
    </div>
    <div class="easyui-layout" style="height: 100%;padding-bottom: 50px;">
        <div data-options="region:'center'" style="font-weight:bold;font-size:14px">
           <form id="submit_form" action="/" method="post">
                <input type="hidden" name="installApplyId" />
                <table border = "1" width= "960px" style="margin: auto">
	             <tr>
	              	<td colspan="4"  width= "25% ">
	        <p align="center">使用者名稱稱
	          <input name="assistDeviceName" class="easyui-textbox" style="width: 200px;">
	          <input type="hidden" name="gfyId">
              <button type="button" class="btn btn-info btn-sm" action="querySelect(this,event)">
                                    選擇
              </button>
	          </p>
	               	</td>
					<td colspan="8"  width= "75% ">
					<p align="center">使用者地址
	          <input name="assistDeviceName" class="easyui-textbox" style="width: 400px;">
	          </p>
	               	</td>
	             </tr>
	            <tr>
	                <td   width= "25% " colspan="4"> 　 
	               <p align="center">使用者聯絡人
	              <input name="assistDeviceName" class="easyui-textbox" style="width: 200px;">
	              </p>
	                </td>  
	                <td   width= "25% " colspan="4"> 　 
	                <p align="center">聯絡電話
	              <input name="assistDeviceName" class="easyui-textbox" style="width: 200px;">
	              </p>
	                </td>  
	                <td   width= "25% " colspan="4"> 　 
	              <p align="center">使用者性質
	              <input name="assistDeviceName" class="easyui-textbox" style="width: 200px;">
	              </p>
	                </td>  
	           </tr>
                </table>
                <div style="margin-top: 20px;">
                <p align="center" style="font-size:16px;">灶具種類</p>
                </div>    
                <table border = "1" width= "960px" style="margin: auto">
	            <tr>
	                <td   width= "25% " colspan="3"> 　 
	               <p align="center">中餐灶(臺數)
	              <input name="assistDeviceName" class="easyui-textbox" style="width: 100px;">
	              </p>
	               </td>  
	                <td   width= "25% " colspan="3"> 　 
	               <p align="center">大鍋灶(臺數)
	              <input name="assistDeviceName" class="easyui-textbox" style="width: 100px;">
	              </p>
	                 </td>  
	                <td   width= "25% " colspan="3"> 　 
	              <p align="center">蒸 箱(臺數)
	              <input name="assistDeviceName" class="easyui-textbox" style="width: 100px;">
	              </p>
	               </td>  
	                <td   width= "25% " colspan="3"> 　 
	              <p align="center">蒸 櫃(臺數)
	              <input name="assistDeviceName" class="easyui-textbox" style="width: 100px;">
	              </p>
	              </td>  
	           </tr>
				<tr>
	                <td   width= "25% " colspan="3"> 　 
	               <p align="center">煲仔爐(臺數)
	              <input name="assistDeviceName" class="easyui-textbox" style="width: 100px;">
	              </p>
	               </td>  
	                <td   width= "25% " colspan="3"> 　 
	               <p align="center">烤鴨爐(臺數)
	              <input name="assistDeviceName" class="easyui-textbox" style="width: 100px;">
	              </p>
	               </td> 
	                <td   width= "50% " colspan="6"> 　
	             <p align="center">低湯灶(臺數)
	              <input name="assistDeviceName" class="easyui-textbox" style="width: 100px;">
	              </p>
	             </td>   
	           </tr>
				<tr>
	             <td   width= "25% " colspan="12"> 　 
	              <p align="right">用氣總量T/月
	              <input name="assistDeviceName" class="easyui-textbox" style="width: 200px;">
	              T/月
	              </p>
	          </td>  
	           </tr>
                </table>
                <div style="margin-top: 20px;">
                <p align="center" style="font-size:16px;">瓶庫間基本情況</p>
                </div>
                <table border = "1" width= "960px" style="margin: auto">
	            <tr>
	                <td   width= "25% " colspan="12"> 　 
	                <p align="center">1.瓶庫集氣間面積:長
	                <input name="assistDeviceName" class="easyui-textbox" style="width: 80px;">
	                     寬
	                <input name="assistDeviceName" class="easyui-textbox" style="width: 80px;">
	                高
	                <input name="assistDeviceName" class="easyui-textbox" style="width: 80px;">
	                 題庫間門窗是否防火
	                <input name="assistDeviceName" class="easyui-textbox" style="width: 80px;">
	                是否外開
	                <input name="assistDeviceName" class="easyui-textbox" style="width: 80px;">
	                </p>
	                </td> 
	           </tr>
				<tr>
	                <td   width= "25% " colspan="12"> 　 
	                <p align="center">2.瓶庫內是否有暖氣溝、地漏、溝槽
	                <input name="assistDeviceName" class="easyui-textbox" style="width: 80px;">
	                     題庫位置是否在房中
	                <input name="assistDeviceName" class="easyui-textbox" style="width: 80px;">
	                是夠有地下室
	                <input name="assistDeviceName" class="easyui-textbox" style="width: 80px;">
	                 其他
	                <input name="assistDeviceName" class="easyui-textbox" style="width: 160px;">
	                </p>
	                </td> 
	           </tr>
				<tr>
	                <td   width= "25% " colspan="12"> 　 
	          <p align="center">3.瓶庫內通風是否良好
	                <input name="assistDeviceName" class="easyui-textbox" style="width: 80px;">
	                     是否自然通風
	                <input name="assistDeviceName" class="easyui-textbox" style="width: 80px;">
	                是否強制排風
	                <input name="assistDeviceName" class="easyui-textbox" style="width: 80px;">
	                 瓶庫間是否有強暴風機
	                <input name="assistDeviceName" class="easyui-textbox" style="width: 80px;">
	                </p>
	               </td>  
	           </tr>
	           <tr>
	              <td   width= "25% " colspan="12"> 　 
	          <p align="center">4.瓶庫間電路是否防爆
	                <input name="assistDeviceName" class="easyui-textbox" style="width: 80px;">
	                     是否有濃度報警器
	                <input name="assistDeviceName" class="easyui-textbox" style="width: 80px;">
	                是否安裝緊急切斷閥
	                <input name="assistDeviceName" class="easyui-textbox" style="width: 80px;">
	                </p>
	               </td>  
	           </tr>
	         <tr>
	              <td   width= "50% " colspan="6"> 　 
	          <p align="center">審批人
	          <input name="assistDeviceName" class="easyui-textbox" style="width: 160px;">
	          </p>
	               </td>  
	               <td   width= "50% " colspan="6"> 　 
	          <p align="center">審批狀態
	          <input name="assistDeviceName" class="easyui-textbox" style="width: 160px;">
	          </p>
	               </td>    
	           </tr>
	        <tr>
	              <td   width= "50% " colspan="6"> 　 
	          <p align="center">審批意見
	           <input name="assistDeviceName" class="easyui-textbox" style="width: 160px;">
	          </p>
	               </td>    
	               <td   width= "50% " colspan="6"> 　 
	          <p align="center">審批時間
	           <input name="assistDeviceName" class="easyui-textbox" style="width: 160px;">
	          </p>
	               </td>   
	           </tr>
                </table>
            </form>
        </div>
    </div>
    <nav class="navbar navbar-default navbar-fixed-bottom" style="width: 100%">
        <div class="footcommandbar" style="vertical-align: middle; line-height: 50px;text-align: right">
            <button type="button" id="btnSave" class="btn btn-primary">
                <i class="glyphicon glyphicon-save"></i>
                儲存
            </button>
        </div>
    </nav>
</body>

 

 

相關推薦

html表格佈局

表格佈局 <table border = "1" width= "600px" style="margin: auto">   <tr>        

HTML——表格、表格巢狀、表格佈局

表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </

8.html表格相關的標記9.html表格實戰《簡單的網頁佈局》

本文轉載於:猿2048網站8.html表格相關的標記9.html表格實戰《簡單的網頁佈局》 <html> &l

html表格表單標簽的結合

-h 單元 adding set 不能 表單標簽 ges 青島 sub 今天我嘗試將表格表單基本標簽結合起來放在網頁中，發現再沒用表單元素中<form></form>時各類標簽功能都可顯示，只是不能提交網頁，所有與提交網頁的標簽都不能使用提交功能，而

HTML表格及框架介紹

url .html 排列 fan 水平對齊 邊框 位置 空心圓 掌握 一、列表1、有序列表ol　　　<ol type="1默認/a/A/i/I">　　　　<li></li>　　　</ol> 2、無序列表ul（實際應

HTML表格相關

數學 top 學習 顯示 adding alt rowspan black ges <table bgcolor="" backgorund="" border="" bordercolor="#0000FF" cellpadding="0"{表格右邊(如果有表格之間

html表格寬度設置失效

樣式 htm 超過 ble 失效 分享 做出 input cnblogs 問題描述： 我在寫一個網頁table時，table寬度超過了我預想的寬度，我想把它設置小一點，但總是沒效果。改到懷疑人生！代碼如下： 經過多次調試後發現一個問題，table可以改變大小，但是會有一個

Beautiful Soup 解析html表格示例

decode rip erro bs4 import bsp exe port pdf from bs4 import BeautifulSoup import urllib.request doc = urllib.request.urlopen(‘http://www

關於html表格單元格寬度的計算規則

npv com music oba smt iis dns ongl mha elasticsearch%E6%9F%A5%E8%AF%A2%E7%AC%AC%E5%9B%9B%E7%AF%87%E5%8C%B9%E9%85%8D%E6%9F%A5%E8%AF%A2matc

HTML表格的簡單使用1

tle div oct class 失效 合並單元格 改變顏色 char 數據 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UT

html-表格和列表

wid cnblogs 有序列表 hot logs nbsp lac 頁腳 head 一：表格標簽 表格描述 <table> 定義表格 <caption> 定義表格標題。 <th> 定義表格的表頭。 <tr&g

HTML表格

表格 har 單元格邊框 一行 姓名 doctype 默認 lpad 居中 1，<table>標記 　　a，基本格式<table 屬性1=“屬性值” 屬性2 ＝屬性值>表格內容</table> 　　b，table 標記的屬性 　　　　 　

HTML 表格

cap col lsp 表格 一個 clas CA class oot <table> 標簽定義 HTML 表格。 簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。 tr 元素定義表格行，th 元素定義表頭，td 元素定

前端開發：HTML-表格

歷史 -- 分割 星期 row ont 單元 邊框 true HTML 表格 表格由 <table> 標簽來定義。每個表格均有若幹行（由 <tr> 標簽定義），每行被分割為若幹單元格（由 <td> 標簽定義）。字母 td 指表格數據（t

js實現html表格<td>標簽中帶換行的文本顯示出換行效果

end slice 發現 var 轉換 ble .data length app 遇見問題 如下內容中我寫了幾行，但是表格中並未按行顯示，換行符反而變成了空格，於是想自己轉換下 思考問題 1、可以看到表格的內容是後端傳來的數據，於是想直接在後端轉換下，把換行符替換

excel數據復制到html表格<textarea>中

java find rar inpu == sta 數據 his 點擊 將excel的數據粘貼到html的表格<textarea>中，可以點擊html表格中的任何一個<textarea>點擊粘貼，效果和在excel中一樣。 單元格復制後的數據格式

SQL Server 2008 自動發郵件HTML表格

自動發郵件 ont bus return select borde layout ati fix DECLARE @emailBody NVARCHAR(MAX); SET @emailBody = N‘<style>table{table-layout:

HTML表格如何變色，HTML表格變色的代碼是什麽？

技術分享 vpd roc 如何 round shadow 表格變色 mar process HTML表格如何變色，HTML表格變色的代碼是什麽？下面小編便分享給大家。 　　<TD onmouseover="this.style.backgroundColor

html-表格標簽

spa 人員 cells colspan 顏色 cin rowspan pan div 　　表格標簽可以對數據進行格式化，使數據顯示更加清晰 　　　　<table></table>：表示表格的範圍 　　　　　　- border：表格線 　　

HTML表格相關元素

　　<table> 標籤定義 HTML 表格。簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成。tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。更復雜的 HTML 表格也可能包括 caption、col、colgroup、thead、tfo