基本表格結構

<table>
<tr> : tr 代表「表格列 ( table row )」
<td> : td 代表「表格資料 ( table data )」
<th> : th 代表「表格標題 ( table heading )]
可以在 <th> 設定 scope 屬性表示他是「行」或「列」的標題

<th scope="col">行的標題</th>

表示行（直排）的標題

<th scope="row">列的標題</th>

表示列（橫排）的標題
表格範例：（來源：<th> - HTML: Hypertext Markup Language | MDN）

<table>
       <tr>
        <th scope="col">Player</th>
        <th scope="col">Gloobles</th>
        <th scope="col">Za'taak</th>
    </tr>
    <tr>
        <th scope="row">TR-7</th>
        <td>7</td>
        <td>4,569</td>
    </tr>
    <tr>
        <th scope="row">Khiresh Odo</th>
        <td>7</td>
        <td>7,223</td>
    </tr>
    <tr>
        <th scope="row">Mia Oolong</th>
        <td>9</td>
        <td>6,219</td>
    </tr>
</table>

table 的 display 屬性

<table> 屬於區塊元素，不過 display 屬性值是 table，目前遇到 display: block 和 display: table 的一個顯著差別是 display: block 會自適應父元素的寬度， display: table 則是內容 <td> <th> 的寬度
因此當 table 被放在 區塊元素中，不會自適應 .container 寬度，需另外設定寬度

<div class="container">
  <table>
    <tr>
      <th scope="col">標題一</th>
      <th scope="col">標題二</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>
</div>

.container {
  width: 300px;
  margin: 10px auto;
  border: 1px solid #5e5b52;
  padding: 10px;
}
table {
  width: 90%;
  margin: 0 auto;
}
th,
td {
  border: 1px solid #001514;
  text-align: center;
  padding: 10px;
}

示意範例

參考資料：
<th> - HTML: Hypertext Markup Language | MDN
CSS: display:block; vs display:table;