Edit in JSFiddle

CSS
HTML
Result

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

.ex1 {
  caption-side: top;
}

.ex2 {
  caption-side: bottom;
}

<!DOCTYPE html>
<html lang="ko">
  <head></head>
  <body>
    <p>caption-side: top</p>
    <table class="ex1">
      <caption>Table Caption</caption>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
      </tr>
      <tr>
        <td>Peter</td>
        <td>Griffin</td>
      </tr>
      <tr>
        <td>Lois</td>
        <td>Griffin</td>
      </tr>
    </table>

    <p>caption-side: bottom</p>
    <table class="ex2">
      <caption>Table Caption</caption>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
      </tr>
      <tr>
        <td>Peter</td>
        <td>Griffin</td>
      </tr>
      <tr>
        <td>Lois</td>
        <td>Griffin</td>
      </tr>
    </table>
  </body>
</html>