CSS+DIV-设置表格与表单
生活随笔
收集整理的這篇文章主要介紹了
CSS+DIV-设置表格与表单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
6-1.html
<html>
<head>
<title>年度收入</title>
<style>
<!--
table{
??caption-side:bottom;
}
-->
</style>
???? </head>
<body>
<table summary="This table shows the yearly income for years 2004 through 2007" border="1">
??<caption>年度收入 2004 - 2007</caption>
??<tr>
????<th></th>
????<th scope="col">2004</th>
????<th scope="col">2005</th>
????<th scope="col">2006</th>
????<th scope="col">2007</th>
??</tr>
??<tr>
????<th scope="row">撥款</th>
????<td>11,980</td>
????<td>12,650</td>
????<td>9,700</td>
????<td>10,600</td>
??</tr>
??<tr>
????<th scope="row">捐款</th>
????<td>4,780</td>
????<td>4,989</td>
????<td>6,700</td>
????<td>6,590</td>
??</tr>
??<tr>
????<th scope="row">投資</th>
????<td>8,000</td>
????<td>8,100</td>
????<td>8,760</td>
????<td>8,490</td>
??</tr>
??<tr>
????<th scope="row">募捐</th>
????<td>3,200</td>
????<td>3,120</td>
????<td>3,700</td>
????<td>4,210</td>
??</tr>
??<tr>
????<th scope="row">銷售</th>
????<td>28,400</td>
????<td>27,100</td>
????<td>27,950</td>
????<td>29,050</td>
??</tr>
??<tr>
????<th scope="row">雜費</th>
????<td>2,100</td>
????<td>1,900</td>
????<td>1,300</td>
????<td>1,760</td>
??</tr>
??<tr>
????<th scope="row">總計</th>
????<td>58,460</td>
????<td>57,859</td>
????<td>58,110</td>
????<td>60,700</td>
??</tr>
</table>
</body>
</html>6-2.html
<html>
<head>
<title>年度收入</title>
<style>
<!--
body{
??background-color:#ebf5ff;??/* 頁面背景色 */
??margin:0px; padding:4px;
??text-align:center;??????/* 居中對齊（IE有效） */
}
.datalist{
??color:#0046a6;????????/* 表格文字顏色 */
??background-color:#d2e8ff;??/* 表格背景色 */
??font-family:Arial;??????/* 表格字體 */
}
.datalist caption{
??font-size:18px;????????/* 標題文字大小 */
??font-weight:bold;??????/* 標題文字粗體 */
}
.datalist th{
??color:#003e7e;????????/* 行、列名稱顏色 */
??background-color:#7bb3ff;??/* 行、列名稱的背景色 */
}
-->
</style>
???? </head>
<body>
<table summary="This table shows the yearly income for years 2004 through 2007" border="1" class="datalist">
??<caption>年度收入 2004 - 2007</caption>
??<tr>
????<th></th>
????<th scope="col">2004</th>
????<th scope="col">2005</th>
????<th scope="col">2006</th>
????<th scope="col">2007</th>
??</tr>
??<tr>
????<th scope="row">撥款</th>
????<td>11,980</td>
????<td>12,650</td>
????<td>9,700</td>
????<td>10,600</td>
??</tr>
??<tr>
????<th scope="row">捐款</th>
????<td>4,780</td>
????<td>4,989</td>
????<td>6,700</td>
????<td>6,590</td>
??</tr>
??<tr>
????<th scope="row">投資</th>
????<td>8,000</td>
????<td>8,100</td>
????<td>8,760</td>
????<td>8,490</td>
??</tr>
??<tr>
????<th scope="row">募捐</th>
????<td>3,200</td>
????<td>3,120</td>
????<td>3,700</td>
????<td>4,210</td>
??</tr>
??<tr>
????<th scope="row">銷售</th>
????<td>28,400</td>
????<td>27,100</td>
????<td>27,950</td>
????<td>29,050</td>
??</tr>
??<tr>
????<th scope="row">雜費</th>
????<td>2,100</td>
????<td>1,900</td>
????<td>1,300</td>
????<td>1,760</td>
??</tr>
??<tr>
????<th scope="row">總計</th>
????<td>58,460</td>
????<td>57,859</td>
????<td>58,110</td>
????<td>60,700</td>
??</tr>
</table>
</body>
</html>6-3.html
<html>
<head>
<title>年度收入</title>
<style>
<!--
.datalist{
??border:1px solid #429fff;??/* 表格邊框 */
??font-family:Arial;
??border-collapse:collapse;??/* 邊框重疊 */
}
.datalist caption{
??padding-top:3px;
??padding-bottom:2px;
??font:bold 1.1em;
??background-color:#f0f7ff;
??border:1px solid #429fff;??/* 表格標題邊框 */
}
.datalist th{
??border:1px solid #429fff;??/* 行、列名稱邊框 */
??background-color:#d2e8ff;
??font-weight:bold;
??padding-top:4px; padding-bottom:4px;
??padding-left:10px; padding-right:10px;
??text-align:center;
}
.datalist td{
??border:1px solid #429fff;??/* 單元格邊框 */
??text-align:right;
??padding:4px;
}
-->
</style>
???? </head>
<body>
<table class="datalist">
??<caption>年度收入 2004 - 2007</caption>
??<tr>
????<th></th>
????<th scope="col">2004</th>
????<th scope="col">2005</th>
????<th scope="col">2006</th>
????<th scope="col">2007</th>
??</tr>
??<tr>
????<th scope="row">撥款</th>
????<td>11,980</td>
????<td>12,650</td>
????<td>9,700</td>
????<td>10,600</td>
??</tr>
??<tr>
????<th scope="row">捐款</th>
????<td>4,780</td>
????<td>4,989</td>
????<td>6,700</td>
????<td>6,590</td>
??</tr>
??<tr>
????<th scope="row">投資</th>
????<td>8,000</td>
????<td>8,100</td>
????<td>8,760</td>
????<td>8,490</td>
??</tr>
??<tr>
????<th scope="row">募捐</th>
????<td>3,200</td>
????<td>3,120</td>
????<td>3,700</td>
????<td>4,210</td>
??</tr>
??<tr>
????<th scope="row">銷售</th>
????<td>28,400</td>
????<td>27,100</td>
????<td>27,950</td>
????<td>29,050</td>
??</tr>
??<tr>
????<th scope="row">雜費</th>
????<td>2,100</td>
????<td>1,900</td>
????<td>1,300</td>
????<td>1,760</td>
??</tr>
??<tr>
????<th scope="row">總計</th>
????<td>58,460</td>
????<td>57,859</td>
????<td>58,110</td>
????<td>60,700</td>
??</tr>
</table>
</body>
</html>6-4.html
<html>
<head>
<title>Member List</title>
<style>
<!--
.datalist{
??border:1px solid #0058a3;??/* 表格邊框 */
??font-family:Arial;
??border-collapse:collapse;??/* 邊框重疊 */
??background-color:#eaf5ff;??/* 表格背景色 */
??font-size:14px;
}
.datalist caption{
??padding-bottom:5px;
??font:bold 1.4em;
??text-align:left;
}
.datalist th{
??border:1px solid #0058a3;??/* 行名稱邊框 */
??background-color:#4bacff;??/* 行名稱背景色 */
??color:#FFFFFF;????????/* 行名稱顏色 */
??font-weight:bold;
??padding-top:4px; padding-bottom:4px;
??padding-left:12px; padding-right:12px;
??text-align:center;
}
.datalist td{
??border:1px solid #0058a3;??/* 單元格邊框 */
??text-align:left;
??padding-top:4px; padding-bottom:4px;
??padding-left:10px; padding-right:10px;
}
.datalist tr.altrow{
??background-color:#c7e5ff;??/* 隔行變色 */
}
-->
</style>
???? </head>
<body>
<table class="datalist" summary="list of members in EE Studay">
??<caption>Member List</caption>
??<tr>
????<th scope="col">Name</th>
????<th scope="col">Class</th>
????<th scope="col">Birthday</th>
????<th scope="col">Constellation</th>
????<th scope="col">Mobile</th>
??</tr>
??<tr>??????????<!-- 奇數行 -->
????<td>isaac</td>
????<td>W13</td>
????<td>Jun 24th</td>
????<td>Cancer</td>
????<td>1118159</td>
??</tr>
??<tr class="altrow">????<!-- 偶數行 -->
????<td>girlwing</td>
????<td>W210</td>
????<td>Sep 16th</td>
????<td>Virgo</td>
????<td>1307994</td>
??</tr>
??<tr>??????????<!-- 奇數行 -->
????<td>tastestory</td>
????<td>W15</td>
????<td>Nov 29th</td>
????<td>Sagittarius</td>
????<td>1095245</td>
??</tr>
??<tr class="altrow">????<!-- 偶數行 -->
????<td>lovehate</td>
????<td>W47</td>
????<td>Sep 5th</td>
????<td>Virgo</td>
????<td>6098017</td>
??</tr>
??<tr>??????????<!-- 奇數行 -->
????<td>slepox</td>
????<td>W19</td>
????<td>Nov 18th</td>
????<td>Scorpio</td>
????<td>0658635</td>
??</tr>
??<tr class="altrow">????<!-- 偶數行 -->
????<td>smartlau</td>
????<td>W19</td>
????<td>Dec 30th</td>
????<td>Capricorn</td>
????<td>0006621</td>
??</tr>
??<tr>??????????<!-- 奇數行 -->
????<td>whaler</td>
????<td>W19</td>
????<td>Jan 18th</td>
????<td>Capricorn</td>
????<td>1851918</td>
??</tr>
??<tr class="altrow">????<!-- 偶數行 -->
????<td>shenhuanyan</td>
????<td>W25</td>
????<td>Jan 31th</td>
????<td>Aquarius</td>
????<td>0621827</td>
??</tr>
??<tr>??????????<!-- 奇數行 -->
????<td>tuonene</td>
????<td>W210</td>
????<td>Nov 26th</td>
????<td>Sagittarius</td>
????<td>0091704</td>
??</tr>
??<tr class="altrow">????<!-- 偶數行 -->
????<td>ArthurRivers</td>
????<td>W91</td>
????<td>Feb 26th</td>
????<td>Pisces</td>
????<td>0468357</td>
??</tr>
??<tr>??????????<!-- 奇數行 -->
????<td>reconzansp</td>
????<td>W09</td>
????<td>Oct 13th</td>
????<td>Libra</td>
????<td>3643041</td>
??</tr>
??<tr class="altrow">????<!-- 偶數行 -->
????<td>linear</td>
????<td>W86</td>
????<td>Aug 18th</td>
????<td>Leo</td>
????<td>6398341</td>
??</tr>
??<tr>??????????<!-- 奇數行 -->
????<td>laopiao</td>
????<td>W41</td>
????<td>May 17th</td>
????<td>Taurus</td>
????<td>1254004</td>
??</tr>
??<tr class="altrow">????<!-- 偶數行 -->
????<td>dovecho</td>
????<td>W19</td>
????<td>Dec 9th</td>
????<td>Sagittarius</td>
????<td>1892013</td>
??</tr>
??<tr>??????????<!-- 奇數行 -->
????<td>shanghen</td>
????<td>W42</td>
????<td>May 24th</td>
????<td>Gemini</td>
????<td>1544254</td>
??</tr>
??<tr class="altrow">????<!-- 偶數行 -->
????<td>venessawj</td>
????<td>W45</td>
????<td>Apr 1st</td>
????<td>Aries</td>
????<td>1523753</td>
??</tr>
??<tr>??????????<!-- 奇數行 -->
????<td>lightyear</td>
????<td>W311</td>
????<td>Mar 23th</td>
????<td>Aries</td>
????<td>1002908</td>
??</tr>
</table>
</body>
</html>6-5.html
<html>
<head>
<title>Member List</title>
<style>
<!--
.datalist{
??border:1px solid #0058a3;??/* 表格邊框 */
??font-family:Arial;
??border-collapse:collapse;??/* 邊框重疊 */
??background-color:#eaf5ff;??/* 表格背景色 */
??font-size:14px;
}
.datalist caption{
??padding-bottom:5px;
??font:bold 1.4em;
??text-align:left;
}
.datalist th{
??border:1px solid #0058a3;??/* 行名稱邊框 */
??background-color:#4bacff;??/* 行名稱背景色 */
??color:#FFFFFF;????????/* 行名稱顏色 */
??font-weight:bold;
??padding-top:4px; padding-bottom:4px;
??padding-left:12px; padding-right:12px;
??text-align:center;
}
.datalist td{
??border:1px solid #0058a3;??/* 單元格邊框 */
??text-align:left;
??padding-top:4px; padding-bottom:4px;
??padding-left:10px; padding-right:10px;
}
.datalist tr:hover, .datalist tr.altrow{
??background-color:#c4e4ff;??/* 動態變色 */
}
-->
</style>
???? </head>
<body>
<table class="datalist" summary="list of members in EE Studay">
??<caption>Member List</caption>
??<tr>
????<th scope="col">Name</th>
????<th scope="col">Class</th>
????<th scope="col">Birthday</th>
????<th scope="col">Constellation</th>
????<th scope="col">Mobile</th>
??</tr>
??<tr>
????<td>isaac</td>
????<td>W13</td>
????<td>Jun 24th</td>
????<td>Cancer</td>
????<td>1118159</td>
??</tr>
??<tr>
????<td>girlwing</td>
????<td>W210</td>
????<td>Sep 16th</td>
????<td>Virgo</td>
????<td>1307994</td>
??</tr>
??<tr>
????<td>tastestory</td>
????<td>W15</td>
????<td>Nov 29th</td>
????<td>Sagittarius</td>
????<td>1095245</td>
??</tr>
??<tr>
????<td>lovehate</td>
????<td>W47</td>
????<td>Sep 5th</td>
????<td>Virgo</td>
????<td>6098017</td>
??</tr>
??<tr>
????<td>slepox</td>
????<td>W19</td>
????<td>Nov 18th</td>
????<td>Scorpio</td>
????<td>0658635</td>
??</tr>
??<tr>
????<td>smartlau</td>
????<td>W19</td>
????<td>Dec 30th</td>
????<td>Capricorn</td>
????<td>0006621</td>
??</tr>
??<tr>
????<td>whaler</td>
????<td>W19</td>
????<td>Jan 18th</td>
????<td>Capricorn</td>
????<td>1851918</td>
??</tr>
??<tr>
????<td>shenhuanyan</td>
????<td>W25</td>
????<td>Jan 31th</td>
????<td>Aquarius</td>
????<td>0621827</td>
??</tr>
??<tr>
????<td>tuonene</td>
????<td>W210</td>
????<td>Nov 26th</td>
????<td>Sagittarius</td>
????<td>0091704</td>
??</tr>
??<tr>
????<td>ArthurRivers</td>
????<td>W91</td>
????<td>Feb 26th</td>
????<td>Pisces</td>
????<td>0468357</td>
??</tr>
??<tr>
????<td>reconzansp</td>
????<td>W09</td>
????<td>Oct 13th</td>
????<td>Libra</td>
????<td>3643041</td>
??</tr>
??<tr>
????<td>linear</td>
????<td>W86</td>
????<td>Aug 18th</td>
????<td>Leo</td>
????<td>6398341</td>
??</tr>
??<tr>
????<td>laopiao</td>
????<td>W41</td>
????<td>May 17th</td>
????<td>Taurus</td>
????<td>1254004</td>
??</tr>
??<tr>
????<td>dovecho</td>
????<td>W19</td>
????<td>Dec 9th</td>
????<td>Sagittarius</td>
????<td>1892013</td>
??</tr>
??<tr>
????<td>shanghen</td>
????<td>W42</td>
????<td>May 24th</td>
????<td>Gemini</td>
????<td>1544254</td>
??</tr>
??<tr>
????<td>venessawj</td>
????<td>W45</td>
????<td>Apr 1st</td>
????<td>Aries</td>
????<td>1523753</td>
??</tr>
??<tr>
????<td>lightyear</td>
????<td>W311</td>
????<td>Mar 23th</td>
????<td>Aries</td>
????<td>1002908</td>
??</tr>
</table>
<script language="javascript">
var rows = document.getElementsByTagName('tr');
for (var i=0;i<rows.length;i++){
??rows[i]. = function(){????//鼠標在行上面的時候
????this.className += 'altrow';
??}
??rows[i]. = function(){????//鼠標離開時
????this.className = this.className.replace('altrow','');
??}
}
</script>
</body>
</html>6-6.html
<html>
<head>
<title>Calendar</title>
<style>
<!--
.clmonth {
??border-collapse: collapse;
??width: 780px;
}
.clmonth caption {
??text-align: left;
??font: bold 130% Georgia, "Times New Roman";
??padding-bottom: 6px;
}
.clmonth th {
??border: 1px solid #999999;
??border-bottom: none;
??padding: 2px 8px 2px 8px;
??background-color: #D3D2A0;
??color: #2F2F2F;
??font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
??width: 110px;
}
.clmonth td {
??border: 1px solid #AFAFAF;
??font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
??padding: 2px 4px 2px 4px;
??vertical-align: top;
}
.clmonth td.previous, .clmonth td.next {
??background-color: #F5F4E6;
??color: #A6A6A6;
}
.clmonth td.active {
??background-color: #B1CBE1;
??color: #2B5070;
??border: 2px solid #4682B4;
}
.clmonth ul {
??list-style-type: none;
??margin: 0;
??padding-left: 12px;
??padding-right: 6px;
}
.clmonth li {
??margin-bottom: 8px;
}
-->
</style>
???? </head>
<body>
<table class="clmonth" summary="Calendar for January 2007">
??<caption>January 2007</caption>
??<tr>
????<th scope="col">Monday</th>
????<th scope="col">Tuesday</th>
????<th scope="col">Wednesday</th>
????<th scope="col">Thursday</th>
????<th scope="col">Friday</th>
????<th scope="col">Saturday</th>
????<th scope="col">Sunday</th>
??</tr>
??<tr>
????<td class="previous">31</td>
????<td class="active">1
????<ul>
??????<li>五棵松攝影城買鏡頭</li>
??????<li>完成微積分作業</li>
????</ul>
????</td>
????<td>2</td>
????<td>3</td>
????<td>4</td>
????<td>5</td>
????<td>6</td>
??</tr>
??<tr>
????<td class="active">7
????<ul>
??????<li>6A309 線性代數</li>
??????<li>陪同學逛校園</li>
????</ul>
????</td>
????<td>8</td>
????<td>9</td>
????<td>10</td>
????<td>11</td>
????<td>12</td>
????<td class="active">13
????<ul>
??????<li>土狼的課交大作業</li>
????</ul>
????</td>
??</tr>
??<tr>
????<td>14</td>
????<td>15</td>
????<td>16</td>
????<td class="active">17
????<ul>
??????<li>美術作品賞析交大作業</li>
????</ul>
????</td>
????<td class="active">18
????<ul>
??????<li>攝影作品賞析交論文</li>
??????<li>思修交大小論文</li>
????</ul>
????</td>
????<td>19</td>
????<td>20</td>
??</tr>
??<tr>
????<td>21</td>
????<td>22</td>
????<td>23</td>
????<td class="active">24
????<ul>
??????<li>中關村買書</li>
????</ul>
????</td>
????<td>25</td>
????<td>26</td>
????<td class="active">27
????<ul>
??????<li>西單圖書大廈買書</li>
??????<li>西單逛街買禮物給父母</li>
????</ul>
????</td>
??</tr>
??<tr>
????<td>28</td>
????<td>29</td>
????<td class="active">30
????<ul>
??????<li>買水果</li>
??????<li>北京西客站回家過年</li>
????</ul>
????</td>
????<td>31</td>
????<td class="next">1</td>
????<td class="next">2</td>
????<td class="next">3</td>
??</tr>
</table>
</body>
</html>6-7.html
<html>
<head>
<title>表單</title>
<style>
<!--
form {
??border: 1px dotted #AAAAAA;
??padding: 3px 6px 3px 6px;
??margin:0px;
??font:14px Arial;
}
input {
??color: #00008B;
??background-color: #ADD8E6;
??border: 1px solid #00008B;
}
select {
??width: 80px;
??color: #00008B;
??background-color: #ADD8E6;
??border: 1px solid #00008B;
}
textarea {
??width: 200px;
??height: 40px;
??color: #00008B;
??background-color: #ADD8E6;
??border: 1px solid #00008B;
}
-->
</style>
???? </head>
<body>
<form method="post">
<p>請輸入您的姓名:<br><input type="text" name="name" id="name"></p>
<p>請選擇你最喜歡的顏色:<br>
<select name="color" id="color">
??<option value="red">紅</option>
??<option value="green">綠</option>
??<option value="blue">藍</option>
??<option value="yellow">黃</option>
??<option value="cyan">青</option>
??<option value="purple">紫</option>
</select></p>
<p>請問你的性別:<br>
??<input type="radio" name="sex" id="male" value="male">男<br>
??<input type="radio" name="sex" id="female" value="female">女</p>
<p>你喜歡做些什么:<br>
??<input type="checkbox" name="hobby" id="book" value="book">看書
??<input type="checkbox" name="hobby" id="net" value="net">上網
??<input type="checkbox" name="hobby" id="sleep" value="sleep">睡覺</p>
<p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4"></textarea></p>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"></p>
</form>
</body>
</html>6-8.html
<html>
<head>
<title>表單</title>
<style>
<!--
form{
??border: 1px dotted #AAAAAA;
??padding: 1px 6px 1px 6px;
??margin:0px;
??font:14px Arial;
}
input{??????????????/* 所有input標記 */
??color: #00008B;??
}
input.txt{????????????/* 文本框單獨設置 */
??border: 1px inset #00008B;
??background-color: #ADD8E6;
}
input.btn{????????????/* 按鈕單獨設置 */
??color: #00008B;
??background-color: #ADD8E6;
??border: 1px outset #00008B;
??padding: 1px 2px 1px 2px;
}
select{
??width: 80px;
??color: #00008B;
??background-color: #ADD8E6;
??border: 1px solid #00008B;
}
textarea{
??width: 200px;
??height: 40px;
??color: #00008B;
??background-color: #ADD8E6;
??border: 1px inset #00008B;
}
-->
</style>
???? </head>
<body>
<form method="post">
<p>請輸入您的姓名:<br><input type="text" name="name" id="name" class="txt"></p>
<p>請選擇你最喜歡的顏色:<br>
<select name="color" id="color">
??<option value="red">紅</option>
??<option value="green">綠</option>
??<option value="blue">藍</option>
??<option value="yellow">黃</option>
??<option value="cyan">青</option>
??<option value="purple">紫</option>
</select></p>
<p>請問你的性別:<br>
??<input type="radio" name="sex" id="male" value="male" class="rad">男<br>
??<input type="radio" name="sex" id="female" value="female" class="rad">女</p>
<p>你喜歡做些什么:<br>
??<input type="checkbox" name="hobby" id="book" value="book" class="check">看書
??<input type="checkbox" name="hobby" id="net" value="net" class="check">上網
??<input type="checkbox" name="hobby" id="sleep" value="sleep" class="check">睡覺</p>
<p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4" class="txtarea"></textarea></p>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn"></p>
</form>
</body>
</html>6-9.html
<html>
<head>
<title>像文字一樣的按鈕</title>
<style>
<!--
body{
??background-color:#daeeff;??????/* 頁面背景色 */
}
form{
??margin:0px; padding:0px;
??font:14px;
}
input{
??font:14px Arial;
}
.txt{
??border-bottom:1px solid #005aa7;??/* 下劃線效果 */
??color:#005aa7;
??border-top:0px; border-left:0px;
??border-right:0px;
??background-color:transparent;????/* 背景色透明 */
}
.btn{
??background-color:transparent;????/* 背景色透明 */
??border:0px;??????????????/* 邊框取消 */
}
-->
</style>
???? </head>
<body>
<form method="post">
??請輸入您的信息: <input type="text" name="name" id="name" class="txt">
??<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit>>" class="btn">
</form>
</body>
</html>6-10.html
<html>
<head>
<title>七彩的下拉菜單</title>
<style>
<!--
.blue{
??background-color:#7598FB;
??color: #000000;
}
.red{
??background-color:#E20A0A;
??color: #ffffff;
}
.green{
??background-color:#3CB371;
??color: #ffffff;
}
.yellow{
??background-color:#FFFF6F;
??color: #000000;
}
.cyan{
??background-color:00FFFF;
??color:#000000;
}
.purple{
??background-color:800080;
??color:#FFFFFF;
}
-->
</style>
???? </head>
<body>
<form method="post">
??<p><label for="color">Select your favorite color:</label>
??<select name="color" id="color">
????<option value="">Select One</option>
????<option value="blue" class="blue">blue</option>
????<option value="red" class="red">red</option>
????<option value="green" class="green">green</option>
????<option value="yellow" class="yellow">yellow</option>
????<option value="cyan" class="cyan">cyan</option>
????<option value="purple" class="purple">purple</option>
??</select></p>
??<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Send!"></p>
</form>
</body>
</html>6-11.html
<html>
<head>
<title>直接輸入的Excel表格</title>
<style>
<!--
table.formdata{
??border:1px solid #5F6F7E;
??border-collapse:collapse;
??font-family:Arial;
}
table.formdata caption{
??text-align:left;
??padding-bottom:6px;
}
table.formdata th{
??border:1px solid #5F6F7E;
??background-color:#E2E2E2;
??color:#000000px;
??text-align:left;
??font-weight:normal;
??padding:2px 8px 2px 6px;
??margin:0px;
}
table.formdata td{
??margin:0px;
??padding:0px;
??border:1px solid #ABABAB;??/* 單元格邊框 */
}
table.formdata input{
??width:100px;
??padding:1px 3px 1px 3px;
??margin:0px;
??border:none;????????/* 輸入框不要邊框 */
??font-family:Arial;
}
.btn{
??border:1px solid #0083f2;
??font-family:Arial;
}
-->
</style>
???? </head>
<body>
<form method="post">
<table class="formdata">
<caption>公司銷售統計表 2004～2007</caption>
<tr>
<th></th>
<th scope="col">2004</th>
<th scope="col">2005</th>
<th scope="col">2006</th>
<th scope="col">2007</th>
</tr>
<tr>
<th scope="row">硬盤(Hard Disk)</th>
??<td><input type="text" name="harddisk2004" id="harddisk2004"></td>
??<td><input type="text" name="harddisk2005" id="harddisk2005"></td>
??<td><input type="text" name="harddisk2006" id="harddisk2006"></td>
??<td><input type="text" name="harddisk2007" id="harddisk2007"></td>
</tr>
<tr>
??<th scope="row">主板(Mainboard)</th>
??<td><input type="text" name="mainboard2004" id="mainboard2004"></td>
??<td><input type="text" name="mainboard2005" id="mainboard2005"></td>
??<td><input type="text" name="mainboard2006" id="mainboard2006"></td>
??<td><input type="text" name="mainboard2007" id="mainboard2007"></td>
</tr>
<tr>
??<th scope="row">內存條(Memory Disk)</th>
??<td><input type="text" name="memory2004" id="memory2004"></td>
??<td><input type="text" name="memory2005" id="memory2005"></td>
??<td><input type="text" name="memory2006" id="memory2006"></td>
??<td><input type="text" name="memory2007" id="memory2007"></td>
</tr>
<tr>
??<th scope="row">機箱(Case)</th>
??<td><input type="text" name="case2004" id="case2004"></td>
??<td><input type="text" name="case2005" id="case2005"></td>
??<td><input type="text" name="case2006" id="case2006"></td>
??<td><input type="text" name="case2007" id="case2007"></td>
</tr>
<tr>
<th scope="row">電源(Power)</th>
??<td><input type="text" name="power2004" id="power2004"></td>
??<td><input type="text" name="power2005" id="power2005"></td>
??<td><input type="text" name="power2006" id="power2006"></td>
??<td><input type="text" name="power2007" id="power2007"></td>
</tr>
<tr>
??<th scope="row">CPU風扇(CPU Fan)</th>
??<td><input type="text" name="cpufan2004" id="cpufan2004"></td>
??<td><input type="text" name="cpufan2005" id="cpufan2005"></td>
??<td><input type="text" name="cpufan2006" id="cpufan2006"></td>
??<td><input type="text" name="cpufan2007" id="cpufan2007"></td>
</tr>
<tr>
<th scope="row">總計(Total)</th>
??<td><input type="text" name="total2004" id="total2004"></td>
??<td><input type="text" name="total2005" id="total2005"></td>
??<td><input type="text" name="total2006" id="total2006"></td>
??<td><input type="text" name="total2007" id="total2007"></td>
</tr>
</table>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn">
<input type="reset" value="Reset All" class="btn"></p>
</form>
</body>
</html>6-12.html
<html>
<head>
<title>Sina調查問卷</title>
<style>
<!--
table.outside{??????????/* 外層表格 */
??background:url(bg1.jpg);
??font-size:12px;
??padding:0px;
}
td.title{????????????/* 表格標題 */
??color:#FFFFFF;
??font-weight:bold;
??text-align:center;
??padding-top:3px;
??padding-bottom:0px;
}
td.tdoutside{
??padding:0px 1px 4px 1px;
}
table.inside{??????????/* 內層表格 */
??width:269px;
??font-size:12px;
??padding:0px;
??margin:0px;
}
td.tdinside{
??padding:7px 0px 7px 10px;
??background-color:#FFD455;
}
form{
??margin:0px; padding:0px;
}
input{
??font-size:12px;
}
a{
??color:#000000;
??text-decoration:underline;
}
-->
</style>
???? </head>
<body>
<table class="outside">
??<tr><td class="title">熱點調查</td></tr>
??<tr><td class="tdoutside">
????<form method="post">
????<table class="inside" cellspacing="0">
??????<tr>
????????<td class="tdinside">
????????在姚明缺陣麥蒂領軍的情況下，火箭隊的勝率是<br>
????????<input type="radio" name="q_498" value="2749">超過60％<br>
????????<input type="radio" name="q_498" value="2750">50％到60％<br>
????????<input type="radio" name="q_498" value="2751">40％到50％<br>
????????<input type="radio" name="q_498" value="2752">40％到50％
????????<input type="radio" name="q_498" value="2753">30％以下<br>
????????<input type="submit" value="提交">
????????<input type="button" name="viewresult" value="查看"> <a href="#">新浪-籃球先鋒報聯合評選</a>
????????</td>
??????</tr>
????</table>
????</form>
??</td></tr>
</table>
</body>
</html>
來源：《精通CSS+DIV網頁樣式與布局》
<html>
<head>
<title>年度收入</title>
<style>
<!--
table{
??caption-side:bottom;
}
-->
</style>
???? </head>
<body>
<table summary="This table shows the yearly income for years 2004 through 2007" border="1">
??<caption>年度收入 2004 - 2007</caption>
??<tr>
????<th></th>
????<th scope="col">2004</th>
????<th scope="col">2005</th>
????<th scope="col">2006</th>
????<th scope="col">2007</th>
??</tr>
??<tr>
????<th scope="row">撥款</th>
????<td>11,980</td>
????<td>12,650</td>
????<td>9,700</td>
????<td>10,600</td>
??</tr>
??<tr>
????<th scope="row">捐款</th>
????<td>4,780</td>
????<td>4,989</td>
????<td>6,700</td>
????<td>6,590</td>
??</tr>
??<tr>
????<th scope="row">投資</th>
????<td>8,000</td>
????<td>8,100</td>
????<td>8,760</td>
????<td>8,490</td>
??</tr>
??<tr>
????<th scope="row">募捐</th>
????<td>3,200</td>
????<td>3,120</td>
????<td>3,700</td>
????<td>4,210</td>
??</tr>
??<tr>
????<th scope="row">銷售</th>
????<td>28,400</td>
????<td>27,100</td>
????<td>27,950</td>
????<td>29,050</td>
??</tr>
??<tr>
????<th scope="row">雜費</th>
????<td>2,100</td>
????<td>1,900</td>
????<td>1,300</td>
????<td>1,760</td>
??</tr>
??<tr>
????<th scope="row">總計</th>
????<td>58,460</td>
????<td>57,859</td>
????<td>58,110</td>
????<td>60,700</td>
??</tr>
</table>
</body>
</html>6-2.html
<html>
<head>
<title>年度收入</title>
<style>
<!--
body{
??background-color:#ebf5ff;??/* 頁面背景色 */
??margin:0px; padding:4px;
??text-align:center;??????/* 居中對齊（IE有效） */
}
.datalist{
??color:#0046a6;????????/* 表格文字顏色 */
??background-color:#d2e8ff;??/* 表格背景色 */
??font-family:Arial;??????/* 表格字體 */
}
.datalist caption{
??font-size:18px;????????/* 標題文字大小 */
??font-weight:bold;??????/* 標題文字粗體 */
}
.datalist th{
??color:#003e7e;????????/* 行、列名稱顏色 */
??background-color:#7bb3ff;??/* 行、列名稱的背景色 */
}
-->
</style>
???? </head>
<body>
<table summary="This table shows the yearly income for years 2004 through 2007" border="1" class="datalist">
??<caption>年度收入 2004 - 2007</caption>
??<tr>
????<th></th>
????<th scope="col">2004</th>
????<th scope="col">2005</th>
????<th scope="col">2006</th>
????<th scope="col">2007</th>
??</tr>
??<tr>
????<th scope="row">撥款</th>
????<td>11,980</td>
????<td>12,650</td>
????<td>9,700</td>
????<td>10,600</td>
??</tr>
??<tr>
????<th scope="row">捐款</th>
????<td>4,780</td>
????<td>4,989</td>
????<td>6,700</td>
????<td>6,590</td>
??</tr>
??<tr>
????<th scope="row">投資</th>
????<td>8,000</td>
????<td>8,100</td>
????<td>8,760</td>
????<td>8,490</td>
??</tr>
??<tr>
????<th scope="row">募捐</th>
????<td>3,200</td>
????<td>3,120</td>
????<td>3,700</td>
????<td>4,210</td>
??</tr>
??<tr>
????<th scope="row">銷售</th>
????<td>28,400</td>
????<td>27,100</td>
????<td>27,950</td>
????<td>29,050</td>
??</tr>
??<tr>
????<th scope="row">雜費</th>
????<td>2,100</td>
????<td>1,900</td>
????<td>1,300</td>
????<td>1,760</td>
??</tr>
??<tr>
????<th scope="row">總計</th>
????<td>58,460</td>
????<td>57,859</td>
????<td>58,110</td>
????<td>60,700</td>
??</tr>
</table>
</body>
</html>6-3.html
<html>
<head>
<title>年度收入</title>
<style>
<!--
.datalist{
??border:1px solid #429fff;??/* 表格邊框 */
??font-family:Arial;
??border-collapse:collapse;??/* 邊框重疊 */
}
.datalist caption{
??padding-top:3px;
??padding-bottom:2px;
??font:bold 1.1em;
??background-color:#f0f7ff;
??border:1px solid #429fff;??/* 表格標題邊框 */
}
.datalist th{
??border:1px solid #429fff;??/* 行、列名稱邊框 */
??background-color:#d2e8ff;
??font-weight:bold;
??padding-top:4px; padding-bottom:4px;
??padding-left:10px; padding-right:10px;
??text-align:center;
}
.datalist td{
??border:1px solid #429fff;??/* 單元格邊框 */
??text-align:right;
??padding:4px;
}
-->
</style>
???? </head>
<body>
<table class="datalist">
??<caption>年度收入 2004 - 2007</caption>
??<tr>
????<th></th>
????<th scope="col">2004</th>
????<th scope="col">2005</th>
????<th scope="col">2006</th>
????<th scope="col">2007</th>
??</tr>
??<tr>
????<th scope="row">撥款</th>
????<td>11,980</td>
????<td>12,650</td>
????<td>9,700</td>
????<td>10,600</td>
??</tr>
??<tr>
????<th scope="row">捐款</th>
????<td>4,780</td>
????<td>4,989</td>
????<td>6,700</td>
????<td>6,590</td>
??</tr>
??<tr>
????<th scope="row">投資</th>
????<td>8,000</td>
????<td>8,100</td>
????<td>8,760</td>
????<td>8,490</td>
??</tr>
??<tr>
????<th scope="row">募捐</th>
????<td>3,200</td>
????<td>3,120</td>
????<td>3,700</td>
????<td>4,210</td>
??</tr>
??<tr>
????<th scope="row">銷售</th>
????<td>28,400</td>
????<td>27,100</td>
????<td>27,950</td>
????<td>29,050</td>
??</tr>
??<tr>
????<th scope="row">雜費</th>
????<td>2,100</td>
????<td>1,900</td>
????<td>1,300</td>
????<td>1,760</td>
??</tr>
??<tr>
????<th scope="row">總計</th>
????<td>58,460</td>
????<td>57,859</td>
????<td>58,110</td>
????<td>60,700</td>
??</tr>
</table>
</body>
</html>6-4.html
<html>
<head>
<title>Member List</title>
<style>
<!--
.datalist{
??border:1px solid #0058a3;??/* 表格邊框 */
??font-family:Arial;
??border-collapse:collapse;??/* 邊框重疊 */
??background-color:#eaf5ff;??/* 表格背景色 */
??font-size:14px;
}
.datalist caption{
??padding-bottom:5px;
??font:bold 1.4em;
??text-align:left;
}
.datalist th{
??border:1px solid #0058a3;??/* 行名稱邊框 */
??background-color:#4bacff;??/* 行名稱背景色 */
??color:#FFFFFF;????????/* 行名稱顏色 */
??font-weight:bold;
??padding-top:4px; padding-bottom:4px;
??padding-left:12px; padding-right:12px;
??text-align:center;
}
.datalist td{
??border:1px solid #0058a3;??/* 單元格邊框 */
??text-align:left;
??padding-top:4px; padding-bottom:4px;
??padding-left:10px; padding-right:10px;
}
.datalist tr.altrow{
??background-color:#c7e5ff;??/* 隔行變色 */
}
-->
</style>
???? </head>
<body>
<table class="datalist" summary="list of members in EE Studay">
??<caption>Member List</caption>
??<tr>
????<th scope="col">Name</th>
????<th scope="col">Class</th>
????<th scope="col">Birthday</th>
????<th scope="col">Constellation</th>
????<th scope="col">Mobile</th>
??</tr>
??<tr>??????????<!-- 奇數行 -->
????<td>isaac</td>
????<td>W13</td>
????<td>Jun 24th</td>
????<td>Cancer</td>
????<td>1118159</td>
??</tr>
??<tr class="altrow">????<!-- 偶數行 -->
????<td>girlwing</td>
????<td>W210</td>
????<td>Sep 16th</td>
????<td>Virgo</td>
????<td>1307994</td>
??</tr>
??<tr>??????????<!-- 奇數行 -->
????<td>tastestory</td>
????<td>W15</td>
????<td>Nov 29th</td>
????<td>Sagittarius</td>
????<td>1095245</td>
??</tr>
??<tr class="altrow">????<!-- 偶數行 -->
????<td>lovehate</td>
????<td>W47</td>
????<td>Sep 5th</td>
????<td>Virgo</td>
????<td>6098017</td>
??</tr>
??<tr>??????????<!-- 奇數行 -->
????<td>slepox</td>
????<td>W19</td>
????<td>Nov 18th</td>
????<td>Scorpio</td>
????<td>0658635</td>
??</tr>
??<tr class="altrow">????<!-- 偶數行 -->
????<td>smartlau</td>
????<td>W19</td>
????<td>Dec 30th</td>
????<td>Capricorn</td>
????<td>0006621</td>
??</tr>
??<tr>??????????<!-- 奇數行 -->
????<td>whaler</td>
????<td>W19</td>
????<td>Jan 18th</td>
????<td>Capricorn</td>
????<td>1851918</td>
??</tr>
??<tr class="altrow">????<!-- 偶數行 -->
????<td>shenhuanyan</td>
????<td>W25</td>
????<td>Jan 31th</td>
????<td>Aquarius</td>
????<td>0621827</td>
??</tr>
??<tr>??????????<!-- 奇數行 -->
????<td>tuonene</td>
????<td>W210</td>
????<td>Nov 26th</td>
????<td>Sagittarius</td>
????<td>0091704</td>
??</tr>
??<tr class="altrow">????<!-- 偶數行 -->
????<td>ArthurRivers</td>
????<td>W91</td>
????<td>Feb 26th</td>
????<td>Pisces</td>
????<td>0468357</td>
??</tr>
??<tr>??????????<!-- 奇數行 -->
????<td>reconzansp</td>
????<td>W09</td>
????<td>Oct 13th</td>
????<td>Libra</td>
????<td>3643041</td>
??</tr>
??<tr class="altrow">????<!-- 偶數行 -->
????<td>linear</td>
????<td>W86</td>
????<td>Aug 18th</td>
????<td>Leo</td>
????<td>6398341</td>
??</tr>
??<tr>??????????<!-- 奇數行 -->
????<td>laopiao</td>
????<td>W41</td>
????<td>May 17th</td>
????<td>Taurus</td>
????<td>1254004</td>
??</tr>
??<tr class="altrow">????<!-- 偶數行 -->
????<td>dovecho</td>
????<td>W19</td>
????<td>Dec 9th</td>
????<td>Sagittarius</td>
????<td>1892013</td>
??</tr>
??<tr>??????????<!-- 奇數行 -->
????<td>shanghen</td>
????<td>W42</td>
????<td>May 24th</td>
????<td>Gemini</td>
????<td>1544254</td>
??</tr>
??<tr class="altrow">????<!-- 偶數行 -->
????<td>venessawj</td>
????<td>W45</td>
????<td>Apr 1st</td>
????<td>Aries</td>
????<td>1523753</td>
??</tr>
??<tr>??????????<!-- 奇數行 -->
????<td>lightyear</td>
????<td>W311</td>
????<td>Mar 23th</td>
????<td>Aries</td>
????<td>1002908</td>
??</tr>
</table>
</body>
</html>6-5.html
<html>
<head>
<title>Member List</title>
<style>
<!--
.datalist{
??border:1px solid #0058a3;??/* 表格邊框 */
??font-family:Arial;
??border-collapse:collapse;??/* 邊框重疊 */
??background-color:#eaf5ff;??/* 表格背景色 */
??font-size:14px;
}
.datalist caption{
??padding-bottom:5px;
??font:bold 1.4em;
??text-align:left;
}
.datalist th{
??border:1px solid #0058a3;??/* 行名稱邊框 */
??background-color:#4bacff;??/* 行名稱背景色 */
??color:#FFFFFF;????????/* 行名稱顏色 */
??font-weight:bold;
??padding-top:4px; padding-bottom:4px;
??padding-left:12px; padding-right:12px;
??text-align:center;
}
.datalist td{
??border:1px solid #0058a3;??/* 單元格邊框 */
??text-align:left;
??padding-top:4px; padding-bottom:4px;
??padding-left:10px; padding-right:10px;
}
.datalist tr:hover, .datalist tr.altrow{
??background-color:#c4e4ff;??/* 動態變色 */
}
-->
</style>
???? </head>
<body>
<table class="datalist" summary="list of members in EE Studay">
??<caption>Member List</caption>
??<tr>
????<th scope="col">Name</th>
????<th scope="col">Class</th>
????<th scope="col">Birthday</th>
????<th scope="col">Constellation</th>
????<th scope="col">Mobile</th>
??</tr>
??<tr>
????<td>isaac</td>
????<td>W13</td>
????<td>Jun 24th</td>
????<td>Cancer</td>
????<td>1118159</td>
??</tr>
??<tr>
????<td>girlwing</td>
????<td>W210</td>
????<td>Sep 16th</td>
????<td>Virgo</td>
????<td>1307994</td>
??</tr>
??<tr>
????<td>tastestory</td>
????<td>W15</td>
????<td>Nov 29th</td>
????<td>Sagittarius</td>
????<td>1095245</td>
??</tr>
??<tr>
????<td>lovehate</td>
????<td>W47</td>
????<td>Sep 5th</td>
????<td>Virgo</td>
????<td>6098017</td>
??</tr>
??<tr>
????<td>slepox</td>
????<td>W19</td>
????<td>Nov 18th</td>
????<td>Scorpio</td>
????<td>0658635</td>
??</tr>
??<tr>
????<td>smartlau</td>
????<td>W19</td>
????<td>Dec 30th</td>
????<td>Capricorn</td>
????<td>0006621</td>
??</tr>
??<tr>
????<td>whaler</td>
????<td>W19</td>
????<td>Jan 18th</td>
????<td>Capricorn</td>
????<td>1851918</td>
??</tr>
??<tr>
????<td>shenhuanyan</td>
????<td>W25</td>
????<td>Jan 31th</td>
????<td>Aquarius</td>
????<td>0621827</td>
??</tr>
??<tr>
????<td>tuonene</td>
????<td>W210</td>
????<td>Nov 26th</td>
????<td>Sagittarius</td>
????<td>0091704</td>
??</tr>
??<tr>
????<td>ArthurRivers</td>
????<td>W91</td>
????<td>Feb 26th</td>
????<td>Pisces</td>
????<td>0468357</td>
??</tr>
??<tr>
????<td>reconzansp</td>
????<td>W09</td>
????<td>Oct 13th</td>
????<td>Libra</td>
????<td>3643041</td>
??</tr>
??<tr>
????<td>linear</td>
????<td>W86</td>
????<td>Aug 18th</td>
????<td>Leo</td>
????<td>6398341</td>
??</tr>
??<tr>
????<td>laopiao</td>
????<td>W41</td>
????<td>May 17th</td>
????<td>Taurus</td>
????<td>1254004</td>
??</tr>
??<tr>
????<td>dovecho</td>
????<td>W19</td>
????<td>Dec 9th</td>
????<td>Sagittarius</td>
????<td>1892013</td>
??</tr>
??<tr>
????<td>shanghen</td>
????<td>W42</td>
????<td>May 24th</td>
????<td>Gemini</td>
????<td>1544254</td>
??</tr>
??<tr>
????<td>venessawj</td>
????<td>W45</td>
????<td>Apr 1st</td>
????<td>Aries</td>
????<td>1523753</td>
??</tr>
??<tr>
????<td>lightyear</td>
????<td>W311</td>
????<td>Mar 23th</td>
????<td>Aries</td>
????<td>1002908</td>
??</tr>
</table>
<script language="javascript">
var rows = document.getElementsByTagName('tr');
for (var i=0;i<rows.length;i++){
??rows[i]. = function(){????//鼠標在行上面的時候
????this.className += 'altrow';
??}
??rows[i]. = function(){????//鼠標離開時
????this.className = this.className.replace('altrow','');
??}
}
</script>
</body>
</html>6-6.html
<html>
<head>
<title>Calendar</title>
<style>
<!--
.clmonth {
??border-collapse: collapse;
??width: 780px;
}
.clmonth caption {
??text-align: left;
??font: bold 130% Georgia, "Times New Roman";
??padding-bottom: 6px;
}
.clmonth th {
??border: 1px solid #999999;
??border-bottom: none;
??padding: 2px 8px 2px 8px;
??background-color: #D3D2A0;
??color: #2F2F2F;
??font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
??width: 110px;
}
.clmonth td {
??border: 1px solid #AFAFAF;
??font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
??padding: 2px 4px 2px 4px;
??vertical-align: top;
}
.clmonth td.previous, .clmonth td.next {
??background-color: #F5F4E6;
??color: #A6A6A6;
}
.clmonth td.active {
??background-color: #B1CBE1;
??color: #2B5070;
??border: 2px solid #4682B4;
}
.clmonth ul {
??list-style-type: none;
??margin: 0;
??padding-left: 12px;
??padding-right: 6px;
}
.clmonth li {
??margin-bottom: 8px;
}
-->
</style>
???? </head>
<body>
<table class="clmonth" summary="Calendar for January 2007">
??<caption>January 2007</caption>
??<tr>
????<th scope="col">Monday</th>
????<th scope="col">Tuesday</th>
????<th scope="col">Wednesday</th>
????<th scope="col">Thursday</th>
????<th scope="col">Friday</th>
????<th scope="col">Saturday</th>
????<th scope="col">Sunday</th>
??</tr>
??<tr>
????<td class="previous">31</td>
????<td class="active">1
????<ul>
??????<li>五棵松攝影城買鏡頭</li>
??????<li>完成微積分作業</li>
????</ul>
????</td>
????<td>2</td>
????<td>3</td>
????<td>4</td>
????<td>5</td>
????<td>6</td>
??</tr>
??<tr>
????<td class="active">7
????<ul>
??????<li>6A309 線性代數</li>
??????<li>陪同學逛校園</li>
????</ul>
????</td>
????<td>8</td>
????<td>9</td>
????<td>10</td>
????<td>11</td>
????<td>12</td>
????<td class="active">13
????<ul>
??????<li>土狼的課交大作業</li>
????</ul>
????</td>
??</tr>
??<tr>
????<td>14</td>
????<td>15</td>
????<td>16</td>
????<td class="active">17
????<ul>
??????<li>美術作品賞析交大作業</li>
????</ul>
????</td>
????<td class="active">18
????<ul>
??????<li>攝影作品賞析交論文</li>
??????<li>思修交大小論文</li>
????</ul>
????</td>
????<td>19</td>
????<td>20</td>
??</tr>
??<tr>
????<td>21</td>
????<td>22</td>
????<td>23</td>
????<td class="active">24
????<ul>
??????<li>中關村買書</li>
????</ul>
????</td>
????<td>25</td>
????<td>26</td>
????<td class="active">27
????<ul>
??????<li>西單圖書大廈買書</li>
??????<li>西單逛街買禮物給父母</li>
????</ul>
????</td>
??</tr>
??<tr>
????<td>28</td>
????<td>29</td>
????<td class="active">30
????<ul>
??????<li>買水果</li>
??????<li>北京西客站回家過年</li>
????</ul>
????</td>
????<td>31</td>
????<td class="next">1</td>
????<td class="next">2</td>
????<td class="next">3</td>
??</tr>
</table>
</body>
</html>6-7.html
<html>
<head>
<title>表單</title>
<style>
<!--
form {
??border: 1px dotted #AAAAAA;
??padding: 3px 6px 3px 6px;
??margin:0px;
??font:14px Arial;
}
input {
??color: #00008B;
??background-color: #ADD8E6;
??border: 1px solid #00008B;
}
select {
??width: 80px;
??color: #00008B;
??background-color: #ADD8E6;
??border: 1px solid #00008B;
}
textarea {
??width: 200px;
??height: 40px;
??color: #00008B;
??background-color: #ADD8E6;
??border: 1px solid #00008B;
}
-->
</style>
???? </head>
<body>
<form method="post">
<p>請輸入您的姓名:<br><input type="text" name="name" id="name"></p>
<p>請選擇你最喜歡的顏色:<br>
<select name="color" id="color">
??<option value="red">紅</option>
??<option value="green">綠</option>
??<option value="blue">藍</option>
??<option value="yellow">黃</option>
??<option value="cyan">青</option>
??<option value="purple">紫</option>
</select></p>
<p>請問你的性別:<br>
??<input type="radio" name="sex" id="male" value="male">男<br>
??<input type="radio" name="sex" id="female" value="female">女</p>
<p>你喜歡做些什么:<br>
??<input type="checkbox" name="hobby" id="book" value="book">看書
??<input type="checkbox" name="hobby" id="net" value="net">上網
??<input type="checkbox" name="hobby" id="sleep" value="sleep">睡覺</p>
<p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4"></textarea></p>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"></p>
</form>
</body>
</html>6-8.html
<html>
<head>
<title>表單</title>
<style>
<!--
form{
??border: 1px dotted #AAAAAA;
??padding: 1px 6px 1px 6px;
??margin:0px;
??font:14px Arial;
}
input{??????????????/* 所有input標記 */
??color: #00008B;??
}
input.txt{????????????/* 文本框單獨設置 */
??border: 1px inset #00008B;
??background-color: #ADD8E6;
}
input.btn{????????????/* 按鈕單獨設置 */
??color: #00008B;
??background-color: #ADD8E6;
??border: 1px outset #00008B;
??padding: 1px 2px 1px 2px;
}
select{
??width: 80px;
??color: #00008B;
??background-color: #ADD8E6;
??border: 1px solid #00008B;
}
textarea{
??width: 200px;
??height: 40px;
??color: #00008B;
??background-color: #ADD8E6;
??border: 1px inset #00008B;
}
-->
</style>
???? </head>
<body>
<form method="post">
<p>請輸入您的姓名:<br><input type="text" name="name" id="name" class="txt"></p>
<p>請選擇你最喜歡的顏色:<br>
<select name="color" id="color">
??<option value="red">紅</option>
??<option value="green">綠</option>
??<option value="blue">藍</option>
??<option value="yellow">黃</option>
??<option value="cyan">青</option>
??<option value="purple">紫</option>
</select></p>
<p>請問你的性別:<br>
??<input type="radio" name="sex" id="male" value="male" class="rad">男<br>
??<input type="radio" name="sex" id="female" value="female" class="rad">女</p>
<p>你喜歡做些什么:<br>
??<input type="checkbox" name="hobby" id="book" value="book" class="check">看書
??<input type="checkbox" name="hobby" id="net" value="net" class="check">上網
??<input type="checkbox" name="hobby" id="sleep" value="sleep" class="check">睡覺</p>
<p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4" class="txtarea"></textarea></p>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn"></p>
</form>
</body>
</html>6-9.html
<html>
<head>
<title>像文字一樣的按鈕</title>
<style>
<!--
body{
??background-color:#daeeff;??????/* 頁面背景色 */
}
form{
??margin:0px; padding:0px;
??font:14px;
}
input{
??font:14px Arial;
}
.txt{
??border-bottom:1px solid #005aa7;??/* 下劃線效果 */
??color:#005aa7;
??border-top:0px; border-left:0px;
??border-right:0px;
??background-color:transparent;????/* 背景色透明 */
}
.btn{
??background-color:transparent;????/* 背景色透明 */
??border:0px;??????????????/* 邊框取消 */
}
-->
</style>
???? </head>
<body>
<form method="post">
??請輸入您的信息: <input type="text" name="name" id="name" class="txt">
??<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit>>" class="btn">
</form>
</body>
</html>6-10.html
<html>
<head>
<title>七彩的下拉菜單</title>
<style>
<!--
.blue{
??background-color:#7598FB;
??color: #000000;
}
.red{
??background-color:#E20A0A;
??color: #ffffff;
}
.green{
??background-color:#3CB371;
??color: #ffffff;
}
.yellow{
??background-color:#FFFF6F;
??color: #000000;
}
.cyan{
??background-color:00FFFF;
??color:#000000;
}
.purple{
??background-color:800080;
??color:#FFFFFF;
}
-->
</style>
???? </head>
<body>
<form method="post">
??<p><label for="color">Select your favorite color:</label>
??<select name="color" id="color">
????<option value="">Select One</option>
????<option value="blue" class="blue">blue</option>
????<option value="red" class="red">red</option>
????<option value="green" class="green">green</option>
????<option value="yellow" class="yellow">yellow</option>
????<option value="cyan" class="cyan">cyan</option>
????<option value="purple" class="purple">purple</option>
??</select></p>
??<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Send!"></p>
</form>
</body>
</html>6-11.html
<html>
<head>
<title>直接輸入的Excel表格</title>
<style>
<!--
table.formdata{
??border:1px solid #5F6F7E;
??border-collapse:collapse;
??font-family:Arial;
}
table.formdata caption{
??text-align:left;
??padding-bottom:6px;
}
table.formdata th{
??border:1px solid #5F6F7E;
??background-color:#E2E2E2;
??color:#000000px;
??text-align:left;
??font-weight:normal;
??padding:2px 8px 2px 6px;
??margin:0px;
}
table.formdata td{
??margin:0px;
??padding:0px;
??border:1px solid #ABABAB;??/* 單元格邊框 */
}
table.formdata input{
??width:100px;
??padding:1px 3px 1px 3px;
??margin:0px;
??border:none;????????/* 輸入框不要邊框 */
??font-family:Arial;
}
.btn{
??border:1px solid #0083f2;
??font-family:Arial;
}
-->
</style>
???? </head>
<body>
<form method="post">
<table class="formdata">
<caption>公司銷售統計表 2004～2007</caption>
<tr>
<th></th>
<th scope="col">2004</th>
<th scope="col">2005</th>
<th scope="col">2006</th>
<th scope="col">2007</th>
</tr>
<tr>
<th scope="row">硬盤(Hard Disk)</th>
??<td><input type="text" name="harddisk2004" id="harddisk2004"></td>
??<td><input type="text" name="harddisk2005" id="harddisk2005"></td>
??<td><input type="text" name="harddisk2006" id="harddisk2006"></td>
??<td><input type="text" name="harddisk2007" id="harddisk2007"></td>
</tr>
<tr>
??<th scope="row">主板(Mainboard)</th>
??<td><input type="text" name="mainboard2004" id="mainboard2004"></td>
??<td><input type="text" name="mainboard2005" id="mainboard2005"></td>
??<td><input type="text" name="mainboard2006" id="mainboard2006"></td>
??<td><input type="text" name="mainboard2007" id="mainboard2007"></td>
</tr>
<tr>
??<th scope="row">內存條(Memory Disk)</th>
??<td><input type="text" name="memory2004" id="memory2004"></td>
??<td><input type="text" name="memory2005" id="memory2005"></td>
??<td><input type="text" name="memory2006" id="memory2006"></td>
??<td><input type="text" name="memory2007" id="memory2007"></td>
</tr>
<tr>
??<th scope="row">機箱(Case)</th>
??<td><input type="text" name="case2004" id="case2004"></td>
??<td><input type="text" name="case2005" id="case2005"></td>
??<td><input type="text" name="case2006" id="case2006"></td>
??<td><input type="text" name="case2007" id="case2007"></td>
</tr>
<tr>
<th scope="row">電源(Power)</th>
??<td><input type="text" name="power2004" id="power2004"></td>
??<td><input type="text" name="power2005" id="power2005"></td>
??<td><input type="text" name="power2006" id="power2006"></td>
??<td><input type="text" name="power2007" id="power2007"></td>
</tr>
<tr>
??<th scope="row">CPU風扇(CPU Fan)</th>
??<td><input type="text" name="cpufan2004" id="cpufan2004"></td>
??<td><input type="text" name="cpufan2005" id="cpufan2005"></td>
??<td><input type="text" name="cpufan2006" id="cpufan2006"></td>
??<td><input type="text" name="cpufan2007" id="cpufan2007"></td>
</tr>
<tr>
<th scope="row">總計(Total)</th>
??<td><input type="text" name="total2004" id="total2004"></td>
??<td><input type="text" name="total2005" id="total2005"></td>
??<td><input type="text" name="total2006" id="total2006"></td>
??<td><input type="text" name="total2007" id="total2007"></td>
</tr>
</table>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn">
<input type="reset" value="Reset All" class="btn"></p>
</form>
</body>
</html>6-12.html
<html>
<head>
<title>Sina調查問卷</title>
<style>
<!--
table.outside{??????????/* 外層表格 */
??background:url(bg1.jpg);
??font-size:12px;
??padding:0px;
}
td.title{????????????/* 表格標題 */
??color:#FFFFFF;
??font-weight:bold;
??text-align:center;
??padding-top:3px;
??padding-bottom:0px;
}
td.tdoutside{
??padding:0px 1px 4px 1px;
}
table.inside{??????????/* 內層表格 */
??width:269px;
??font-size:12px;
??padding:0px;
??margin:0px;
}
td.tdinside{
??padding:7px 0px 7px 10px;
??background-color:#FFD455;
}
form{
??margin:0px; padding:0px;
}
input{
??font-size:12px;
}
a{
??color:#000000;
??text-decoration:underline;
}
-->
</style>
???? </head>
<body>
<table class="outside">
??<tr><td class="title">熱點調查</td></tr>
??<tr><td class="tdoutside">
????<form method="post">
????<table class="inside" cellspacing="0">
??????<tr>
????????<td class="tdinside">
????????在姚明缺陣麥蒂領軍的情況下，火箭隊的勝率是<br>
????????<input type="radio" name="q_498" value="2749">超過60％<br>
????????<input type="radio" name="q_498" value="2750">50％到60％<br>
????????<input type="radio" name="q_498" value="2751">40％到50％<br>
????????<input type="radio" name="q_498" value="2752">40％到50％
????????<input type="radio" name="q_498" value="2753">30％以下<br>
????????<input type="submit" value="提交">
????????<input type="button" name="viewresult" value="查看"> <a href="#">新浪-籃球先鋒報聯合評選</a>
????????</td>
??????</tr>
????</table>
????</form>
??</td></tr>
</table>
</body>
</html>
來源：《精通CSS+DIV網頁樣式與布局》
轉載于:https://blog.51cto.com/zhangjingqiang/186845
總結
以上是生活随笔為你收集整理的CSS+DIV-设置表格与表单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 梦到梳头发是什么意思周公解梦
- 下一篇： 关于绑定了GridView控件后怎么截取