表格

表格也是用一组标签来描述：
table,thead,tbody,tr,td/th
所有的数据必须填充到td/th中
th是td的plus+，自带了一个加租和居中样式

  1.     <table class="">
  2.         <!-- 表格标题 -->
  3.         <caption>商品信息表</caption>
  4.         <!-- 表头 -->
  5.         <thead>
  6.             <!-- 没添加一组表格数据,必须先添加一行 -->
  7.             <tr>
  8.                 <th>ID</th>
  9.                 <th>品名</th>
  10.                 <th>单价</th>
  11.                 <th>数量</th>
  12.                 <th>金额</th>
  13.             </tr>
  14.         </thead>
  15.         <!-- 表格的主体,一个表格可以右多个主体,但只能有一个表头 -->
  16.         <tbody>
  17.             <!-- tobody浏览器自动生成,但是代码必须写,否则js取值可能出错 -->
  18.             <tr>
  19.                 <td>a100</td>
  20.                 <td>手机</td>
  21.                 <td>999</td>
  22.                 <td>部</td>
  23.                 <td>1</td>
  24.                 <td>999</td>
  25.             </tr>
  26.             <tr>
  27.                 <td>a100</td>
  28.                 <td>电脑</td>
  29.                 <td>999</td>
  30.                 <td>部</td>
  31.                 <td>1</td>
  32.                 <td>999</td>
  33.             </tr>
  34.             <tr>
  35.                 <td>a100</td>
  36.                 <td>电话</td>
  37.                 <td>999</td>
  38.                 <td>部</td>
  39.                 <td>1</td>
  40.                 <td>999</td>
  41.             </tr>
  42.             <tr>
  43.                 <td>a100</td>
  44.                 <td>相机</td>
  45.                 <td>999</td>
  46.                 <td>部</td>
  47.                 <td>1</td>
  48.                 <td>999</td>
  49.             </tr>
  50.         </tbody>
  51.         <tbody>
  52.             <tr>
  53.                 <td>b1</td>
  54.                 <td>手机</td>
  55.                 <td>999</td>
  56.                 <td>部</td>
  57.                 <td>1</td>
  58.                 <td>999</td>
  59.             </tr>
  60.             <tr>
  61.                 <td>b2</td>
  62.                 <td>电脑</td>
  63.                 <td>999</td>
  64.                 <td>部</td>
  65.                 <td>1</td>
  66.                 <td>999</td>
  67.             </tr>
  68.             <tr>
  69.                 <td>b3</td>
  70.                 <td>电话</td>
  71.                 <td>999</td>
  72.                 <td>部</td>
  73.                 <td>1</td>
  74.                 <td>999</td>
  75.             </tr>
  76.             <tr>
  77.                 <td>b4</td>
  78.                 <td>相机</td>
  79.                 <td>999</td>
  80.                 <td>部</td>
  81.                 <td>1</td>
  82.                 <td>999</td>
  83.             </tr>
  84.         </tbody>
  85.     </table>
  86.     <!-- 分页 -->
  87.     <p class="page">
  88.         <a href="">首页</a>
  89.         <a href="">...</a>
  90.         <a href="">6</a>
  91.         <a href="">7</a>
  92.         <a href="">尾页</a>
  93.     </p>

效果图

行与列的合并

colspan：合并行
rowspan:合并列

  1. <table border="1">
  2.         <caption>合肥市第三十六小学课程表</caption>
  3.         <thead>
  4.             <tr>
  5.                 <!-- 合并行 -->
  6.                 <th colspan="2"></th>
  7.                 <th>星期一</th>
  8.                 <th>星期二</th>
  9.                 <th>星期三</th>
  10.                 <th>星期四</th>
  11.                 <th>星期五</th>
  12.                 <th>星期六</th>
  13.                 <th>星期日</th>
  14.             </tr>
  15.         </thead>
  16.         <tbody>
  17.             <tr>
  18.                 <!-- 合并列  -->
  19.                 <td rowspan="4" bgcolor="#ccc">上午</td>
  20.                 <td>1</td>
  21.                 <td>数学</td>
  22.                 <td>语文</td>
  23.                 <td>语文</td>
  24.                 <td>语文</td>
  25.                 <td>数学</td>
  26.                 <td>语文</td>
  27.                 <td>数学</td>
  28.             </tr>
  29.             <tr>
  30.                 <td>2</td>
  31.                 <td>数学</td>
  32.                 <td>语文</td>
  33.                 <td>语文</td>
  34.                 <td>语文</td>
  35.                 <td>数学</td>
  36.                 <td>语文</td>
  37.                 <td>数学</td>
  38.             </tr>
  39.             <tr>
  40.                 <td>3</td>
  41.                 <td>数学</td>
  42.                 <td>语文</td>
  43.                 <td>语文</td>
  44.                 <td>语文</td>
  45.                 <td>数学</td>
  46.                 <td>语文</td>
  47.                 <td>数学</td>
  48.             </tr>
  49.             <tr>
  50.                 <td>4</td>
  51.                 <td>数学</td>
  52.                 <td>语文</td>
  53.                 <td>语文</td>
  54.                 <td>语文</td>
  55.                 <td>数学</td>
  56.                 <td>语文</td>
  57.                 <td>数学</td>
  58.             </tr>
  59.             <tr>
  60.                 <th colspan="9" bgcolor="#ccc">中午休息</th>
  61.             </tr>
  62.             <tr>
  63.                 <!-- 合并列  -->
  64.                 <td rowspan="3" bgcolor="#ccc">下午</td>
  65.                 <td>5</td>
  66.                 <td>数学</td>
  67.                 <td>语文</td>
  68.                 <td>语文</td>
  69.                 <td>语文</td>
  70.                 <td>数学</td>
  71.                 <td>语文</td>
  72.                 <td>数学</td>
  73.             </tr>
  74.             <tr>
  75.                 <td>6</td>
  76.                 <td>数学</td>
  77.                 <td>语文</td>
  78.                 <td>语文</td>
  79.                 <td>语文</td>
  80.                 <td>数学</td>
  81.                 <td>语文</td>
  82.                 <td>数学</td>
  83.             </tr>
  84.             <tr>
  85.                 <td>7</td>
  86.                 <td colspan="8" bgcolor="#ccc">课外活动：各班自行组织自愿参加</td>
  88.             </tr>
  89.         </tbody>
  90.     </table>

效果图

更多相关文章

  1. 学习Python数学英语基础重要吗?Python教程!
  2. Python入门课程零基础到精通——基本数学运算
  3. 公钥密码的三大数学问题
  4. Android(安卓)页面手势滑动
  5. map 参数学习
  6. android利用mathjax在webview上显示数学公式
  7. android String资源 包含 数学符号等特殊字符 及 参数占位符
  8. Android中的数学问题
  9. android_relative布局参数学习

随机推荐

  1. Linux性能优化（六）——网络配置工具
  2. 全文检索引擎 Solr 系列（1）— 入门篇
  3. 如何用CSS3画出懂你的3D魔方？
  4. 全文检索引擎 Solr 系列（3）— Solr 核心概
  5. 浅谈easy-mock 最好的备胎没有之一
  6. 谁要是再敢用Map传参，我过去就是一JIO
  7. 不瞒你说，我最近跟Java源码杠上了
  8. 听说程序猿不会撩妹，我笑了
  9. immutability-helper因React官方出镜，而被
  10. 万圣节带你一起去鬼混！