Html绘制连接圆节点的水平线和垂直线

我希望在我的网页中绘制以下内容：

其中三个按钮为提交按钮

我尽力做到了，但在画垂直线时遇到了问题。 这是我的密码：

th，
运输署{
填充：10px；
}
表格中心{
左边距：自动；
右边距：自动；
边界塌陷：分离；
边界间距：50px 0；
}
跨度{
边框底部：2倍纯色灰色；
右边框：2倍纯色灰色；
填充：2px；
显示：内联块；
宽度：100%；
}
.按钮{
宽度：100%；
填充：10px；
字体：粗体；
字体大小：20px；
边界：无；
}
.蓝色按钮{
背景色：淡天蓝；
}
.按钮红色{
背景颜色：橙色；
}
.黄色按钮{
背景颜色：黄色；
}
.盒装{
宽度：600px；
边框：3倍纯绿；
填充物：5px；
保证金：5px；
左边距：自动；
右边距：自动；
}
.圆圈{
宽度：40px；
高度：40px；
线高：40px；
边界半径：50%；
边界：无；
字体大小：30px；
字体：粗体；
文本对齐：居中；
显示：内联块；
;
}

哈希
{{form.hidden_tag（）}}


架桥
{{form.create（class=“button\u blue”）}
3.
2.
5.
{{form.load（class=“button\u red”）}
4.
{{form.solve（class=“button\u yellow”）}

您不应该使用表来进行设计，但如果这是您想要的，那么我将提出一个解决方案

不要使用内联样式。将它们重构为类，使HTML可读

在所有TDs上设置

位置：相对

将每个元素放置在其自己的TD中

将圆形按钮设置为绝对按钮，将其放置在右下角的顶部

使用

colspan

将元素相对放置

使用

border

绘制线条

/**取消注释以显示表的整个结构**/
/*td{
边框：2倍实心rgba（0,0,0,0.3）！重要；
}*/
身体{
字体系列：Helvetica；
}
h1{
颜色：淡蓝色；
字号：4em；
文字装饰：下划线；
文字装饰颜色：红色；
文字装饰厚度：1px；
保证金：2rem自动1rem；
}
桌子{
边界塌陷：塌陷；
左边距：自动；
右边距：1rem；
}
td.副标题{
颜色：淡蓝色；
字号：3em；
填充：1rem；
}
运输署{
位置：相对位置；
文本对齐：居中；
边框：4px非黑色；
}
右行{
右边框样式：实心；
}
td.底线{
边框底部样式：实心；
}
双冲程{
边框宽度：4px；
边框样式：实心；
}
钮扣{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
按钮，大的{
保证金：1rem；
填充：1rem2rem；
字体大小：1.3rem；
宽度：钙（100%-2rem）；
框大小：边框框；
}
按钮圈{
位置：绝对位置；
右：0px；
底部：0px；
转换：翻译（50%，50%）；
宽度：40px；
高度：40px；
线高：40px；
边界半径：50%；
边界：无；
字号：1.1rem；
字体大小：粗体；
}
.蓝色.大{
背景色：淡天蓝；
}
瑞德先生{
背景颜色：橙色；
}
黄先生{
背景颜色：黄色；
}
.浅绿色.圆形{
背景颜色：浅绿色；
}
.蓝色.圆形{
背景颜色：蓝色；
颜色：黄色；
}

哈希
架桥
拼图
3.
2.
5.
上传外部
4.
内部运行

您不应该使用表来进行设计，但如果这是您想要的，那么我将提出一个解决方案

不要使用内联样式。将它们重构为类，使HTML可读

在所有TDs上设置

位置：相对

将每个元素放置在其自己的TD中

将圆形按钮设置为绝对按钮，将其放置在右下角的顶部

使用

colspan

将元素相对放置

使用

border

绘制线条

/**取消注释以显示表的整个结构**/
/*td{
边框：2倍实心rgba（0,0,0,0.3）！重要；
}*/
身体{
字体系列：Helvetica；
}
h1{
颜色：淡蓝色；
字号：4em；
文字装饰：下划线；
文字装饰颜色：红色；
文字装饰厚度：1px；
保证金：2rem自动1rem；
}
桌子{
边界塌陷：塌陷；
左边距：自动；
右边距：1rem；
}
td.副标题{
颜色：淡蓝色；
字号：3em；
填充：1rem；
}
运输署{
位置：相对位置；
文本对齐：居中；
边框：4px非黑色；
}
右行{
右边框样式：实心；
}
td.底线{
边框底部样式：实心；
}
双冲程{
边框宽度：4px；
边框样式：实心；
}
钮扣{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
按钮，大的{
保证金：1rem；
填充：1rem2rem；
字体大小：1.3rem；
宽度：钙（100%-2rem）；
框大小：边框框；
}
按钮圈{
位置：绝对位置；
右：0px；
底部：0px；
转换：翻译（50%，50%）；
宽度：40px；
高度：40px；
线高：40px；
边界半径：50%；
边界：无；
字号：1.1rem；
字体大小：粗体；
}
.蓝色.大{
背景色：淡天蓝；
}
瑞德先生{
背景颜色：橙色；
}
黄先生{
背景色：