:::

1-1 index.html

<!DOCTYPE html>
<html lang="zh-Hant-TW">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="/node_modules/bootstrap/dist/css/bootstrap.min.css"
    />
    <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <link
      rel="stylesheet"
      href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css"
    />
    <title>待辦清單</title>
  </head>
  <body>
    <div class="container">
      <h1 class="text-primary text-center">
        <i class="fas fa-list"></i> 我的待辦清單
      </h1>
      <hr />
      <div class="row align-items-start">
        <div class="col-3">
          日期:2021/03/13
        </div>
        <div class="col-10">
          <ul>
            <li>今天到期:1</li>
            <li>逾期:2</li>
          </ul>
        </div>
      </div>


      <table class="table">
        <thead>
          <tr>
            <th scope="col">是否完成</th>
            <th scope="col">標題</th>
            <th scope="col">到期日</th>
            <th scope="col">優先順序</th>
            <th scope="col">指派對象</th>
          </tr>
        </thead>
        <tbody>
          <!-- 第一列 -->
          <tr>
            <td>完成</td>
            <td>撰寫程式</td>
            <td>2021/03/13</td>
            <td>低</td>
            <td>李大頭</td>
          </tr>
          <!-- 第二列 -->
          <tr>
            <td>未完成</td>
            <td>開會</td>
            <td>2021/03/13</td>
            <td>高</td>
            <td>李大頭、吳大大</td>
          </tr>
          <!-- 第三列 -->
          <tr>
            <td>未完成</td>
            <td>社大上課</td>
            <td>2021/03/13</td>
            <td>高</td>
            <td>李大頭、吳大大、郭大大</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>