表格html属性:
colsapn="所合并的单元格数量" 合并列
rowspan="所合并的单元格数量" 合并行
注:无论colsapn还是rowspan 操作的都是td
怎么判断合并行还是列:
只要跨行的都是合并行
没有跨行的都是合并列
和哪个td合并,就删除哪个td
如果既合并行又合并列,尽量先合并列,再合并行
<body> <table width="500" height="300" border="1" bordercolor="red" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"></td> <!-- <td></td> <td></td> --> </tr> <tr> <td></td> <td rowspan="2"></td> <td></td> </tr> <tr> <td></td> <!-- <td></td> --> <td></td> </tr> </table> <hr> <table width="500" height="300" border="1" bordercolor="red" cellspacing="0" cellpadding="0"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td colspan="2" rowspan="2"></td> </tr> <tr> <td></td> </tr> </table> </body>
<body> <!-- <table width="500" height="300" border="1" bordercolor="red" cellspacing="0" cellpadding="0"> <tr> <td width="50"></td> <td></td> <td width="50"></td> <td></td> </tr> <tr> <td></td> <td colspan="3"></td> </tr> <tr> <td></td> <td colspan="3"></td> </tr> <tr> <td></td> <td colspan="3"></td> </tr> <tr> <td></td> <td colspan="3"></td> </tr> </table> --> <table width="500" height="300" border="1" bordercolor="red" cellspacing="0" cellpadding="0"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td rowspan="4"></td> <td></td> <td rowspan="4" colspan="2"></td> <!-- <td rowspan="4"></td> --> <td rowspan="4"></td> <td rowspan="4"></td> <td rowspan="4"></td> <td rowspan="4"></td> </tr> <tr> <!-- <td></td> --> <td></td> <!-- <td></td> <td></td> --> <!-- <td></td> --> <!-- <td></td> <td></td> <td></td> --> </tr> <tr> <!-- <td></td> --> <td></td> <!-- <td></td> <td></td> --> <!-- <td></td> --> <!-- <td></td> <td></td> <td></td> --> </tr> <tr> <!-- <td></td> --> <td></td> <!-- <td></td> <td></td> --> <!-- <td></td> --> <!-- <td></td> <td></td> <td></td> --> </tr> <tr> <td colspan="2"></td> <!-- <td></td> --> <td colspan="5"></td> <!-- <td></td> <td></td> <td></td> <td></td> --> <td></td> </tr> </table> </body>
表格内部标签:
th标签 ——> 每一列的标题
默认的样式:文本加粗、左右居中
caption标签 ——> 表格标题
<body> <table width="500" height="300" border="1" bordercolor="orange" cellspacing="0" cellpadding="0"> <caption>表格标题</caption> <tr> <th>代号</th> <th>刊名</th> <th>刊期</th> <th>价格</th> <th>数量</th> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body>
数据行数据列分组:
数据行分组
<thead></thead> 表头
<tbody></tbody> 表体
<tfoot></tfoot> 表尾
注:在一个表格内部,只能有一个thead\tfoot 但是可以出现多个tbody
数据列分组(了解)
<colgroup span="把几列分成一组"></colgroup>
<body> <table width="500" height="300" border="1" bordercolor="red" cellspacing="0" cellpadding="0"> <colgroup span="2" bgcolor="yellow"></colgroup> <colgroup span="2" bgcolor="pink"></colgroup> <thead> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> <tfoot height="100"> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </tfoot> </table> </body>