HTML/CSS中的选项卡边框（初学者）

我是初学者，正在自学如何掌握这种编程语言html和css

我有3列在我的身体，我想要一个设计像一个标签边框，而段落内框边框。边框顶部的颜色为蓝色（我可以将选项卡名称放在哪里）

下图显示了我想要实现的目标：

如果在文本周围使用

容器，可以执行以下操作：

<div>
    <!-- the "tab" -->
    <h3 style="color:blue;">ipsum</h3>
    <!-- the paragraph -->
    <p style="border: 1px solid black;">
        paragraph
    </p>
</div>

乱数假文

段落

编辑：属于注释，这里是新的解决方案：

记住将CSS样式放在一个单独的文件中，这只是为了演示

对于HTML和CSS入门，我推荐

希望能有帮助。

---

你也可以给每个

-标记一个自己的类，然后在那里设置背景颜色

<style>
.ipsum {

     color: #1062DD;
}

.paragraph {

    background-color: #333333;
    border: 1px solid #FFFFFF;
    color: red;
    // height: 200px;
}
</style>
<table><td>
<tr class="ipsum">ipsum</tr>
<tr class="paragraph">paragraph</tr>
</td></table>

.同侧{
颜色：#1062DD；
}
.段{
背景色：#333333；
边框：1px实心#FFFFFF；
颜色：红色；
//高度：200px；
}
乱数假文
段落

专栏1
专栏2
第3栏

---

简化代码。

您现在有代码示例吗？我没有示例代码，因为我不知道如何从html或css开始：(

<table style="border:1px solid blue;padding:10px;">
<tr>
<td> Column1 </td>
<td> Column2 </td>
<td> Column3 </td>
</tr>
</table>