自學網頁の嬰兒教材：第4課 ── 好用的表格

by max002215

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>第四課好用的表格</title>
</head>
<body>
<header>
<h1>臺北市特定寵物業評鑑成果</h1>
</header>
<table class="table">
  <caption>詮釋資料
  </caption>
  <thead><tr><th>_id</th>
  <th>縣市</th>
  <th>行政區</th>
  <th>郵政區號</th>
  <th>有效期限</th>
  <th>公司名稱</th>
  <th>電話</th>
  <th>地址</th>
  <th>營業項目</th>
  <th>評鑑等級</th></tr></thead>
  <tbody><tr><td>1</td>
  <td>台北市</td>
  <td>士林區</td>
  <td>111</td>
  <td>2024.07.18</td>
  <td>岱哥寵物精品
</td>
  <td>02-2875-6869
</td>
  <td>天母西路3-1號2樓
</td>
  <td>寄養</td>
  <td>優等</td></tr>
  <tr>
    <td>2
</td>
    <td>臺北市
</td>
    <td>士林區
</td>
    <td>111
</td>
    <td>2024.07.05</td>
    <td>美樂蒂寵物 美容用品館
</td>
    <td>02-2816-0089</td>
    <td>延平北路五段208號1樓
</td>
    <td>買賣</td>
    <td>乙等
</td>
  </tr>
  <tr>
    <td>3
</td>
    <td>臺北市
</td>
    <td>士林區
</td>
    <td>111
</td>
    <td>2024.09.24</td>
    <td>貓室友工作室
</td>
    <td>0989-935-571
</td>
    <td>文林路512-1號2樓
</td>
    <td>寄養</td>
    <td>優等</td>
  </tr>
  <tr>
    <td>4
</td>
    <td>臺北市
</td>
    <td>士林區
</td>
    <td>111
</td>
    <td>2025.05.09</td>
    <td>毛小孩澡堂
</td>
    <td>02-2833-5757
</td>
    <td>忠誠路一段184號1樓
</td>
    <td>寄養
</td>
    <td>甲等
</td>
  </tr>
  <tr>
    <td>5
</td>
    <td>臺北市
</td>
    <td>士林區
</td>
    <td>111
</td>
    <td>2025.05.14</td>
    <td>逸有限公司
</td>
    <td>02-2872-7333</td>
    <td>天母東路13號</td>
    <td>寄養
</td>
    <td>甲等
</td>
  </tr>
  <tr>
    <td>6
</td>
    <td>臺北市</td>
    <td>士林區</td>
    <td>111
</td>
    <td>2025.06.18</td>
    <td>一簍毛工作室
</td>
    <td>0909-878-664
</td>
    <td>天母西路3號5樓之20
</td>
    <td>寄養
</td>
    <td>新設
</td>
  </tr>
  <tr>
    <td>7
</td>
    <td>臺北市
</td>
    <td>士林區
</td>
    <td>111</td>
    <td>2025.10.14</td>
    <td>花襪子的家 寵物生活館
</td>
    <td>0910-653-289
</td>
    <td>天母北路38號1樓
</td>
    <td>寄養
</td>
    <td>新設
</td>
  </tr>
  <tr>
    <td>8
</td>
    <td>臺北市
</td>
    <td>士林區
</td>
    <td>111
</td>
    <td>2022.12.11</td>
    <td>張羅企業社
</td>
   ...

CSS

*{
  padding: 0;
  margin: 0;
}
header{
  margin: 30px 10px;
}
.table{
  max-width: 1500px;
  margin: 10px;
}
caption{
  text-align: left;
  margin: 10px 3px;
  padding-left: 10px;
  font-size: 20px;
  font-weight: bold;
  color:#003060;
  border-left: 5px solid #003060;
}
thead{
  color: #fff;
  background-color: #2DEDFD;
  text-align: right;
}
tbody{
  background: #FAFAFA;
}
th{
  padding: 8px;
}
td{
  padding: 8px;
  text-align: right;
}