合并列 colspan="k"
简单的html表格合并单元格的方法,希望能够帮助大家,另外小编谢谢大家一如既往的支持,欢迎大家一起和群里的小伙伴一起学习,交流,群里面每天都有分享初学者的笔记资料,视频。点击进入1045267283
html中,colspan属性是合并列,rowspan属性是合并行,合并行的时候,比如rowspan="2",它的下一行tr会少一列;合并列的时候 colspan="2",此行的列会少一列。
代码演示:
<table border="1"style={{margin:200}}>
<tbody>
<tr>
<th colspan="2">我是占位符</th>
<th colspan="2">我是占位符</th>
</tr>
<tr>
<th rowspan="2">我是占位符</th>
<th>我是占位符</th>
<th>我是占位符</th>
<th>我是占位符</th>
</tr>
<tr>
<th>我是占位符</th>
<th>我是占位符</th>
<th>我是占位符</th>
</tr>
</tbody>
</table>相关内容链接,希望能够帮助大家!
web前端学习:html基本语法与语义写法规则详解zhuanlan.zhihu.comweb前端学习:一个前端基础需要掌握的 28 个 JavaScript 技巧(第一章)zhuanlan.zhihu.com
青年:老大,最近在表格中合并单元格,总是不明就里,好像是合并对了,有时也是蒙的,您能不能就此指条明路?
禅师:这个问题很简单,合并单元格分为跨行合并和跨列合并,这是<td> 标签的rowspan和colspan属性问题,已知3x3表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3x3表格</title> <style type="text/css"> td {text-align:center;vertical-align:middle;} </style> </head> <body> <table align="center" border="2" bordercolor="black" width="566" cellspacing="0"> <tr> <td>0</td> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>6</td> <td>7</td> <td>8</td> </tr> </table> </body> </html>
禅师:首先说说跨行合并rowspan,由于我们书写表格的习惯是<tr>标签包裹<td>便签,因此书写跨行合并是符合我们的思维习惯,一个<tr>里合并n个单元格,就删去n-1个单元格,比如,rowspan=2,那么3x3的表格里合并行,删掉一个<td>就好了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跨行合并</title> <style type="text/css"> td {text-align:center;vertical-align:middle;} </style> </head> <body> <table align="center" border="2" bordercolor="black" width="566" cellspacing="0"> <tr> <td colspan="2">0</td> <td>1</td> </tr> <tr> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> </tr> </table> </body> </html>
禅师:接下来说说跨列合并colspan,跨列和跨行就不同了,跨列是对不同<tr>便签的影响,跨n列,就对以下的n-1个<tr>便签中的<td>标签进行删除,比如,colspan=2,那么3x3的表格里合并列,删除以下1列的<td>标签即可
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跨列合并</title> <style type="text/css"> td {text-align:center;vertical-align:middle;} </style> </head> <body> <table align="center" border="2" bordercolor="black" width="566" cellspacing="0"> <tr> <td rowspan = "2">0</td> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> </tr> </table> </body> </html>
青年:这么一说我就明白多了
禅师:我们听说过很多道理,却依然过不好这一生。纸上得来终觉浅,绝知此事要躬行。我给你布置一个任务吧,在3x3表格里实现跨行跨列合并。
青年:懂了,趁热打铁
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> td {text-align:center;vertical-align:middle;} </style> </head> <body> <table align="center" border="2" bordercolor="black" width="566" cellspacing="0"> <tr> <td>0</td> <td>1</td> <td>2</td> </tr> <tr> <td rowspan = "2" colspan = "2">3</td> <td>5</td> </tr> <tr> <td>8</td> </tr> </table> </body> </html>
禅师:不错,合并行列不同于单行合并或者单列合并,而是针对每一列进行行合并,也就是先按列的合并规则,再按行的合并规则,最后再对列规则作用的行删除一个<td>标签
青年:虽然你总结出了公式也画了图,我还是不想这么麻烦,我就想知道,下次再次合并单元格的时候,能不能一秒钟搞定。
禅师:年轻人,你这样就有点不讲武德了,这都手把手教会你了,还要为难一个老人家一秒钟搞定,我一秒钟手都还没伸出来呢,就是天王老子来了也不可能一秒钟搞定。
青年:不管付出多少代价花多少钱,我都要搞一个一秒钟解决问题专题
禅师:鲁迅说,花半秒钟就看透事物本质的人,和花一辈子都看不清事物本质的人,注定是截然不同的命运。说来奇怪,一提钱,我就突然不困了,我认为这活我可以接。
青年:大师不是伸个手都困难吗?
禅师:你的困难就是我的困难,我的困难就是没有困难,欢迎微信支付宝比特币支付,别让本猿太困难。
总结:
1.跨行合并(rowspan),合并n个删掉本行n-1个<td>
2.跨列合并(colspan),合并n个删掉n-1列个<td>
3.跨行列合并,先按列规则,再按行规则,再对列规则作用的列进行行规则合并
效果图:
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#all {
width: 1000px;
height: 100px;
}.biaoge {
width: 103px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div id="all"><div class="biaoge">
<table border="1" cellspacing="0" width="100px" height="100px">
<tr>
<td rowspan="2" bgcolor="blue">11</td>
<td>12</td>
<td>13</td>
</tr>
<tr><td>22</td>
<td>23</td>
</tr>
</table>
</div>
<div class="biaoge">
<table border="1" cellspacing="0" width="100px" height="100px">
<tr>
<td colspan="3" bgcolor="blue">11</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
</table>
</div>
<div class="biaoge">
<table border="1" cellspacing="0" width="100px" height="100px">
<tr>
<td rowspan="2" bgcolor="blue">1</td>
<td>2</td>
<td colspan="2" bgcolor="blue">3</td></tr>
<tr><td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</div>
<div class="biaoge">
<table border="1" cellspacing="0" width="100px" height="100px">
<tr>
<td>A</td>
<td rowspan="2">B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">E</td>
<td>D</td>
</tr>
<tr>
<td colspan="2">F</td>
</tr>
</table>
</div>
</div>
</body>
</html>转载于:https://www.cnblogs.com/tendo/p/6861727.html