JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  </head>

  <body>
    <h1 style="text-align: center;">自學網頁の嬰兒教材：第4課 ── 好用的表格</h1>

    <table>
      <colgroup>
        <col span="2" class="main">
        <col span="4" class="sub">
      </colgroup>
      <thead>
        <tr>
          <th>資料名稱<i class="fa-solid fa-sort"></i></th>
          <th>資料集描述</th>
          <th>更新時間<i class="fa-solid fa-sort"></i></th>
          <th>使用次數<i class="fa-solid fa-sort"></i></th>
          <th>資料類型</th>
          <th>資料格式</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="title"><a href="">跟你說個故事</a></td>
          <td class="description">臺北市立美術館兒童藝術教育中心《跟你說個故事》展覽專輯</td>
          <td>2024-02-06</td>
          <td class="times">0次</td>
          <td>出版品</td>
          <td></td>
        </tr>
        <tr>
          <td class="title"><a href="">狂八〇：跨領域靈光出現的時代</a></td>
          <td class="description">「狂八〇：跨領域靈光出現的時代」展覽專輯</td>
          <td>2024-02-06</td>
          <td class="times">0次</td>
          <td>出版品</td>
          <td></td>
        </tr>
        <tr>
          <td class="title"><a href="">生活決定意識：高重黎</a></td>
          <td class="description">「生活決定意識：高重黎」展覽專輯</td>
          <td>2024-02-06</td>
          <td class="times">0次</td>
          <td>出版品</td>
          <td></td>
        </tr>
        <tr>
          <td class="title"><a href="">「在夾縫中行走」專輯</a></td>
          <td class="description">「在夾縫中行走」展覽專輯</td>
          <td>2024-02-06</td>
          <td class="times">0次</td>
          <td>出版品</td>
          <td></td>
        </tr>
        <tr>
         ...

CSS

table {
  width: 1000px;
  margin: auto;
  border-collapse: collapse;
}

.main {
  width: calc(50% / 2);
}

.sub {
  width: calc(50% / 4);
}

th,
td {
  text-align: left;
  line-height: 2;
  vertical-align: top;
}

i {
  margin-left: 5px;
}

.times {
  text-align: center;
}

th {
  color: #fff;
  font-weight: 900;
  background-color: #2eb6c7;
  padding: 10px;
  /* 不加border的話，thead和tbody會有些微寬度差異 */
  border: 1px solid #2eb6c7;
}

td {
  color: #606266;
  padding: 5px 10px;
  border: 1px solid #eeeeee;
}

td.title a {
  text-decoration: none;
  color: #2eb6c7;
}

tbody tr:nth-child(2n + 1) {
  background-color: #fff;
}

tbody tr:nth-child(2n + 1):hover {
  background-color: #eaf8f9;
  transition: 0.3s;
}

tbody tr:nth-child(2n) {
  background-color: #eeeeee;
}