html和css怎么一起操作,HTML – DIV和CSS如何与Rowspan和Colspan一起使用？

我已经研究了几天关于如何使用div来创建表格单元格和合并单元格,实际上我可以用TABLE做到这一点,但不能在DIV中做同样的屏幕结果,希望有人可以帮我把更好的方法或修复代码.

实际上,我想在全屏模式下使所有单元格处于相同的宽度和高度(合并区域除外),但问题是中心的合并单元格.我尝试了很多方法,无法让它像TABLE风格一样工作.

这是我想要的结果,但是用表格制作：

html, body{

width:100%;

height:100%;

margin:0;

padding:0;

}

table {

border-width: 1px 1px 0px 0px;

border-spacing:0;

margin:0;

padding:0;

width: 100%;

height: 100%;

}

td {

border-width: 0px 0px 1px 1px;

}

table, td {

border-style: solid;

border-color: purple;

}

.w25 {

width:25%;

height:25%;

}

.w50 {

width:50%;

height:50%;

}

.w100 {

width:100%;

height:100%;

}

D	E	F	G
C	MERGED AREA		H
B			I
A	L	K	J

这是我目前为DIV版本制作的代码,但没有成功平衡全屏的所有宽度和高度.

html, body{

width:100%;

height:100%;

margin:0;

padding:0;

}

.table {

border-width: 1px 1px 0px 0px;

}

.intable {

border-width: 0px 1px 0px 0px;

}

.table, .intable {

display:table;

width:100%;

height:100%;

}

.cell {

display:table-cell;

}

.row {

display:table-row;

}

.cell {

border-width: 0px 0px 1px 1px;

width:25%;

}

.table, .intable, .cell {

border-style: solid;

border-color: purple;

}

D

E

F

G

C

B

Merged Area

H

I

A

L

K

J

希望有人可以修复代码！