CSS+DIV-設置表格與表單

原創 zhangjingqiang 2018-09-12 06:53

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網頁樣式與佈局》
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

路遇一個“乞討者“

楊木藝 2019-02-24 14:19:35

如果同事暗中傷害你，應該怎麼辦？

這個饅頭有餡 2019-02-24 13:59:08

職場中，抱怨越多的員工，越被領導瞧不起！

這個饅頭有餡 2019-02-24 13:59:08

老程序員被裁，應屆生卻能月薪 1.3 萬？這你能忍？

前端高達 2019-02-24 13:48:04

遇到到處蹭吃卻從不請客吃飯的主怎麼辦？

樑軍年 2019-02-24 13:26:35

Linux基本操作命令

wbzjacky 2019-02-24 13:12:38

高標準機房綜合配線安裝

wbzjacky 2019-02-24 13:12:38

444句英語

wbzjacky 2019-02-24 13:12:37

IPsec ***實驗

wbzjacky 2019-02-24 13:12:37

真實的模擬***綜合實驗

wbzjacky 2019-02-24 13:12:37

網絡系統集成

wbzjacky 2019-02-24 13:12:37

CISCO路由AAA的Easy ***

wbzjacky 2019-02-24 13:12:37

三層交換機的HSRP、vlan、端口聚合

wbzjacky 2019-02-24 13:12:37

CISCO訪問控制列表 企業網絡管理的必殺技

wbzjacky 2019-02-24 13:12:37

HSRP和二層交換機的端口聚合、vlan

wbzjacky 2019-02-24 13:12:37