HTML Table Tags

표

<table>: The Table element

테이블 생성 즉 2차원 테이블을 표시하는 사용한다.
<tr>: table row
<th>: table header
<td>: table data
<caption>: 제목이나 설명
<thead>: 제목 열 그룹
<tbody>: 데이터 그룹
<tfoot>: 요약 그룹
<colspan>: 열 병합
<rowspan>: 행 병합
<colgroup>: 열 그룹
<col>: 열

<table>
    <caption>덴마크 다이어트 식단표</caption>
    <thead>
        <tr>
            <th></th>
            <th>월요일</th>
            <th>화요일</th>
            <th>수요일</th>
            <th>목요일</th>
            <th>금요일</th>
            <th>토요일</th>
            <th>일요일</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>아침</th>
            <td colspan="7">자몽, 계란 1~2개, 블랙 커피</td>
        </tr>
        <tr>
            <th>점심</th>
            <td>계란 2개, 자몽</td>
            <td>계란 2개, 토마토, 커피</td>
            <td colspan="3">계란 2개, 시금치, 커피</td>
            <td>과일샐러드 마음껏</td>
            <td>닭고기, 토마토, 당근, 양배추, 자몽, 커피</td>
        </tr>
        <tr>
            <th>저녁</th>
            <td>계란 2개, 콤비네이션 샐러드, 건토스트 1조각, 자몽, 커피</td>
            <td>스테이크, 토마토, 오이, 양상추, 올리브, 커피</td>
            <td>양갈비 2개, 셀러리 ,오이, 토마토, 티</td>
            <td>계란 2개, 코티지 치즈, 마른 토스트 한 조각, 양배추</td>
            <td>생선 샐러드, 드라이 토스트, 자몽</td>
            <td>스테이크, 셀러리, 오이, 토마토, 커피 듬뿍</td>
            <td>냉동 닭고기, 토마토, 자몽</td>
        </tr>
    </tbody>
</table>

마무리

테이블이 한 행씩 나열해서 작성하기 불편하는 점이 있지만 테이블로 표현할 때 유용하게 사용할 수 있을 것 같아요.

참조

ChatGPT

Last updated 9 months ago

Was this helpful?

<table>: The Table element

테이블 생성 즉 2차원 테이블을 표시하는 사용한다.

<tr>: table row

<th>: table header

<td>: table data

<caption>: 제목이나 설명

<thead>: 제목 열 그룹

<tbody>: 데이터 그룹

<tfoot>: 요약 그룹

<colspan>: 열 병합

<rowspan>: 행 병합

<colgroup>: 열 그룹

<col>: 열

<table>
    <caption>덴마크 다이어트 식단표</caption>
    <thead>
        <tr>
            <th></th>
            <th>월요일</th>
            <th>화요일</th>
            <th>수요일</th>
            <th>목요일</th>
            <th>금요일</th>
            <th>토요일</th>
            <th>일요일</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>아침</th>
            <td colspan="7">자몽, 계란 1~2개, 블랙 커피</td>
        </tr>
        <tr>
            <th>점심</th>
            <td>계란 2개, 자몽</td>
            <td>계란 2개, 토마토, 커피</td>
            <td colspan="3">계란 2개, 시금치, 커피</td>
            <td>과일샐러드 마음껏</td>
            <td>닭고기, 토마토, 당근, 양배추, 자몽, 커피</td>
        </tr>
        <tr>
            <th>저녁</th>
            <td>계란 2개, 콤비네이션 샐러드, 건토스트 1조각, 자몽, 커피</td>
            <td>스테이크, 토마토, 오이, 양상추, 올리브, 커피</td>
            <td>양갈비 2개, 셀러리 ,오이, 토마토, 티</td>
            <td>계란 2개, 코티지 치즈, 마른 토스트 한 조각, 양배추</td>
            <td>생선 샐러드, 드라이 토스트, 자몽</td>
            <td>스테이크, 셀러리, 오이, 토마토, 커피 듬뿍</td>
            <td>냉동 닭고기, 토마토, 자몽</td>
        </tr>
    </tbody>
</table>