<h2>範例一:表格結構</h2>
<table>
  <caption>有關獎金補充保險費試算方式 <br>
    <small>王先生為一般上班族,投保金額31,800元,年終獎金10萬元。110年2月15日給付獎金金額10萬元,未超過其當月投保金額31,800元之4倍,故不用扣取補充保費</small>
  </caption>
  <thead>
    <tr>
      <th>獎金項目</th>
      <th>給付日期</th>
      <th>當月投保金額(A)</th>
      <th>4倍投保金額(B=A×4)</th>
      <th>發給獎金金額</th>
      <th>累計獎金金額(C)</th>
      <th>補充保險費費基(D=C-B)</th>
      <th>補充保險費金額(D*2.11%)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>年終獎金</td>
      <td>110 / 2 / 15</td>
      <td>31,800</td>
      <td>127,200</td>
      <td>100,000</td>
      <td>100,000</td>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td>小計</td>
      <td colspan="3"></td>
      <td>100,000</td>
      <td>100,000</td>
      <td></td>
      <td>0</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="8" style="text-align:left;">
        註:
        <ol>
          <li>補充保險費費率以2.11%計算。</li>
          <li>補充保險費費基為獎金累計超過當月投保金額4倍部分。</li>
        </ol>
      </td>
    </tr>
  </tfoot>
</table>

<hr>

<h2>範例二:scope 屬性使用範例</h2>
<table>
  <caption>「一般保險費」及「補充保險費」比較表</caption>
  <thead>
    <tr>
      <th scope="col">對象</th>
      <th scope="colgroup" colspan="2">一般保險費</th>
      <th scope="colgroup" colspan="2">補充保險費</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="rowgroup" rowspan="6">保險對象</th>
      <td rowspan="6">投保金額</td>
      <td rowspan="6">×5.17%(費率)<br>×30%(負擔比率)<br>×(1+依附眷屬人數)</td>
      <td>股利所得</td>
      <td rowspan="6">×2.11%(費率)</td>
    </tr>
    <tr>
      <td>利息所得</td>
    </tr>
    <tr>
      <td>超過投保金額4倍部分的獎金</td>
    </tr>
    <tr>
      <td>執行業務收入</td>
    </tr>
    <tr>
      <td>兼職所得</td>
    </tr>
    <tr>
      <td>租金收入</td>
    </tr>
    <tr>
      <th scope="row">投保單位</th>
      <td>每個受僱員工之投保金額</td>
      <td>×5.17%(費率)<br>×60%(負擔比率)<br>×[1+0.58(平均眷口數)]</td>
      <td>投保單位支付薪資所得總額<br>-受僱員工投保金額總額</td>
      <td>×2.11%(費率)</td>
    </tr>
  </tbody>
</table>

<hr>

<h2>範例三:headers 屬性使用範例</h2>
<table>
  <caption>綜合所得稅修正重點</caption>
  <tbody>
    <tr>
      <th id="a" colspan="2">項目(a)</th>
      <th id="c">修法前(c)</th>
      <th id="d">修法後(d)</th>
    </tr>
    <tr>
      <th id="a1" headers="a" rowspan="2">標準扣除額(a1)</th>
      <th id="b1" headers="a a1">單身者(b1)</th>
      <td headers="a1 b1 c">9 萬元</td>
      <td headers="a1 b1 d">12 萬元</td>
    </tr>
    <tr>
      <th id="b2" headers="a a1">與配偶合併申報(b2)</th>
      <td headers="a1 b2 c">18 萬元</td>
      <td headers="a1 b2 d">24 萬元</td>
    </tr>
    <tr>
      <th id="a2" headers="a" colspan="2">薪資所得特別扣除額(a2)</th>
      <td headers="a2 c">12.8 萬元</td>
      <td headers="a2 d">20 萬元</td>
    </tr>
    <tr>
      <th id="a3" headers="a" colspan="2">身心障礙特別扣除額(a3)</th>
      <td headers="a3 c">12.8 萬元</td>
      <td headers="a3 d">20 萬元</td>
    </tr>
    <tr>
      <th id="a4" headers="a" colspan="2">幼兒學前特別扣除額(a4)</th>
      <td headers="a4 c">2.5 萬元</td>
      <td headers="a4 d">12 萬元</td>
    </tr>
    <tr>
      <th id="a5" headers="a" colspan="2">綜合所得淨額超過 1 千萬元部分稅率(a5)</th>
      <td headers="a5 c">45%</td>
      <td headers="a5 d">刪除</td>
    </tr>
  </tbody>
</table>
:root {
  --blue: #003166;
	--indigo: #400c97;
	--purple: #472783;
	--pink: #bd286c;
	--red: #7e131d;
	--orange: #b15000;
	--yellow: #ffc107;
	--green: #0f6422;
	--teal: #20c997;
	--cyan: #17a2b8;
	--brown: #795548;
	--white: #fff;
	--gray: #6c757d;
	--gray-dark: #343a40;
	--primary: #007bff;
	--secondary: #6c757d;
	--success: #28a745;
	--info: #17a2b8;
	--warning: #ffc107;
	--danger: #dc3545;
	--light: #f8f9fa;
	--dark: #343a40;
}

hr{margin: 3em 0;}

table {
  border: 1px solid var(--secondary);
  border-collapse: collapse;
  margin-bottom: 2em;
}

caption {
  font-weight: bold;
  font-size: 1.125rem;
  color: var(--dark);
  line-height: 1.4;
  text-align: left;
  margin-bottom: 8px;
}

th,
td {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 18px;
  padding-right: 18px;
  border: 1px solid var(--secondary);
  vertical-align: middle;
  text-align: center;
}

th {
  font-weight: bold;
  color: var(--white);
  background-color: var(--dark)
}

/* th[scope="col"]{
  background-color: var(--orange);
} */
/* th[scope="colgroup"]{
  background-color: var(--red);
} */
/* th[scope="rowgroup"]{
  background-color: var(--green);
} */
/* th[scope="row"]{
  background-color: var(--blue);
} */


/* [headers="a"],
[headers*="a "]{
  background-color: var(--red);
  color: white;
} */
/* [headers*="c"]{
  background-color: var(--orange);
  color: white;
} */
/* [headers*="d"]{
  background-color: var(--yellow);
} */
/* [headers*="a1"]{
  background-color: var(--blue);
  color: white;
} */
/* [headers*="b1"]{
  background-color: var(--green);
  color: white;
} */
/* [headers="a1 b2 d"]{
  background-color: var(--purple);
  color: white;
} */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.