CSDN插入表格

程序员爱德华

已于 2023-06-08 19:21:27 修改

阅读量1.6k

点赞数 5

分类专栏： CSDN 文章标签：经验分享

于 2022-05-19 11:31:14 首次发布

本文链接：https://blog.csdn.net/Edward1027/article/details/124859901

版权

CSDN 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

本文详细介绍了如何使用HTML表格进行更复杂的布局，包括合并行单元格（colspan）和合并列单元格（rowspan）的方法，并通过多个示例展示了如何实现多级标题和数据的对齐展示，适用于需要创建复杂表格结构的场景。

摘要由CSDN通过智能技术生成

文章目录

一、普通表格

点击表格，输入表头和内容
不想要水印

|表头1|表头2|表头3|表头4|
|--|--|--|--|
|第一行列1|第一行列2|第一行列3|第一行列4|
|第二行列1|第二行列2|第二行列3|第二行列4|

表头1	表头2	表头3	表头4
第一行列1	第一行列2	第一行列3	第一行列4
第二行列1	第二行列2	第二行列3	第二行列4

二、进阶表格（合并单元格）

上面的表格写法不支持合并单元格，如需要合并单元格，必须使用html语法书写表格。
tr代表一行，td代表一个小单元格

html代码：

<table>                //table:表格
	<tr>               //tr:   行
		<td></td>      //td:   单元格
	</tr>
</table>

效果：一表格中，有一行，一个单元格

内容

加粗：<b>；换行：<br>；
表头以<thead>开头，</thead>结尾；
单行文本以<tr>开头， </tr>结尾；
整个文本框以<tbody>开头，</tbody>结尾；
整张表以<table>开头，</table>结尾；

1.合并行单元格 colspan=“2”

<td colspan="2">合并行单元格</td>

2.合并列单元格 rowspan=“2”

<td rowspan="2">合并列单元格</td>

3.举例

举例1：

经济发展失调	①虚拟经济与实体经济发展失衡	②福利风险增加	③债务负担沉重
政治体制失灵	①西式选举往往难以选贤	②政党利益可能凌驾于国家利益之上	③“民主陷阱”阻碍国家治理	④传统精英政治走向衰落，大众政治与精英政治对抗日趋严重，民粹主义泛起，西方精英政治陷入困境
社会融合机制失效	①社会极端思潮抬头	②社会流动性退化	③社会矛盾激化，“群体性事件”增多

<table>              
	<tr>               
		<td><b>经济发展失调</b></td>
		 <td>①虚拟经济与实体经济发展失衡</td>
		 <td>②福利风险增加</td>
		 <td>③债务负担沉重</td>           
	</tr>
	<tr>
		<td><b>政治体制失灵</b></td>
		<td>①西式选举往往难以选贤</td>
		<td>②政党利益可能凌驾于国家利益之上</td>
		<td>③“民主陷阱”阻碍国家治理</td>
		<td>④传统精英政治走向衰落，大众政治与精英政治对抗日趋严重，民粹主义泛起，西方精英政治陷入困境</td>      
	</tr>
	<tr>
			<td><b>社会融合机制失效</b></td>
			<td>①社会极端思潮抬头</td>
			<td>②社会流动性退化</td>
			<td>③社会矛盾激化，“群体性事件”增多</td>
	</tr>
</table>

举例2：
效果：

进程	Max	Allocation	Need	Available
P1	4	2	4	1
P2		1	3
P3		0	1

html代码：

<table>                      //表格
	<tr>                     //第一行开始
		<td >进程</td>       //第一行第1个单元格
		<td >Max</td>       //第一行第2个单元格
		<td >Allocation</td>//第一行第3个单元格
		<td >Need</td>      //第一行第4个单元格
		<td >Available</td> //第一行第5个单元格
	</tr>                   //第一行结束
	<tr>                    //第二行开始
			<td>P1</td>
			<td rowspan="3">4</td>
			<td>2</td>
			<td>4</td>
			<td rowspan="3">1</td>
	</tr>                   //第二行结束
	<tr>                    //第三行开始
			<td>P2</td>
			<td>1</td>
			<td>3</td>
	</tr>                   //第三行结束
	<tr>                    //第四行开始
			<td>P3</td>
			<td>0</td>
			<td>1</td>
	</tr>                   //第四行结束
</table>                    //表格结束

举例3：

连接标志 Connect Flags
byte 8	User Name Flag (1) 用户名标志	1	1	0	0	1	1	1	0
	Password Flag (1) 密码标志
	Will Retain (0) Will 保留标志
	Will QoS (01) Will 服务质量

html代码如下：

<table>
	<tr>
		<td colspan="10">连接标志 Connect Flags</td>
	</tr>
  	<tr>
  		<td rowspan="7">byte 8</td>
  		<td >User Name Flag (1) 用户名标志</td>
  		<td rowspan="7">1</td>
  		<td rowspan="7">1</td>
  		<td rowspan="7">0</td>
  		<td rowspan="7">0</td>
  		<td rowspan="7">1</td>
  		<td rowspan="7">1</td>
  		<td rowspan="7">1</td>
  		<td rowspan="7">0</td>
  	</tr>
  	<tr> 
  		<td >Password Flag (1) 密码标志</td>
 	</tr>
 	<tr> 
 		<td >Will Retain (0) Will 保留标志</td>
 	</tr>
    <tr> 
  		<td >Will QoS (01) Will 服务质量</td>
 	</tr> 
</table>