CSS caption-side: 표 설명 위치

table {
  caption-side: top;
  /* caption-side: bottom; */
}

table {
  border-collapse: collapse;
}

td,
th {
  border: 1px solid black;
}

caption {
  background: yellow;
  padding: 0.5em 0;
}

<table>
  <caption>우리 매장 원산지 표기</caption>
  <thead>
    <tr>
      <th>종류</th>
      <th>품목</th>
      <th>원산지</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3">과일</th>
      <td>사과</td>
      <td rowspan="2">국산</td>
    </tr>
    <tr>
      <td>배</td>
    </tr>
    <tr>
      <td>파인애플</td>
      <td>수입산</td>
    </tr>
    <tr>
      <th>곡물</th>
      <td>쌀</td>
      <td>국산</td>
    </tr>
    <tr>
      <th>해산물</th>
      <td>고등어</td>
      <td>원양산</td>
    </tr>
  </tbody>
</table>

/* 방향 값 */
caption-side: top;
caption-side: bottom;

/* 전역 값 */
caption-side: inherit;
caption-side: initial;
caption-side: revert;
caption-side: revert-layer;
caption-side: unset;