制作一个有一个标题和三或两列的表格答案

【问题标题】：make a table with one title and three or two columns制作一个有一个标题和三或两列的表格
【发布时间】：2020-04-08 05:14:48
【问题描述】：

我想制作一个表格，其中只有一个标题在中心，并且在这张图片中只有两三列。 https://drive.google.com/open?id=1IDfBI09c5Oo4HYJKTmIb5LY97HFVfJLr

我尝试了以下方法来完成如上图所示的表格，但它没有与图片完全正确对齐。

<table>
  <tr>
    <th>Title</th>
  </tr>
  <tr>
    <td>A</td>
    <td>some textt</td>
  </tr>
  <tr>
    <td>B</td>
    <td>b</td>
  </tr>
  <tr>
    <td>C</td>
    <td>c</td>
  </tr>
  <tr>
    <td>some text</td>
    <td>some text</td>
  </tr>
</table>

【问题讨论】：

标签： html html-table alignment

【解决方案1】：

使用colspan=2 使th 单元格跨越两列。

添加一些 css 以根据需要格式化表格

table{border-collapse:collapse;}
tr,td{border:1px solid #aaa;}
td,th{text-align:center;padding:5px 10px;}

<table>
  <tr>
    <th colspan=2>Title</th>
  </tr>
  <tr>
    <td>A</td>
    <td>some textt</td>
  </tr>
  <tr>
    <td>B</td>
    <td>b</td>
  </tr>
  <tr>
    <td>C</td>
    <td>c</td>
  </tr>
  <tr>
    <td>some text</td>
    <td>some text</td>
  </tr>
</table>

更新

显示表格标题的中心。

另请注意，<table> 是 1990 年代的技术。最近引入了一个更好的替代品：CSS Grid。 CSS Grid 使用 DIV 结构而不是表格，以及将 div 格式化为表格结构的新 CSS3 指令。它比旧的<table></table> 结构灵活得多，而且坦率地说，更容易（一旦表格变得复杂）。参考资料：

W3Schools basic intro

CSSTricks Complete Guide

GridByExample 注意：这最后一篇由优秀的编辑SmashingMagazine

【讨论】：

表格的标题没有正确居中，我认为其他因素正在影响，请查看drive.google.com/open?id=1oH1qYyjOQ81uHotZUeT02slk4W9yQrKw@cssyphus 先生，ste.css 中没有任何链接。在您建议我回答之前，我正在尝试这样做，请帮我解决这个问题并将桌子放在手风琴内。
注意在css部分（第一部分），指令text-align:center在td选择器旁边。因此，它以td 单元格为中心。如果您还希望它以th 单元格为中心，您可以将选择器从td 更改为td, th，如下所示：td, th{text-align:center;padding:5px 10px;} 以上答案已更新为执行此操作
另请注意，TABLEs 是 1990 年代的技术。最近引入了一个更好的替代品：CSS Grid。 CSS Grid 使用 DIV 结构而不是表格，以及将 div 格式化为表格结构的新 CSS3 指令。它比旧的表结构灵活得多，而且坦率地说，更容易（一旦表变得复杂）。见this和this和this（SmashingMagazine编辑的最后一篇

【解决方案2】：

为table 标签添加了colspan html attribute，请关注代码。

<table>
  <tr>
    <th colspan="2">Title</th>
  </tr>
  <tr>
    <td>A</td>
    <td>a</td>
  </tr>
  <tr>
    <td>B</td>
    <td>b</td>
  </tr>
  <tr>
    <td>C</td>
    <td>c</td>
  </tr>
  <tr>
    <td>some text</td>
    <td>some text</td>
  </tr>
</table>

【讨论】：