html中的自定义表

我需要通过html创建一个自定义表。我的html技能不是最好的。虽然我尝试了很多东西，但我还是没有得到我想要的

在这里你可以看到我想怎样得到这张桌子

有什么想法吗

这是我的密码：

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
</style>
<table class="tg">
  <tr>
    <th class="tg-031e" colspan="3">Title</th>
  </tr>
  <tr>
    <td class="tg-031e">col 1</td>
    <td class="tg-031e">Col 2</td>
    <td class="tg-031e">Col 3</td>
  </tr>
  <tr>
    <td class="tg-031e">row 1</td>
    <td class="tg-031e">a</td>
    <td class="tg-031e">c</td>
  </tr>
  <tr>
    <td class="tg-031e">row 2</td>
    <td class="tg-031e">b</td>
    <td class="tg-031e"></td>
  </tr>
</table>

.tg{边框折叠：折叠；边框间距：0；}
.tg td{字体系列：Arial，无衬线；字体大小：14px；填充：10px 5px；边框样式：实心；边框宽度：1px；溢出：隐藏；分词：正常；}
.tg th{字体系列：Arial，无衬线；字体大小：14px；字体重量：正常；填充：10px 5px；边框样式：实心；边框宽度：1px；溢出：隐藏；分词：正常；}
标题
第1列
第2列
第3列
第1行
A.
C
第2排
B

---

请显示您尝试过的代码。发布您迄今为止尝试过的内容。提示可能重复：Bootstrap可能会让您的生活更轻松（）。您好，您提到的链接不是我想要的，我需要在两者之间留出一个空白

#t1 {
  width: 60%;
}
#t2 {
  width: 30%;
}
.tg  {
  border-collapse:collapse;
  border-spacing:0;   
  float: left;
  margin: 10px;
}
.tg td{
  font-family:Arial, sans-serif;
  font-size:14px;
  padding:10px 5px;
  border-style:solid;
  border-width:1px;
  overflow:hidden;
  word-break:normal;
}
.tg th{
  font-family:Arial, sans-serif;
  font-size:14px;
  font-weight:normal;
  padding:10px 5px;
  border-style:solid;
  border-width:1px;
  overflow:hidden;
  word-break:normal;
}