<style>
  td {
    text-align: center;
    vertical-align: middle;
    border: 1px solid black; /* Add a border to all table cells */
  }
  .align-left {
    text-align: left;
  }
  .center-text {
    text-align: center;
  }
  .table-container {
    display: flex;
    justify-content: center;
  }

  .white-bg {
    width: 10em;
    background-color: rgb(169, 184, 206);
  }  
  .small-bg {
    font-size: 2em;
    width: 1em;
    background-color: rgb(105, 169, 211);
  }
  .middle-bg {
    width: 12em;
    background-color: rgb(148, 202, 238);
  }
  .class-short {
    width: 7em;
  }
</style>

<div class="table-container">
  <table style="width: 720px; table-layout: fixed;">
    <!-- First big row -->
    <tr>
      <td class="small-bg" rowspan="3">起</td>
      <td class="middle-bg" rowspan="3">{{Beginning}}</td>
      <td class="class-short">1-1 破題</td>
      <td class="align-left">{{Introduction}}</td>
    </tr>
    <tr>
      <td class="class-short">1-2 轉捩點</td>
      <td class="align-left">{{Turning_Point}}</td>
    </tr>
    <tr>
      <td class="class-short">1-3 行動</td>
      <td class="align-left">{{Action}}</td>
    </tr>
    <!-- Second big row -->
    <tr>
      <td class="small-bg" rowspan="3">承</td>
      <td class="middle-bg" rowspan="3">{{Development}}</td>
      <td class="class-short">2-1 事件</td>
      <td class="align-left">{{Event}}</td>
    </tr>
    <tr>
      <td class="class-short">2-2 更大的事件</td>
      <td class="align-left">{{Bigger_Event}}</td>
    </tr>
    <tr>
      <td class="class-short">2-3 更大更大的事件</td>
      <td class="align-left">{{More_Bigger_Event}}</td>
    </tr>
    <!-- Third big row -->
    <tr>
      <td class="small-bg" rowspan="3">轉</td>
      <td class="middle-bg" rowspan="3">{{Big Turn}}</td>
      <td class="class-short">3-1 BUT</td>
      <td class="align-left">{{But}}</td>
    </tr>
    <tr>
      <td class="class-short">3-2 BUT 後還有 BUT</td>
      <td class="align-left">{{Another_BUT}}</td>
    </tr>
    <tr>
      <td class="class-short">3-3 谷底</td>
      <td class="align-left">{{Lowest_Point}}</td>
    </tr>
    <!-- Fourth big row -->
    <tr>
      <td class="small-bg" rowspan="3">合</td>
      <td class="middle-bg" rowspan="3">{{Resolution}}</td>
      <td class="class-short">4-1 反彈</td>
      <td class="align-left">{{Rebound}}</td>
    </tr>
    <tr>
      <td class="class-short">4-2 高潮</td>
      <td class="align-left">{{Climax}}</td>
    </tr>
    <tr>
      <td class="class-short">4-3 結尾呼應</td>
      <td class="align-left">{{Echoing_End}}</td>
    </tr>
  </table>
  </div>
  
  <div style="height: 50px"></div>
  <p class="center-text">
    <i>
        powered by 
        <img src="https://posetmage.com/Images/Icon/PosetMage_t.png" height="16" /> PosetMage
        <img src="https://posetmage.com/Images/Icon/PosetMage_t.png" height="16" />
    </i>
  </p>