JSFiddle - React, Tailwind, and code Playground

by j437437

HTML

<!-- 資料來源 https://data.gov.tw/dataset/157824 -->

<header>
  <h1>近年老年福利津貼受益人數</h1>
  <p>為增進大眾對於我國老年經濟安全制度之了解，彙整近年各項老年福利津貼受益人數</p>
  <p>國家發展委員會 | 2022-09-08 13:44:51 更新 | 觀看人數 291</p>
</header>
<table class="table">
  <caption>台灣近年老年福利津貼受益人數統計表</caption>
  <thead>
    <tr>
      <th>年度</th>
      <th>老年基本保證年金[人]</th>
      <th>原住民給付 [人]</th>
      <th>老農津貼 [人]</th>
      <th>中低收入老人生活津貼 [人]</th>
      <th>榮民就養給付 [人]</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2021</td>
      <td>461427</td>
      <td>43638</td>
      <td>564631</td>
      <td>186225</td>
      <td>31854</td>
    </tr>
    <tr>
      <td>2020</td>
      <td>498971</td>
      <td>42920</td>
      <td>577548</td>
      <td>173011</td>
      <td>32770</td>
    </tr>
    <tr>
      <td>2019</td>
      <td>536099</td>
      <td>42012</td>
      <td>588863</td>
      <td>156783</td>
      <td>34663</td>
    </tr>
    <tr>
      <td>2018</td>
      <td>574008</td>
      <td>40878</td>
      <td>601518</td>
      <td>143610</td>
      <td>37405</td>
    </tr>
    <tr>
      <td>2017</td>
      <td>613157</td>
      <td>39701</td>
      <td>614678</td>
      <td>134365</td>
      <td>40253</td>
    </tr>
    <tr>
      <td>2016</td>
      <td>652187</td>
      <td>38089</td>
      <td>627329</td>
      <td>128108</td>
      <td>43363</td>
    </tr>
    <tr>
      <td>2015</td>
      <td>692129</td>
      <td>36852</td>
      <td>638334</td>
      <td>124490</td>
      <td>43380</td>
    </tr>
    <tr>
      <td>2014</td>
      <td>728187</td>
      <td>35091</td>
      <td>651482</td>
      <td>122423</td>
      <td>50580</td>
    </tr>
    <tr>
      <td>2013</td>
      <td>764476</td>
      <td>33099</td>
      <td>664995</td>
      <td>120869</td>
      <td>55352</td>
    </tr>
    <tr>
      <td>2012</td>
      <td>793052</td>
      <td>31672</td>
      <td>674870</td>
      <td>120266</td>
      <td>65665</td>
    </tr>
    <tr>
      <td>2011</td>
      <td>836706</td>
      <td>29444</td>
 ...

CSS

*{
  padding: 0;
  margin: 0;
}
header{
  margin: 30px 10px;
}
a{
  color: blue;
}
a:hover {
  color: red;
}
h1{
  margin-bottom: 10px;
}
p{
  margin-bottom: 5px;
}
.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 {
  background-color: #003060;
  color: #fff;
  text-align: right;
  }
tbody {
    background-color: #ECF5FF;
}
tfoot {
  background-color: #ACD6FF;
  font-weight: bold;
  }

th{
  padding: 8px;
}
td{
  padding: 8px;
  text-align: right;
  
}