摘要:<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,否则出现双线情况 -->