1表格中对其、换行处理

1.1 一般我们都会这样用表格如下:

|排名|姓名|
|--|--|
|第一名|隔壁老王|
|第二名|隔壁小王、隔壁小小王|

实现效果图:

排名姓名
第一名隔壁老王
第二名隔壁小王、隔壁小小王

1.2 当然这里也可以通过设置|:--|左对齐,|--:|右对齐

比如下面的左对齐:

|排名|姓名|
|:--|:--|
|第一名|隔壁老王|
|第二名|隔壁小王、隔壁小小王|

效果:

排名姓名
第一名隔壁老王
第二名隔壁小王、隔壁小小王

1.3 实现表格内容换行

Markdown本身不提供单元格合并语法,但是,Markdown是兼容HTML的,因此,我们可以通过HTML的方式实现单元格合并。

|排名|姓名|
|:--|:--|
|第一名|隔壁老王|
|第二名|隔壁小王 <br> 隔壁小小王|

效果:

排名姓名
第一名隔壁老王
第二名隔壁小王
隔壁小小王

2 合并表格

2.1 合并表格行

这里还是要与HTML网页结合起来,来达到效果。
这里用到了HTML的一个标签,
colspan:规定单元格可纵深的列数
rowspan:规定单元格可横跨的行数

<table>
	<tr>
		<td>小王</td>
		<td>小小王</td>
	<tr>
	<tr>
		<td colspan="2">隔壁老王</td>
	<tr>
</table>

效果图:

小王小小王
隔壁老王

2.2 合并表格列

<table>
	<tr>
		<td>车神</td>
		<td>名车</td>
	</tr>
	<tr>
		<td rowspan="2">隔壁老王</td>
		<td>自行车</td>
	</tr>
	<tr>
		<td>电瓶车</td>
	</tr>
</table>

效果图:

车神名车
隔壁老王自行车
电瓶车

2.3 综合实例

<table>
  	<tr>
		<td>小王</td>
		<td>小小王</td>
	<tr>
	<tr>
		<td colspan="2">隔壁老王</td>
	<tr>
	<tr>
		<td>车神</td>
		<td>名车</td>
	</tr>
	<tr>
		<td rowspan="2">隔壁老王</td>
		<td>自行车</td>
	</tr>
	<tr>
		<td>电瓶车</td>
	</tr>
</table>

效果图:

小王小小王
隔壁老王
车神名车
隔壁老王自行车
电瓶车
Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐