怎么在html里把一行中的两列合并

怎么在html里把一行中的两列合并,第1张

colspan等于几就是合并几个单元格这是合并列

colspan="2"colspan等于几就是合并几个单元格这是合并列rowspan="2"这个是合并行它们是写在<td>标签里的。

合并单元格 行合并就设置td的colspan属性为要合并的单元格个数 列合并就设置td的rowspan。

此时会d出一个“拆分单元格”对话框,在其中设置单元格拆分的行列数,例如,现在选择将其拆分成3列1行,然后单击“确定”按钮。

colspan属性可以实现水平单元格合并。

例如:

<table border="1">

<tr>

 <th>Month</th>

 <th>Savings</th>

</tr>

<tr>

 <td colspan="2">January</td>

</tr>

<tr>

 <td colspan="2">February</td>

</tr>

</table>

扩展资料:

注意事项

一、语法

<td colspan="value">

二、HTML 表格有两类单元格:

1、表头单元

包含头部信息(由 th 元素创建)

2、标准单元

包含数据(由 td 元素创建)

td 元素中的文本一般显示为正常字体且左对齐。

三、colspan和rowspan这两个属性用于创建特殊的表格。

1、colspan用来指定单元格横向跨越的列数

colspan就是合并列的,colspan=2的话就是合并两列。

2、rowspan用来指定单元格纵向跨越的行数

rowspan就是用来合并行的。

比如:rowspan=2就是合并两行,rowspan通常使用在td和th标签中。

row:行,span:跨度,跨距,范围

col:列,span:跨度,跨距,范围

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>

演示结果

扩展资料:

rowspan规定表头单元格应该横跨的行数。注意: rowspan="0" 告知浏览器使单元格横跨到表格组件中的最后一个行(thead、tbody 或 tfoot)。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7213571.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存