本帖最后由 hmhm123 于 2018-3-23 20:09 编辑
[size=0.9][backcolor=var(--bg-color)]目录
[url=]表格的跨行跨列[/url][url=]普通表格、跨行跨列的表格[/url][url=]普通表格[/url][url=]跨行的表格[/url][url=]跨列的表格[/url][url=]高效完成跨行跨列[/url][url=]绘制完整表格[/url][url=]找出最左上角的单元格，如下图标注数字的位置[/url][url=]添加跨行跨列属性[/url][url=]把“被侵占”的单元格删掉，删除顺序：从右向左，从上至下，否则很容易出错！[/url]
表格的跨行跨列 在做网页时，经常会使用到表格，而表格可能存在跨行、跨列，甚至是跨行和跨列同时存在的情况，接下来就给大家讲解如何高效的制作带跨行、跨列的表格，先来看看各种表格的样子 普通表格、跨行跨列的表格普通表格代码： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>普通表格</title>
</head>
<body>
<table border="1px" width="300px" cellspacing="0" cellpadding="0">
<tr>
<td align="left">姓名</td>
<td align="center">性别</td>
<td align="right">年龄</td>
</tr>
<tr>
<td valign="top">张2</td>
<td valign="middle">男</td>
<td valign="bottom">20</td>
</tr>
</table>
</body>
</html>跨行的表格代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>普通表格</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<!--rowspan="3"跨3行 -->
<td rowspan="3" bgcolor="red">值班</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
</tr>
<tr>
<td>张3</td>
<td>里司</td>
<td>望物</td>
</tr>
<tr>
<td>张2</td>
<td>里司2</td>
<td>望物3</td>
</tr>
</table>
</body>
</html>跨列的表格代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>普通表格</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr bgcolor="red">
<td colspan=3>值班人员</td>
</tr>
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期3</td>
</tr>
<tr>
<td>张三</td>
<td>里司</td>
<td>望物</td>
</tr>
</table>
</body>
</html>高效完成跨行跨列绘制完整表格一个5行5列的表格，下图所示： 代码：
<table border="1" cellpadding="5" cellspacing="0" width="500" height="200">
<tr>
<td></td>
<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>
<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>找出最左上角的单元格，如下图标注数字的位置添加跨行跨列属性 观察这个单元格“侵占”的是行还是列，算上自己总共是几个？(跨行数用r表示，跨列数用c表示)： a) 如果是行：在这个单元格上添加 rowspan="r" b) 如果是列：在这个单元格上添加 colspan="c" c) 如果既有行又有列：在这个单元格上添加rowspan="r" colspan="c" 代码：
<table border="1" cellpadding="5" cellspacing="0" width="500" height="200">
<tr>
<td></td>
<td></td>
<td colspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="4"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan="2" rolspan="2"></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>把“被侵占”的单元格删掉，删除顺序：从右向左，从上至下，否则很容易出错！最终代码： [HTML] 纯文本查看 复制代码
<table border="1" cellpadding="5" cellspacing="0" width="500" height="200">
<tr>
<td></td>
<td></td>
<td colspan="3"></td>
</tr>
<tr>
<td rowspan="4"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td rowspan="2" colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table> | 
收藏
淘帖
踩
