黑马程序员技术交流社区
标题: 【上海校区】表格的跨行跨列 [打印本页]
作者: 小影姐姐 时间: 2018-3-23 17:39
标题: 【上海校区】表格的跨行跨列
本帖最后由 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>
作者: hmhm123 时间: 2018-3-23 20:12
亲,帖子里的代码内容,适合用插入代码的方式来插入到帖子正文中,这样排版会更美观。
插入方式在编辑模式的一对小尖括号中。图例为:<>
文章末尾我用插入代码的方式给您排了一下版,可以参考一下效果。
作者: 小影姐姐 时间: 2018-3-27 09:21
get到了新技能,
作者: wuqiong 时间: 2018-4-10 09:50
作者: 歪果仁 时间: 2018-4-11 15:21
厉害厉害
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |