HTML表格布局，包含用于预期结果的标记的图像

下面是HTML表格设计的图像。请帮我把这个大纲转换成HTML标记

注意：很遗憾，这必须包括一个表布局

这是我的标记：

表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
文本对齐：居中；
字号：100；
}
1.
2.
3.
4.
5.
6.
7.
8.
9

显示：网格

使用

display:grid

，您可以使用父元素设置

width

和

height

，然后以分数形式定义

网格模板列

和

网格模板行

，并使用父css中的

网格模板区域

规则布局子元素

然后在子元素中，将其

网格区域

定义为类选择器。这也是动态的，因为它使用您选择的度量单位填充父对象的宽度和高度

在我的示例中，我使用

1fr

。因此，在柱的情况下，我们有5个测量值，每个测量值占一个分数=>1fr，因为在宽度中90vw，这意味着5个部分将90vw平均分割，基本上是20%，20%，20%，20%，20%的90vw为我们提供了总宽度，每个孩子将20%父母的宽度90vw。这对行使用相同的原理

因此，使用这种方法，我们可以编写CSS来显示5个分数宽（列）和5个分数高（行），然后按照页面上显示的相同模式设置

网格模板区域

  grid-template-areas: 
    "one one one one one" 
    "two two two three three" 
    "four five five three three" 
    "four eight nine three three" 
    "four eight nine six seven";

在该模式中设置显示网格的子项时，我们必须再次使用子项选择器定义子项选择器
网格区域
规则

.one {
  grid-area: one;
}


.cont{
显示：网格；
宽度：90vw；
高度：90vh；
网格模板柱：1fr 1fr 1fr 1fr 1fr；
网格模板行：1fr 1fr 1fr 1fr 1fr；
间隙：0px 0px；
网格模板区域：
“一个一个”
“二二三三”
“四五五三三”
“四八九三三”
“四八九六七”；
}
.一{
网格面积：1；
}
.二{
网格面积：2个；
}
.三{
网格面积：3个；
}
.4{
网格面积：4个；
}
.5{
网格面积：5个；
}
.6{
网格面积：6个；
}
.7{
网格面积：7个；
}
.8{
网格面积：8个；
}
.9{
网格面积：9个；
}
.分区{
显示器：flex；
证明内容：中心；
对齐项目：居中；
边框：1px纯黑；
}
#主要{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
这是下面的代码。。。然后，要移除其周围的额外边界，请添加以下
边框折叠：折叠到您的表格样式：


表，th，td{
边框：1px纯黑；
文本对齐：居中；
字号：100；
}
1.
2.
3.
4.
5.
8.
9
6.
7.
您尝试了哪些内容，哪些不起作用？这是我的标记。我不能像这张图片那样把整个事情都扯到一起，请编辑问题，包括相关代码。HTML/CSS/JS代码甚至可以（也应该）制作成可运行的代码片段来演示。描述您试图实现的特定部分以及您的尝试如何无效。另外，对于这个“表”结构，您可以考虑嵌套表。或者，因为它实际上不是一个“表”，你可能会考虑样式DIV元素。你能帮我用表格把整个东西拿出来吗？请附上问题中的图片。避免像你使用的那样的外部链接这是一个很好的帮助者。我对grid和flex非常了解。但这一次我不得不用桌子来做（让我讨厌）。这实际上是学校作业D但是我不能用这个表来解瓷砖。@NorthernLights我已经编辑了答案，为您添加了一个表布局。这太神奇了。这是我在StackOverflow的第一个问题。你们真是救世主。我想从这里学到越来越多有用的东西。戴尔先生，请接受我的谢意。@NorthernLights Stackoverflow是一个很棒的网站，我建议您了解在这里发帖和提问的诀窍。确保您总是在问题中添加可复制的代码示例。非常感谢你。我一定会的。非常感谢。我从你的片段中学到了一些东西。这是一个伟大的帮助者。请接受我的谢意。希望在将来，我能像你们今天这样帮助别人。