1、 作业

  1. <!DOCTYPE html>
  2. <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>Document</title>
  9. </head>
  11. <body>
  12.     <table border="1" width="80%">
  13.         <!-- 标题 -->
  14.         <caption>
  15.             商品信息表
  16.         </caption>
  17.         <!-- 表头 -->
  18.         <thead>
  19.             <tr align="center">
  20.                 <td>ID</td>
  21.                 <td>品名</td>
  22.                 <td>价格</td>
  23.                 <td>数量</td>
  24.                 <td>金额</td>
  25.             </tr>
  26.         </thead>
  28.         <!-- 表体 -->
  29.         <tbody>
  30.             <tr align="center" >
  31.                 <td>1</td>
  32.                 <td>方便面</td>
  33.                 <td colspan="3" bgcolor="yellow">1</td>
  34.                 <!-- <td>1</td>
  35.                 <td>1</td> -->
  36.             </tr>
  37.             <tr align="center">
  38.                 <td>2</td>
  39.                 <td>馒头</td>
  40.                 <td>2</td>
  41.                 <td rowspan="2" bgcolor="green">2</td>
  42.                 <td>4</td>
  43.             </tr>
  44.             <tr align="center">
  45.                 <td>3</td>
  46.                 <td>蔬菜</td>
  47.                 <td>3</td>
  48.                 <!-- <td>2</td> -->
  49.                 <td>6</td>
  50.             </tr>
  51.         </tbody>
  52.         <!-- 表尾 -->
  53.         <tfoot>
  54.             <tr align="center">
  55.                 <td>汇总：</td>
  56.                 <td>3</td>
  57.                 <td></td>
  58.                 <td>5</td>
  59.                 <td>11</td>
  60.             </tr>
  61.         </tfoot>
  62.     </table>
  63. </body>
  65. </html>

2、笔记

标准的table表格写法

  1. ```html
  2.     <table border="1" width="80%">
  4.         <!-- 标题 -->
  5.         <caption>
  6.             <!-- 标题内容-->
  7.         </caption>
  9.         <!-- 表头 -->
  10.         <thead>
  11.             <tr align="center">
  12.                 <td> </td>
  13.             </tr>
  14.         </thead>
  16.         <!-- 表体 -->
  17.         <tbody>
  18.             <tr align="center" >
  19.                 <td>1</td>
  20.             </tr>
  21.             <tr align="center">
  22.                 <td>2</td>
  23.             </tr>
  24.             <tr >
  25.                 <td>3</td>
  26.             </tr>
  27.         </tbody>
  29.         <!-- 可以有多个tbody -->
  30.         <tbody>
  31.             <tr align="center" >
  32.                 <td>1</td>
  33.             </tr>
  34.             <tr align="center">
  35.                 <td>2</td>
  36.             </tr>
  37.             <tr >
  38.                 <td>3</td>
  39.             </tr>
  40.         </tbody>
  42.         <!-- 表尾 非必须 -->
  43.         <tfoot>
  44.             <tr>
  45.                 <td></td>
  46.             </tr>
  47.         </tfoot>
  48.     </table>

```
table合并行和和并列的属性，属性必须用于单元格内，不能用于<tr>

rowspan可以用于行合并
colspan可以用于列合并

更多相关文章

  1. 区块链SASE应用于数据安全流通的探讨
  2. LogDevice：一种用于日志的分布式数据存储系统
  3. 谷歌开发MicroDroid，用于虚拟机的精简版Android
  4. Small Structures：低载量Pt纳米团簇锚定在石墨烯空心球上用于高效
  5. Small：分级多腔氮掺杂碳纳米球用于快速长寿命钠硒电池
  6. C语言中用于计算数组长度的函数 “strlen（） ”。
  7. 【DB笔试面试494】Oracle中哪个包用于生成随机值？
  8. 网工必知：用于监控企业网络的10款最佳工具，拿走！不谢！
  9. python的time模块

随机推荐

  1. Android 上 Https 双向通信— 深入理解Ke
  2. android 实现自定义键盘的实例
  3. android 使用Intent传递数据之全局变量传
  4. 心血收藏，2G源码
  5. Android工具箱之Context解析
  6. Android系统的上下文对象Context
  7. android 资源文件String字符串拼接
  8. android仿今日头条App、多种漂亮加载效果
  9. Android样式基础--shape篇
  10. Android发布, Android中国网站正式成立,