表格练习

重点属性：

border,rowspan, colspan,text-align.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>表格与表单</title>
  8.     <style>
  9.       table {
  10.         width: 50%;
  11.         margin: 0 auto;
  12.         border-spacing: 0;
  13.         background-color: bisque;
  14.       }
  15.       caption {
  16.         font-weight: bold;
  17.       }
  18.       .rest {
  19.         background-color: lightcoral;
  20.         color: honeydew;
  21.       }
  22.       td {
  23.         text-align: center;
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <!-- border设置表格的边框属性 -->
  29.     <table border="1">
  30.       <!-- caption 用于表格中可以代替标题的作用，有居中的效果 -->
  31.       <caption>
  32.         计算机班上半年课程表
  33.       </caption>
  34.       <thead>
  35.         <tr>
  36.           <!-- th表头，带有字体加粗并且具有居中的效果 -->
  37.           <th>上午/下午</th>
  38.           <th>星期一</th>
  39.           <th>星期二</th>
  40.           <th>星期三</th>
  41.           <th>星期四</th>
  42.           <th>星期五</th>
  43.         </tr>
  44.       </thead>
  45.       <tbody>
  46.         <tr>
  47.           <!-- rowspan设置元素跨越几行 -->
  48.           <th rowspan="4">上午</th>
  49.           <td>UI设计</td>
  50.           <td>语文</td>
  51.           <td>web前端</td>
  52.           <td>英语</td>
  53.           <td>音乐鉴赏</td>
  54.         </tr>
  55.         <tr>
  56.           <td>数学</td>
  57.           <td>历史</td>
  58.           <td>web前端</td>
  59.           <td>英语</td>
  60.           <td>政治</td>
  61.         </tr>
  62.         <tr>
  63.           <td>UI设计</td>
  64.           <td>语文</td>
  65.           <td>web前端</td>
  66.           <td>概率与统计论</td>
  67.           <td>美术</td>
  68.         </tr>
  69.         <tr>
  70.           <td>UI设计</td>
  71.           <td>形体课</td>
  72.           <td>web前端</td>
  73.           <td>数学</td>
  74.           <td>彩妆</td>
  75.         </tr>
  76.         <tr>
  77.           <!-- colspan设置元素跨越几列 -->
  78.           <th colspan="6" class="rest">课间休息</th>
  79.         </tr>
  80.       </tbody>
  81.       <tbody>
  82.         <tr>
  83.           <th rowspan="3">下午</th>
  84.           <td>UI设计</td>
  85.           <td>web前端</td>
  86.           <td>英语</td>
  87.           <td>政治</td>
  88.           <td>彩妆</td>
  89.         </tr>
  90.         <tr>
  91.           <td>UI设计</td>
  92.           <td>气排球</td>
  93.           <td>web前端</td>
  94.           <td>历史</td>
  95.           <td>形体</td>
  96.         </tr>
  97.         <tr>
  98.           <td>UI设计</td>
  99.           <td>web前端</td>
  100.           <td>英语</td>
  101.           <td>美术</td>
  102.           <td>音乐鉴赏</td>
  103.         </tr>
  104.         <tr>
  105.           <th colspan="6" class="rest">周六/周末不上课</th>
  106.         </tr>
  107.       </tbody>
  108.     </table>
  109.   </body>
  110. </html>

更多相关文章

  1. 学生课程表表格/用户注册表单
  2. html基础：制作简单的表格与表单
  3. 商品详情平面设计，图片文字的镜像处理
  4. 从理论-实战，手把手带你图解微服务架构流程设计！
  5. FreeModbus从站设计（7）-如何让RTU的定时器正常工作起来
  6. Go泛型草案设计简明指南
  7. 课程表、用户注册及 css 预习
  8. 自动化运维之架构设计六要点 | 腾讯大梁专栏
  9. markdown的常用语法

随机推荐

  1. Android UI组件Spinner下拉列表详解
  2. Qt5.12.1 for Android配置
  3. Android界面布局基本知识简述
  4. 【Android】Android 4.2源码下载（ubuntu 1
  5. android activity的生命周期
  6. Android 4 编程入门经典
  7. Android 3.0 r1 API中文文档(107) ―― A
  8. Android Activity四种启动方式
  9. Android 神兵利器Dagger2使用详解（四）Scope
  10. Android Studio无法启动 打开， Android St