HTML基础——表格

表格：用来展示数据的，让数据显示整齐规范，展示数据

表单：用来收集用户信息的

列表：用来布局，使页面布局整齐规范

---

表格：
一个完整的表格有表格标签table，行标签tr，单元格标签td（都是双标签）。
tr中只能嵌套td类的单元格，td标签就像一个容器，可以容纳所有的元素。
将td变成th就可以将字体加粗。
表格标题标签caption，（居中且在表格之上），caption标签必须是在table标签之上，且只能写在table标签的内部。
表格示例1——个人信息表：

 <table border="1" width="500" height="200" cellspacing="0" cellpadding="20" align="center"> 
   <caption>个人信息表</caption>
   <tr>
       <th>姓名</th>
       <th>年龄</th>
       <th>性别</th>
   </tr> 
    <tr>
       <td>张三</td>
       <td>18</td>
       <td>男</td>
   </tr>
    <tr>
       <td>张三丰</td>
       <td>98</td>
       <td>女</td>
   </tr>
    <tr>
       <td>张三疯子</td>
       <td>198</td>
       <td>不明</td>
   </tr>
   </table>
  

个人信息表

姓名	年龄	性别
张三	18	男
张三丰	98	女
张三疯子	198	不明

---

表格示例2——小说排行榜：

    <table border="1" cellspacing="0" width="500" height="200" align="center">
     <caption><h3>小说排行榜</h3></caption>
      <tr>
          <th>排名</th>
          <th>关键词</th>
          <th>趋势</th>
          <th>今日搜索</th>
          <th>最近七日</th>
          <th>相关链接</th>
      </tr>
      <tr>
          <td>1</td>
          <td>鬼吹灯</td>
          <td>down</td>
          <td>543</td>
          <td>12345</td>
          <td>
              <a href="#">贴吧</a>
              <a href="#">图片</a>
              <a href="#">百科</a>
          </td>
      </tr>
      <tr>
          <td>2</td>
          <td>盗墓笔记</td>
          <td>up</td>
          <td>453</td>
          <td>5432</td>
          <td>
              <a href="#">贴吧</a>
              <a href="#">图片</a>
              <a href="#">百科</a>
          </td>
      </tr>
      <tr>
          <td>3</td>
          <td>西游记</td>
          <td>down</td>
          <td>435</td>
          <td>4566</td>
          <td>
              <a href="#">贴吧</a>
              <a href="#">图片</a>
              <a href="#">百科</a>
          </td>
      </tr>
      <tr>
          <td>4</td>
          <td>东游记</td>
          <td>down</td>
          <td>354</td>
          <td>3314</td>
          <td>
              <a href="#">贴吧</a>
              <a href="#">图片</a>
              <a href="#">百科</a>
          </td>
      </tr>
      <tr>
          <td>5</td>
          <td>甄嬛传</td>
          <td>up</td>
          <td>345</td>
          <td>3214</td>
          <td>
              <a href="#">贴吧</a>
              <a href="#">图片</a>
              <a href="#">百科</a>
          </td>
      </tr>
      <tr>
          <td>6</td>
          <td>水浒传</td>
          <td>down</td>
          <td>123</td>
          <td>2341</td>
          <td>
              <a href="#">贴吧</a>
              <a href="#">图片</a>
              <a href="#">百科</a>
          </td>
      </tr>
      <tr>
          <td>7</td>
          <td>三国演义</td>
          <td>down</td>
          <td>98</td>
          <td>1234</td>
          <td>
              <a href="#">贴吧</a>
              <a href="#">图片</a>
              <a href="#">百科</a>
          </td>
      </tr>
  </table>

小说排行榜

排名	关键词	趋势	今日搜索	最近七日	相关链接
1	鬼吹灯	down	543	12345	贴吧 图片 百科
2	盗墓笔记	up	453	5432	贴吧 图片 百科
3	西游记	down	435	4566	贴吧 图片 百科
4	东游记	down	354	3314	贴吧 图片 百科
5	甄嬛传	up	345	3214	贴吧 图片 百科
6	水浒传	down	123	2341	贴吧 图片 百科
7	三国演义	down	98	1234	贴吧 图片 百科

---

合并单元格:
（1）跨行合并，跨列合并
（2）先上后下，先左后右，的原则找到目标单元格，合并方式，合并单元格数量
（3）删除多余的单元格

<table border="1" cellspacing="0" cellpadding="20" width="500" height="250" align="center">
       <caption><h3>个人简历</h3></caption>
        <tr>
            <td>刘德华</td>
            <td>男</td>
            <td>18</td>
            <td rowspan="2">照片</td>
        </tr>
        <tr>
            <td>身高：180</td>
            <td>汉族</td>
            <td>已婚</td>
<!--            <td>照片</td>-->
        </tr>
        <tr>
            <td>个人作品</td>
            <td colspan="3">个人作品</td>
            <!--<td>个人作品</td>
            <td>个人作品</td>-->
        </tr>
        <tr>
            <td>个人简历</td>
            <td colspan="3">个人简历</td>
            <!--<td>个人简历</td>
            <td>个人简历</td>-->
        </tr>
    </table>

个人简历

刘德华	男	18	照片
身高：180	汉族	已婚
个人作品	个人作品
个人简历	个人简历

---