search

博客列表 >常用标签，属性，表格

常用标签，属性，表格

苦咖啡
苦咖啡原创
2021年07月12日 22:17:26474浏览

学习第二天

常用标签

  • 常用：a ，img，style，div，input
  • 列表元素：nav+ul+li
  • 表格元素：table+thead+tr+th/td+tbody+tr+td+tfoot+tr+td
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>第二天作业：做一个表格</title>
  9.   </head>
  10.   <body>
  11.     <!-- 分析：N行5列 -->
  12.     <table border="1" width="80%" cellspacing="0" cellpadding="10">
  13.       <!-- 标题 -->
  14.       <caption>
  15.         <!-- 商品盘点表 -->
  16.         <!-- 表头 -->
  17.         <tr>
  18.           <th colspan="6" bgcolor="yellow">商品盘点表</th>
  19.           <!-- <th></th>
  20.                 <th></th>
  21.                 <th></th>
  22.                 <th></th> -->
  23.         </tr>
  24.       </caption>
  25.       <!-- 表体 -->
  26.       <tbody bgcolor="red" align="center">
  27.         <tr>
  28.           <td class="color">id</td>
  29.           <td>品名</td>
  30.           <td>价格</td>
  31.           <td>数量</td>
  32.           <td>金额</td>
  33.           <td>类别</td>
  34.         </tr>
  35.         <tr>
  36.           <td class="color">1</td>
  37.           <td>笔记本</td>
  38.           <td>10</td>
  39.           <td>10</td>
  40.           <td>100</td>
  41.           <td rowspan="2">移动电脑</td>
  42.         </tr>
  43.         <tr>
  44.           <td class="color">2</td>
  45.           <td>游戏本</td>
  46.           <td>20</td>
  47.           <td>20</td>
  48.           <td>400</td>
  49.           <!-- <td></td> -->
  50.         </tr>
  51.         <tr>
  52.           <td class="color">3</td>
  53.           <td>平板电脑</td>
  54.           <td>30</td>
  55.           <td>30</td>
  56.           <td>900</td>
  57.           <td rowspan="2">固定电脑</td>
  58.         </tr>
  59.         <tr>
  60.           <td class="color">4</td>
  61.           <td>台式机</td>
  62.           <td>40</td>
  63.           <td>40</td>
  64.           <td>1600</td>
  65.           <!-- <td></td> -->
  66.         </tr>
  67.       </tbody>
  68.       <tbody align="center">
  69.         <tr>
  70.           <td colspan="6" class="tjbf">统计部分</td>
  71.           <!-- <td></td>
  72.                 <td></td>
  73.                 <td></td>
  74.                 <td></td>
  75.                 <td></td> -->
  76.         </tr>
  77.       </tbody>
  78.       <tbody align="center">
  79.         <tr>
  80.           <td class="color">总计金额</td>
  81.           <td
  82.             rowspan="2"
  83.             colspan="4"
  84.             class="bz"
  85.             title="哎呀，帅哥美女，来玩呀，来都来了，说点啥呗，做点啥也行呀"
  86.           >
  87.             备注：快把鼠标移过来
  88.           </td>
  89.           <!-- <td></td>
  90.                 <td></td>
  91.                 <td></td>-->
  92.           <td class="money">3000</td>
  93.         </tr>
  94.         <tr>
  95.           <td class="color">总计个数</td>
  96.           <!-- <td></td>
  97.                 <td></td>
  98.                 <td></td>
  99.                 <td></td> -->
  100.           <td class="money">200</td>
  101.         </tr>
  102.       </tbody>
  104.       <style>
  105.         .color {
  106.           background-color: burlywood;
  107.         }
  108.         .tjbf {
  109.           background-color: chartreuse;
  110.         }
  111.         .bz {
  112.           background-color: darkcyan;
  113.         }
  114.         .money {
  115.           background: lightskyblue;
  116.         }
  117.       </style>
  118.     </table>
  119.   </body>
  120. </html>
上一条：Promise的用法-初下一条：安装编辑器与常用插件
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多