1. 테이블 태그

---

• 웹 문서에서 자료를 정리 할 때 자주 사용하는 태그
• 행과 열로 이루어져 있고, 행과 열이 만나는 지점을 셀이라고 함

태그	의미
<table> </table>	tr,th,td를 하나의 테이블로 묶음
<tr> </tr>	한개의 행 만듦
<th> </th>	한개의 열 만듦
<td> </td>	열에 대한 제목 표시 중앙 정렬 및 볼드 적용됨

속성	의미
border	표의 테두리 두께를 지정
width, height	너비와 높이 지정
align	정렬

• 개별 tr태그 (행)에 height 속성을 통해서 높이값을 조절가능
• 너비는 불가

✍ 태그 작성 시

<table border="2px" width="300px" height="200px">
    <tr>
        <th>이름</th>
        <th>나이</th>
        <th>주소</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>20살</td>
        <td>경기도 안양시</td>
    </tr>
    <tr>
        <td>고길동</td>
        <td>30살</td>
        <td>경기도 부천시</td>
    </tr>
</table>

👉결과

이름	나이	주소
홍길동	20살	경기도 안양시
고길동	30살	경기도 부천시

1-1. caption

---

• 테이블의 제목이나 내용을 추가하는 태그
• 다른 태그를 이용하여 Text를 꾸밀 수 있음
• 기본 텍스트 위치는 테이블 위 중앙에 배치 됨

✍ 태그 작성 시

<table border="2px" width="300px" height="200px">
   <caption>회원 정보</caption>
    <tr>
        <th>이름</th>
        <th>나이</th>
        <th>주소</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>20살</td>
        <td>경기도 안양시</td>
    </tr>
    <tr>
        <td>고길동</td>
        <td>30살</td>
        <td>경기도 부천시</td>
    </tr>
</table>

👉결과

회원 정보

이름	나이	주소
홍길동	20살	경기도 안양시
고길동	30살	경기도 부천시

1-2. rowspan과 colspan

---

<td> 태그 속성	의미
rowspan	지정한 행 만큼 행 병합
colspan	지정한 열 만큼 열 병합

👨‍🎓 작성법

<td rowspan="숫자"></td>
<td colspan="숫자"></td>

✍ 태그 작성 시

<table  border="3px" width="300px" height="200px">
    <tr>
        <td colspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

👉결과

1-3. thead, tbody, tfoot

---

• 테이블 안에서의 구조를 head, body, foot 으로 나누는 태그

태그	의미
<thead> </thead>	테이블 구조 중 가장 윗(머리)부분 구조, 테이블에 한 개만 존재 가능
<tbody> </tbody>	테이블 구조 중 head와 foot 사이 부분 구조, 테이블에 여러개 존재 가능
<tfoot> </tfoot>	테이블 구조 중 가장 아래(발) 부분 구조, 테이블에 한 개만 존재 가능

✍ 태그 작성 시

<table border="2px">
    <caption>회원 정보</caption>
    <thead>
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>금액</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>홍길동</td>
            <td>20살</td>
            <td>100,000</td>
        </tr>
        <tr>
            <td>고길동</td>
            <td>30살</td>
            <td>200,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">합계</td>
            <td>300,000</td>
        </tr>
    </tfoot>
</table>