HTML表格跨度
colspan - 列跨度
要将单元格跨多个列,请使用 colspan
属性。
分配给 colspan
的值必须是整数。
您还必须删除展开后的单元格将覆盖的单元格元素。
<!DOCTYPE HTML> <html> <head> </head> <body> <table border="1"> <thead> <tr> <th>Rank</th> <th>Name</th> <th>Color</th> <th colspan="2">Size & Votes</th> </tr> </thead> <tbody> <tr> <th>2nd Favorite:</th> <td>HTML</td> <td>HTML</td> <td>Oracle</td> <td>MySQL</td> </tr> <tr> <th>3rd Favorite:</th> <td>XML</td> <td colspan="2" rowspan="2">This is a test.</td> <td>203</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </tbody> <tfoot> <tr> <th colspan="5">© 2011 www.ancii.com Enterprises</th> </tr> </tfoot> </table> </body> </html>点击查看实例
rowspan - 行跨度
要将单元格跨多行,您可以使用 rowspan
属性。您分配给此属性的值是要跨越的行数。
分配给 rowspan
的值必须为整数。
如果希望中间列中的一个单元格跨越所有三行,您将 rowspan
属性应用于单元格2。
您还必须删除展开后的单元格将覆盖的单元格元素。
以下代码将单元格扩展为覆盖多行。
<!DOCTYPE HTML> <html> <head> <style> td { border: thin solid black; padding: 5px; font-size: x-large } </style> </head> <body> <table border="1"> <tr> <td>1</td> <td rowspan="3">2</td> <td>3</td> </tr> <tr> <td>4</td> <td>6</td> </tr> <tr> <td>7</td> <td>9</td> </tr> </table> </body> </html>点击查看实例