合并行&合并列

摘要：<style type="text/css"> *{margin: 0px; padding: 0px;}   table {border: 1px solid #ccc; border-collapse: collapse;}  &nb

<style type="text/css">
*{margin: 0px; padding: 0px;}
  table {border: 1px solid #ccc; border-collapse: collapse;}
  tr td {height: 200px; width: 100px; border:1px solid #ccc; }
  tr th {height: 200px; width: 100px; border:1px solid #ccc; }
</style>

<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
  </tr>
  <tr>
    <td colspan="5">合并行</td>
  </tr>
  <tr>
    <td rowspan="2">合并列</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

<!-- table的高度不给，用td来撑开

table的宽度可通过td来撑，也可以直接设定好，让td来均分

通过td标签的colspan&rowspan用于『合并单元格』

th默认居中

td默认靠左

_注意_ margin: 0px;其中px单位不要忘记

tr td{}是tr中的td，有一层所属关系。tr td非非关联元素。即非tr{}, td{}。这是思维认识的一个漏洞||理解扭曲

同理tr th{}

table与tr td的融合需要一个border-collapse,否则出现双线情况 -->