Html 如何设计a“；类Postgreql”；网站的表格？

我是一名开发人员，这是我关于平面设计的第一个问题

对于一个网站，我想用postgresql（或mysql或其他）的方式设计一个表：

我已经为此启动了一个代码笔

我们需要做三件事：

1-添加管道（“|”）：我发现了用于此的：：after

2-添加破折号（'-'）：我不想使用虚线边框，因为我希望能够使用其他字符（例如，总数为'='））

3-在交叉路口加上加号（“+”）

等等

请参见此处的解决方案：

守则：

<table class="brutal">
  <thead class="brutal data">
    <td>name</td>
    <td>height</td>
    <td class="last">first_man</rd>
  </thead>
  <tr class="line">
    <td>-----------</td>
    <td>-----------</td>
    <td class="last">--------------</td>
  </tr>
  <tr class="data">
    <td>mont blanc</td>
    <td>4810</td>
    <td class="last">Balmat</rd>
  </tr>
  <tr class="data">
    <td>everest</td>
    <td>8848</td>
    <td class="last">hillary</rd>
  </tr>
</table>

---

你能评论一下CSS/HTML代码吗？（我不知道最佳实践，也许有一些耐火材料/样式需要改进？

您应该从评估可用的表格/网格组件/库开始，并确定对您的项目最重要的内容（单元格编辑、分页、脱机/联机数据源、搜索、筛选、自动筛选、自动/手动摘要行、子网格、树网格等）。我只需要一个网页设计建议：html或css中的“-”和“+”？如果在css中，如何编写？

<table class="brutal">
  <thead class="brutal data">
    <td>name</td>
    <td>height</td>
    <td class="last">first_man</rd>
  </thead>
  <tr class="line">
    <td>-----------</td>
    <td>-----------</td>
    <td class="last">--------------</td>
  </tr>
  <tr class="data">
    <td>mont blanc</td>
    <td>4810</td>
    <td class="last">Balmat</rd>
  </tr>
  <tr class="data">
    <td>everest</td>
    <td>8848</td>
    <td class="last">hillary</rd>
  </tr>
</table>

table.brutal{
  font-family:courier;
}
table.brutal thead {
  text-align:center;
}
table.brutal td{
  margin:0;
  padding:0;
}

table.brutal .data td:not(.last)::after {
  content:'|';
  float:right;
}
table.brutal .line td:not(.last)::after {
  content:'+';
  float:right;
  padding-top:1px;
}