JSFiddle - React, Tailwind, and code Playground

by liang10000

HTML

<!--資料:https://data.gov.tw/dataset/162873 -->
<html>

  <head>
    <h1>高雄市112年各區相同性別結婚對數及終止結婚對數</h1>

    <p>年度、月份、區域代碼、區域別、性別、相同性別結婚對數、相同性別終止結婚對數</p>
  </head>

  <boday>
    <table>
      <tr>
        <td>主要欄位說明</td>
        <td>年度、月份、區域代碼、區域別、性別、<b>相同性別結婚對數、相同性別終止結婚對數</b></td>
      </tr>
      <tr>
        <td>資料資源下載網址</td>
        <td>
          高雄市112年1月各區相同性別結婚對數及終止結婚對數<br>
          高雄市112年2月各區相同性別結婚對數及終止結婚對數<br>
        </td>
      </tr>
      <tr>
        <td>提供機關</td>
        <td><a href="https://data.gov.tw/datasets/search?p=1&size=10&s=pubdate.date_desc&rat=7468,39653,40934">高雄市政府民政局</a></td>
      </tr>
      <tr>
        <td>提供機關聯絡人姓名</td>
        <td>廖先生 ((07)7995678#5257) </td>
      </tr>
      <tr>
        <td>更新頻率</td>
        <td>每1月</td>
      </tr>
      <tr>
        <td>授權方式</td>
        <td>政府資料開放授權條款-第1版</td>
      </tr>
      <tr>
        <td>計費方式</td>
        <td>免費</td>
      </tr>
      <tr>
        <td>服務分類</td>
        <td><a href="https://data.gov.tw/datasets/search?p=1&size=10&s=pubdate.date_desc&rct=549">婚姻</a></td>
      </tr>
    </table>
  </boday>

</html>

CSS

h1 {
  font-size: 25px;
  font-weight: bold;
  margin: 20px 0 ;
}



table,td,tr {
  border: solid 1px #003399;
  border-collapse: collapse;
}



td:nth-child(odd) {
  width: 100px;
  background: #99bbff;
  padding: 10px;
  text-align: left;
}
td:nth-child(even) {
  padding: 10px;
}
a {
  text-decoration: none;
  color: blue;
}