<table>
    <caption>영수증</caption> <!-- 테이블 제목 -->
    <thead> <!-- 테이블 헤더(머리글) -->
        <tr>
            <th scope="col">상품</th>
            <th scope="col">가격</th>
        </tr>
    </thead>
    <tbody> <!-- 테이블 본문(주요 데이터) -->
        <tr>
            <td>커피</td>
            <td>2,500</td>
        </tr>
        <tr>
            <td>과자</td>
            <td>1,500</td>
        </tr>
    </tbody>
    <tfoot> <!-- 테이블 푸터(바닥글) -->
        <tr>
            <th scope="row">합계</th>
            <td>4,000</td>
        </tr>
    </tfoot>
</table>
실제 적용된 모습 CSS를 사용해서 테이블의 구성 요소의 주변에 선과 배경색을 만들어 구조를 더 명확하게 파악할 수 있도록 스타일을 추가했습니다.
th, td {
    padding: 0.5em 1em;
    border: 1px solid gray;
}
thead, tfoot {
    background-color: black;
    color: white;
}
tbody {
    background-color: gold;
}
<table>
    <caption>영수증</caption>
    <thead>
        <tr>
            <th scope="col">상품</th>
            <th scope="col">가격</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>커피</td>
            <td>2,500</td>
        </tr>
        <tr>
            <td>과자</td>
            <td>1,500</td>
        </tr>
    </tbody>
    <!-- <tbody> 뒤에 <tfoot> 태그가 없습니다 -->
    <tr>
        <th scope="row">합계</th>
        <td>4,000</td>
    </tr>
</table>
<table>
    <caption>영수증</caption>
    <thead>
        <tr>
            <th scope="col">상품</th>
            <th scope="col">가격</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>커피</td>
            <td>2,500</td>
        </tr>
        <tr>
            <td>과자</td>
            <td>1,500</td>
        </tr>
    </tbody>
    <tbody> <!-- 브라우저가 추가한 <tbody> 태그 -->
        <tr>
            <th scope="row">합계</th>
            <td>4,000</td>
        </tr>
    <tbody>
</table>