HTML 표 만들기

HTML 표는 웹페이지에서 데이터를 구조화하고 시각적으로 나타내는 중요한 도구입니다. 이를 통해 정보를 보다 명확하게 전달하고 사용자가 원하는 정보를 쉽게 찾을 수 있습니다. 표는 행과 열의 격자 형태로 구성되며, 각 셀에는 관련된 데이터가 들어갑니다. HTML을 사용하여 표를 만들 때는 다음과 같은 주요 요소들을 사용합니다

• table태그 (표를 만들 때 사용하는 태그 form과 마찬가지로 모두 table태그 안에서 사용)
• caption태그 (표 제목을 지정합니다. 표를 만들 때 반드시 사용)
• tr태그 (표에서 행을 생성합니다. tr태그 한번 사용 1행 2번 사용 2행)
• th,td태그 (표에서 열을 생성할 때 사용함. 표에서 제목을 나타내는 열을 생성할 때 th, 표에서 일반적인 데이터를 나타내는 열을 생성할 때 td)
• rowspan과 colspan속성 (행과 행을 병합할 때 rowspan, 열과 열을 병합할 때 colspan사용)
• thead,tfoot,tbody태그 (표에서도 행을 묶어 그룹화 할 수 있음 thead는 헤더 영역, tfoot는 푸터 영역, tbody는 본문 영역 사용한다면 반드시 순서 대로 사용 하여야 함.)
• col, colgroup태그 (표에서 열을 그룹화 할 때는 col태그와 colgroup태그 사용, col는 하나의 열을 그룹화, colgroup는 sapn과 함께 사용해 2개 이상의 열을 그룹)
• scope속성 (제목을 나타내는 셀의 범위를 지정, th태그 에서만 사용가능)

<!--형식 <table></table> -->

<!--형식 <table> <caption>표 제목</caption> </table> -->

<!--형식 <table> <tr> </tr> </table> -->

<!--형식 <table> 
              <tr>
                <th>제목</th>
                <td>내용</td>
              </tr>
             </table> -->

<table>
    <tr>
        <th>번호</th>
        <th>상품명</th>
        <th>수량</th>
        <th>가격</th>
    </tr>
    <tr>
        <td>1</td>
        <td>콜라</td>
        <td>1개</td>
        <td>1,500원</td>
    </tr>
    <tr>
        <td>2</td>
        <td>사이다</td>
        <td>2개</td>
        <td>1,000원</td>
    </tr>
    <tr>
        <td>3</td>
        <td>탄산수</td>
        <td>3개</td>
        <td>1,000원</td>
    </tr>
</table>

 <!-- rowspan,colspan설정하기 -->
    <table>
        <tr>
            <th>번호</th>
            <th>상품명</th>
            <th>수량</th>
            <th>가격</th>
        </tr>
        <tr>
            <td>1</td>
            <td>콜라</td>
            <td>1개</td>
            <td>1,500원</td>
        </tr>
        <tr>
            <td>2</td>
            <td>사이다</td>
            <td>2개</td>
            <td rowspan="2">1,000원</td> <!--행 병합-->
        </tr>
        <tr>
            <td>3</td>
            <td>탄산수</td>
            <td>3개</td>
            <!--4행 4열은 3행 4열과 병합했으므로 생성하지 않음-->
        </tr>
        <tr>
            <td>총 금액</td>
            <td colspan="3">6,500원</td> <!--열 병합-->
            <!--5행 2열부터 열3개를 병합했으므로 나머지 열은 생성하지 않음-->
        </tr>
    </table>

<!--형식 <table>
              <thead>
                <th>...</th>
              </thead>
              <tfoot>
                <td>...</td>
              </tfoot>
              <tbody>
                <td>...</td>
              </tbody>
             </table> -->

<table>
    <thead>
        <tr>
        <th>번호</th>
        <th>상품명</th>
        <th>수량</th>
        <th>가격</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>총 금액</td>
            <td colspan="3">6,500원</td> 
        </tr>
     </tfoot>
     <tbody>
        <tr>
            <td>1</td>
            <td>콜라</td>
            <td>1개</td>
            <td>1,500원</td>
        </tr>
        <tr>
            <td>2</td>
            <td>사이다</td>
            <td>2개</td>
            <td rowspan="2">1,000원</td>
        </tr>
        <tr>
            <td>3</td>
            <td>탄산수</td>
            <td>3개</td>
        </tr>
    </tbody>
</table>

<!--형식 <col>, <colgroup span="그룹화할 열의 개수"></colgroup> -->
<table>
    <col style="width: 80px">
    <colgroup span="2" style="width: 150px"></colgroup>
    <col style="width: 100px">
    <tr>
        <th>번호</th>
        <th>상품명</th>
        <th>수량</th>
        <th>가격</th>
    </tr>
    <tr>
        <td>1</td>
        <td>콜라</td>
        <td>1개</td>
        <td>1,500원</td>
    </tr>
    <tr>
        <td>2</td>
        <td>사이다</td>
        <td>2개</td>
        <td rowspan="2">1,000원</td>
    </tr>
    <tr>
        <td>3</td>
        <td>탄산수</td>
        <td>3개</td>
    </tr>
    <tr>
        <td>총 금액</td>
        <td colspan="3">6,500원</td>
    </tr>
</table>
<table>
    <tr>
        <th scope="col">구분</th>
        <th scope="col">중간고사</th>
        <th scope="col">기말고사</th>
    </tr>
    <tr>
        <th scope="row">전공</th>
        <td>A+</td>
        <td>B+</td>
    </tr>
    <tr>
        <th scope="row">교양</th>
        <td>C-</td>
        <td>B</td>
    </tr>
</table>