表格基礎知識與應用
阿新 • • 發佈：2019-02-05
給大家分享一些關於表格的基礎知識和一些簡單的應用
先帶大家瞭解一下表格的基礎知識：
-
定義表格：<table>
- 表格標題：<caption>
- 表格表頭：<thead>
- 表格正文：<tbody>
- 表格頁尾：<tfoot>
- 表頭單元格：<th>
- 表格行：<tr>
- 表格單元格：<td>
表格常用屬性和專用樣式：
- 表格對其方式：align（左中右）
- 表格邊框寬度：border
- 表格邊框顏色：bordercolor
- 表格背景色：bgcolor
- 表格背景圖：background
- 單元間間隙：cellspacing
- 表格內邊距：cellpadding
- 橫向合併單元格（td屬性）：colspan="2"
- 縱向合併單元格（td屬性）：rowspan="2"
- 合併相鄰單元格邊框（table樣式）：border-collapse:collapse;
然後我們來看一些簡單的應用
下面是一個簡單的表格的單元格的合併拆分的實現
效果圖：<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>無標題文件</title> <style type="text/css"> table{border-collapse:collapse;} td{width:100px; height:80px;} </style> </head> <body> <table bgcolor="#ffffce" cellpadding="0" cellspacing="0" border="1"> <tbody> <tr> <td colspan="2"></td> <td colspan="2"></td> <td></td> <td></td> <td rowspan="3"></td> </tr> <tr> <td rowspan="2"></td> <td></td> <td rowspan="2"></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </body> </html>
然後給大家一個稍微複雜一點的表格的應用：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <link rel="stylesheet" type="text/css" href="css/common.css"> <style type="text/css"> table{width: 720px;background-color: #ffffff;margin: 0 auto;border-collapse:collapse} .t1{border-right: 30px solid #f2f2f2;border-left: 30px solid #f2f2f2;border-top: 30px solid #f2f2f2;} .t2{border-right: 30px solid #f2f2f2;border-left: 30px solid #f2f2f2;border-bottom: 30px solid #f2f2f2;} th{border:1px solid #e0e0e0;} #id1{margin-left: 37px;} select{border: 1px solid #abadb3;margin-left: 14px;margin-bottom: 15px;margin-top: 15px;} input{margin-left: 35px;} .box{border-top: 1px solid #e0e0e0;} #id1{margin-left:185px;} .box div{float: left;width: 80px;text-align: center;line-height: 45px;} .tr1 td{height: 25px;border:1px solid #e7e7e7;background-color: #f7ffef;text-align: center;} tr td{height: 25px;border:1px solid #e7e7e7;text-align: center;} p,p b{color: #4ca100;}4 #id4{border-bottom: 1px solid #e7e7e7;} </style> <body> <table class="t1"> <form> <th> 出診時間： <select><option>--請選擇--</option></select> <select><option>--請選擇--</option></select> 門診型別： <select><option>--請選擇--</option></select> <input type="submit" value="查詢"/> <div class="box clearfix"> <div id="id1"><img src="img/pic1.jpg">普通門診</div> <div><img src="img/pic2.jpg">專家門診</div> <div><img src="img/pic3.jpg">特需門診</div> <div><img src="img/pic4.jpg">夜間門診</div> </div> </th> </form> </table> <table class="t2"> <tr class="tr1"> <td>醫生姓名</td> <td>所在科室</td> <td>擅長</td> <td></td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> <td>六</td> <td>日</td> <td>聯絡醫生</td> </tr> <tr> <td rowspan="3"><p><b>馬文</b></p><br>副主任醫師</td> <td rowspan="3">眼科</td> <td rowspan="3">視神經，視網膜脈絡膜疾</td> <td><p>上</p></td> <td><img src="img/pic2.jpg"></td> <td></td> <td><img src="img/pic2.jpg"></td> <td></td> <td></td> <td></td> <td></td> <td rowspan="3"></td> </tr> <tr> <td><p>下</p></td> <td></td> <td><img src="img/pic2.jpg"></td> <td><img src="img/pic2.jpg"></td> <td></td> <td><img src="img/pic2.jpg"></td> <td></td> <td></td> </tr> <tr> <td><p>晚</p></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td rowspan="3"><p><b>劉運良</b></p><br>其他</td> <td rowspan="3">神經內科</td> <td rowspan="3">臨床神經病學，腦神經</td> <td><p>上</p></td> <td></td> <td></td> <td></td> <td></td> <td><img src="img/pic2.jpg"></td> <td></td> <td></td> <td rowspan="3"></td> </tr> <tr> <td><p>下</p></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td><p>晚</p></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td rowspan="3"><p><b>蔣劍</b></p><br>主治醫師</td> <td rowspan="3">眼科</td> <td rowspan="3"></td> <td><p>上</p></td> <td></td> <td></td> <td></td> <td></td> <td><img src="img/pic1.jpg"></td> <td></td> <td></td> <td rowspan="3"></td> </tr> <tr> <td><p>下</p></td> <td></td> <td></td> <td><img src="img/pic1.jpg"></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td><p>晚</p></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td rowspan="3"><p><b>賀楚風</b></p><br>主治醫師</td> <td rowspan="3">耳鼻咽喉科</td> <td rowspan="3"></td> <td><p>上</p></td> <td><img src="img/pic1.jpg"></td> <td></td> <td><img src="img/pic1.jpg"></td> <td><img src="img/pic1.jpg"></td> <td><img src="img/pic1.jpg"></td> <td></td> <td></td> <td rowspan="3"></td> </tr> <tr> <td><p>下</p></td> <td><img src="img/pic1.jpg"></td> <td></td> <td></td> <td></td> <td><img src="img/pic1.jpg"></td> <td></td> <td></td> </tr> <tr> <td><p>晚</p></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td rowspan="3"><p><b>呂冰清</b></p><br>其他</td> <td rowspan="3">神經內科</td> <td rowspan="3">小兒神經病 弱智和腦癱</td> <td><p>上</p></td> <td><img src="img/pic1.jpg"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td rowspan="3"></td> </tr> <tr> <td><p>下</p></td> <td></td> <td><img src="img/pic1.jpg"></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr id="id4"> <td><p>晚</p></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </body> </table> </body> </html>
效果圖：
資料夾 CSS樣式引入以及圖片資料夾圖：
