html表格的使用价值:
html表格的掌握对于很多页面的排版都非常重要,尤其做数据的排版用得非常多,因为比较简便,数据的加载速度也非常快。
html网页表格通常也用于各种表单数据提交类型的页面,可以实现更好的页面展示效果。
本文最终效果说明:
说明:其中数字1、3、4单元格实现合并两行。 数字11实现合并两列。
这个表格练习,充分考量了一个开发人员对表格类型标签的掌握程度,可在此基础上实现更为复杂的表格。
我们对于表格中行合并与列合并的操作都是用在td或者th这样的列单元格标签上的。
当前一格有行合并效果是,后一格默认单元格占据一行。
界面效果:
源代码分享:
<html> <head> <title>网页表格练习</title> <style> table{ border:1px solid black;/*表格边线*/ border-collapse:collapse; /*折叠*/ } table tr td{ border:1px solid black; padding:0 10px; /*单元格上下空开10px*/ text-align:center; /*文字居中*/ } </style> </head> <body> <table> <tr> <td rowspan="2">1</td> <td>2</td> <td rowspan="2">3</td> </tr> <tr> <td>10</td> </tr> <tr> <td rowspan="2">4</td> <td>5</td> <td>6</td> </tr> <tr> <td>8</td> <td>9</td> </tr> <tr> <td>7</td> <td colspan="2">11</td> </tr> </table> </body> </html>