本帖最后由 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> |