HTML表格

xiaoxiao2021-02-28  65

表格 表格的定义: <table border="1px" cellspacing="0"> -----------table表示定义表格, border属性表示设置表格的边框宽度为1px, cellspacing表示每个单元格与单元格之间的距离,0表示没有距离,如果不设置cellspacing属性则默认值为1。 <tr> ------------定义表格的一行 <td>第1行第1列</td> ---------定义一个单元格 <td>第1行第2列</td> <td>第1行第3列</td> </tr> <tr> <td>第2行第1列</td> <td>第2行第2列</td> <td>第2行第3列</td> </tr> </table> table的属性: border: 设置边框的宽度 cellspacing:单元格的间距,默认为1 align: 用来控制水平位置 left-左对齐(默认为left) center-居中 right-右对齐 align出现在table标签中:将整个表格居中(在表格的父标签中居中)align出现在tr标签中:将该行的所有单元格的文字居中align出现在td标签中:将该单元格的文字居中 valign: 用来控制垂直方向位置 top-向上对齐 middle-居中(默认middle) bottom-向下对齐 表格每列的宽度 表格每列的宽度取每列表格设置的最大值,一般在表格中的第一行表格中设置,即表格标签内第一个<tr>标签内的<td>内去设置,后面的所有<td>单元格的宽度自动跟随本列第一个<td>的宽度。 表格的合并: colspan : 跨列合并 赋值方式为数字,代表跨几列 rowspan : 跨行合并 赋值方式为数字,代表跨几行 表格合并示例 合并前代码: <table border="1px" cellspacing="0" width="500px"> <tr> <td>第1行第1列</td> <td>第1行第2列</td> <td>第1行第3列</td> </tr> <tr> <td>第2行第1列</td> <td>第2行第2列</td> <td>第2行第3列</td> </tr> <tr> <td>第3行第1列</td> <td>第3行第2列</td> <td>第3行第3列</td> </tr> </table> 现要求把以下四个单元格两两合并 合并之后的代码: <table border="1px" cellspacing="0" width="500px"> <tr align="center"> <td colspan="2">第1行第1列</td> -------要跨列合并(横排)的单元格的第一个td标签里添加 colspan属性,值为要合并的单元格个数。 <!--<td>第1行第2列</td>--> ----------删除被合并的原始的单元格 <td>第1行第3列</td> </tr> <tr align="center"> <td>第2行第1列</td> <td>第2行第2列</td> <td rowspan="2">第2行第3列</td> ---------要跨行合并(竖排)的单元格的第一个td标签里添加 rowspan属性,值为要合并的单元格个数。 </tr> <tr align="center"> <td>第3行第1列</td> <td>第3行第2列</td> <!--<td>第3行第3列</td>--> ----------删除被合并的原始单元格 </tr> </table> 合并之后的样子
转载请注明原文地址: https://www.6miu.com/read-2629279.html

最新回复(0)