HTML4表格 -- 笔记 - 图2review0422

  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <title>review0422</title>
  6.     <meta charset="utf-8">
  7. </head>
  8. <body>
  9.     <!-- 创建两行三列的表格 -->
  10.     <table border="1px" width="500px" bgcolor="#00ff00" cellspacing="0" cellpadding="5px" align="center" frame="box" rules="box">
  11.         <caption>前端工程师平均工资</caption>
  12.         <thead>
  13.             <tr bgcolor="#00ffff">
  14.                 <th bgcolor="#FFFF00">城市</th>    
  15.                 <th>2014年</th>
  16.                 <th>2015年</th>
  17.                 <th>2016年</th>
  18.                 <th>2017年</th>
  19.             </tr>
  20.         </thead>
  21.         <tbody>
  22.             <tr align="center">
  23.                 <td bgcolor="#FF8C00" valign="middle">北京</td>
  24.                 <td>8000</td>
  25.                 <td>9000</td>
  26.                 <td>10000</td>
  27.                 <td>12000</td>
  28.             </tr>
  29.             <tr align="center">
  30.                 <td bgcolor="#FF8C00" valign="middle">上海</td>
  31.                 <td>6000</td>
  32.                 <td>7000</td>
  33.                 <td>8000</td>
  34.                 <td>10000</td>
  35.             </tr>
  36.         </tbody>
  37.         <tfoot>
  38.             <tr align="center" valign="middle" bgcolor="#EE82EE">
  39.                 <td height="50px" bgcolor="#F5DEB3">合计</td>
  40.                 <td>14000</td>
  41.                 <td>15000</td>
  42.                 <td>18000</td>
  43.                 <td>22000</td>
  44.             </tr>
  45.         </tfoot>
  46.     </table>
  48.     <hr>
  49.     <!-- 课程表 -->
  50.     <table border="1" width="600px" align="center" bgcolor="    #CD853F">
  51.         <caption>课程表</caption>
  52.         <tr align="center" bgcolor="#2E8B57">
  53.             <td bgcolor="#ADFF2F">星期</td>
  54.             <td>星期一</td>
  55.             <td>星期二</td>
  56.             <td>星期三</td>
  57.             <td>星期四</td>
  58.             <td>星期五</td>
  59.         </tr>
  60.         <tr align="center">
  61.             <td bgcolor="#FF6347">第一节课</td>
  62.             <td bgcolor="#00FF00">数学</td>
  63.             <td bgcolor="#00FF00">数学</td>
  64.             <td rowspan="2" colspan="2" bgcolor="#00FF00">数学</td>
  65.             <!-- <td>数学</td> -->
  66.             <td bgcolor="#00FF00">数学</td>
  67.         </tr>
  68.         <tr align="center">
  69.             <td bgcolor="#FF6347">第二节课</td>
  70.             <td bgcolor="#1E90FF">英语</td>
  71.             <td bgcolor="#1E90FF">英语</td>
  72.             <!-- <td>数学</td> -->
  73.             <!-- <td>数学</td> -->
  74.             <td bgcolor="#FFC0CB">音乐</td>
  75.         </tr>
  76.         <tr align="center">
  77.             <td bgcolor="#FF6347">第三节课</td>
  78.             <td rowspan="2" bgcolor="#A52A2A">语文</td>
  79.             <td bgcolor="#FFC0CB">音乐</td>
  80.             <td bgcolor="#4B0082">美术</td>
  81.             <td rowspan="2" bgcolor="#A52A2A">语文</td>
  82.             <td bgcolor="#A52A2A">语文</td>
  83.         </tr>
  84.         <tr align="center">
  85.             <td bgcolor="#FF6347">第四节课</td>
  86.             <!-- <td>语文</td> -->
  87.             <td bgcolor="#A52A2A">语文</td>
  88.             <td bgcolor="#1E90FF">英语</td>
  89.             <!-- <td>语文</td> -->
  90.             <td bgcolor="#FFD700">体育</td>
  91.         </tr>
  92.         <tr align="center" bgcolor="#FFFF00">
  93.             <td colspan="6">午休</td>
  94.             <!-- <td>午休</td> -->
  95.             <!-- <td>午休</td> -->
  96.             <!-- <td>午休</td> -->
  97.             <!-- <td>午休</td> -->
  98.             <!-- <td>午休</td> -->
  99.         </tr>
  100.         <tr align="center">
  101.             <td bgcolor="#FF6347">第五节课</td>
  102.             <td bgcolor="#A52A2A">语文</td>
  103.             <td rowspan="2" bgcolor="#FFD700">体育</td>
  104.             <td bgcolor="#FFD700">体育</td>
  105.             <td bgcolor="#4B0082">美术</td>
  106.             <td bgcolor="#E6E6FA">劳动</td>
  107.         </tr>
  108.         <tr align="center">
  109.             <td bgcolor="#FF6347">第六节课</td>
  110.             <td bgcolor="#A9A9A9">自习</td>
  111.             <!-- <td>体育</td> -->
  112.             <td bgcolor="#A9A9A9">自习</td>
  113.             <td bgcolor="#A9A9A9">自习</td>
  114.             <td bgcolor="#A9A9A9">自习</td>
  115.         </tr>
  116.     </table>
  118.     <hr>
  119.     <!-- 表单 -->
  120.     <form action="" method="">
  121.         <label>请输入姓名：</label>
  122.             <input type="text" name="" id="">
  123.             <br>
  124.         <label>请输入密码：</label>
  125.             <input type="password" name="" id="">
  126.             <br>
  127.         <label>再次输入密码：</label>
  128.             <input type="password" name="" id="">
  129.             <br>
  130.         <label>性别：</label>
  131.             <input type="radio" name="xb" value="male">男
  132.             <input type="radio" name="xb" value="female">女
  133.             <br>
  134.         <label>兴趣爱好：</label>
  135.             <input type="checkbox" name="ah" id="" value="1">游泳
  136.             <input type="checkbox" name="ah" id="" value="2">看书
  137.             <input type="checkbox" name="ah" id="" value="3">爬山
  138.             <input type="checkbox" name="ah" id="" value="4">思考
  139.             <br>
  140.         <label>生日：</label>
  141.             <select>
  142.                 <option value="1995">1995</option>
  143.                 <option value="1996">1996</option>
  144.                 <option value="1997">1997</option>
  145.                 <option value="1998">1998</option>
  146.                 <option value="1999">1999</option>
  147.                 <option value="2000">2000</option>
  148.             </select>年
  149.             <select>
  150.                 <option value="1">1</option>
  151.                 <option value="2">2</option>
  152.                 <option value="3">3</option>
  153.                 <option value="4">4</option>
  154.                 <option value="5">5</option>
  155.                 <option value="6">6</option>
  156.                 <option value="7">7</option>
  157.                 <option value="8">8</option>
  158.                 <option value="9">9</option>
  159.                 <option value="10">10</option>
  160.                 <option value="11">11</option>
  161.                 <option value="12">12</option>
  162.             </select>月
  163.             <select>
  164.                 <option value="1">1</option>
  165.                 <option value="2">2</option>
  166.                 <option value="3">3</option>
  167.                 <option value="4">4</option>
  168.                 <option value="5">5</option>
  169.                 <option value="6">6</option>
  170.                 <option value="7">7</option>
  171.                 <option value="8">8</option>
  172.                 <option value="9">9</option>
  173.                 <option value="10">10</option>
  174.                 <option value="11">11</option>
  175.                 <option value="12">12</option>
  176.                 <option value="13">13</option>
  177.                 <option value="14">14</option>
  178.                 <option value="15">15</option>
  179.                 <option value="16">16</option>
  180.                 <option value="17">17</option>
  181.                 <option value="18">18</option>
  182.                 <option value="19">19</option>
  183.                 <option value="20">20</option>
  184.                 <option value="21">21</option>
  185.                 <option value="22">22</option>
  186.                 <option value="23">23</option>
  187.                 <option value="24">24</option>
  188.                 <option value="25">25</option>
  189.                 <option value="26">26</option>
  190.                 <option value="27">27</option>
  191.                 <option value="28">28</option>
  192.                 <option value="29">29</option>
  193.                 <option value="30">30</option>
  194.                 <option value="31">31</option>
  195.                 </select>日
  197.     </form>
  198. </body>
  199. </html>