colspan和rowspan
colspan和rowspan这两个属性用于创建特殊的表格。
colspan
colspan用来指定单元格横向跨越的列数:colspan就是合并列的,colspan=2的话就是合并两列。
rowspan
rowspan用来指定单元格纵向跨越的行数:rowspan就是用来合并行的,比如rowspan=2就是合并两行。
- rowspan通常使用在td和th标签中
- row:行,span:跨度,跨距,范围
- col:列,span:跨度,跨距,范围
代码案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="1" width="300"> <caption>标准</caption> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> <br><br> <table border="10"> <caption>合并</caption> <tr> <td>小组成员</td> <td colspan="2" align="center">性别</td> <td>年龄</td> </tr> <tr> <td align="center">杨小菜</td> <td>男√</td> <td>女 </td> <td>20</td> </tr> <tr> <td align="center">杨大菜</td> <td>男 </td> <td>女√</td> <td>20</td> </tr> <tr> <td align="center">张大仙</td> <td>男 </td> <td>女√</td> <td>20</td> </tr> <table border="1" width="300"> <caption>合并第一行的三列</caption> <tr> <td colspan=3>合并第一行的三列</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </br> <table border="1" width="300"> <caption>合并第一行的两列</caption> <tr> <td rowspan="2">合并第一列的两行</td> <td>2</td> <td>3</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table> </table> </body> </html>