HTML CSS 表格设计指南答案

【问题标题】：HTML CSS Table Design GuidanceHTML CSS 表格设计指南
【发布时间】：2020-05-04 14:36:02
【问题描述】：

我正在尝试用 HTML/CSS/PHP 创建这种类型的表格或设计。

在每个块中，将有 3 个变量。一个在中心具有水平方向，两个在中心变量的任一方向具有垂直方向。

我试图通过使用 HTML 表格来复制这一点，但没有得到正确的结果。这是我设法得到的。

我已经进行了编程以配置变量并将它们放置在它们应该有方向的位置，但有点卡在正确的 UI 上。请帮我设计这个。

【问题讨论】：

标签： html css css-tables

【解决方案1】：

在 HTML 中添加：

<table style="width:400px">
<tr>
<td>
  <table>
    <tr>
      <td>1</td>
       <td> </td>
       <td>3</td>
    </tr>
    <tr>
      <td>1</td>
       <td>45</td>
       <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td> </td>
      <td>3</td>
    </tr>
  </table>
</td>
<td>
  <table>
    <tr>
      <td>1</td>
       <td> </td>
       <td>3</td>
    </tr>
    <tr>
      <td>1</td>
       <td>45</td>
       <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td> </td>
      <td>3</td>
    </tr>
  </table>
</td>
<td>
  <table>
    <tr>
      <td>1</td>
       <td> </td>
       <td>3</td>
    </tr>
    <tr>
      <td>1</td>
       <td>45</td>
       <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td> </td>
      <td>3</td>
    </tr>
  </table>
</td>
</tr>
</table>

在css中添加：

th, td {
   padding: 15px;
}

解决它:)

祝你好运！！！

【讨论】：

也许您没有正确阅读问题。在一个块中，只有 3 个变量，2 个垂直方向，1 个水平方向。根据问题，您的答案不适用。你是社区的新手。请查看指南。