다양한 태그들(3)

표를 만드는 태그

• <table> 태그
  • 표의 시작과 끝을 알려 줌
  • <table> 태그 사이에 표와 관련된 태그를 넣음
• <caption> 태그
  • 표에 제목을 붙임
  • <table> 태그 바로 아랫줄에 사용함
  • 제목은 표의 위쪽 중앙에 표시됨

---

행과 셀을 만드는 태그

• <tr> 태그
  • 행을 만듦
• <td> 태그
  • 행 안에 있는 셀을 만듦
• <th> 태그
  • 표의 제목 행에 셀을 만듦
  • <th> 태그를 사용한 내용은 진하게 표시되고 중앙에 배열됨

-(예시)

<table>
    <caption>표 만들기 예시</caption>
    <tr>
        <th>예시 1</th>
        <th>예시 2</th>
        <th>예시 3</th>
    </tr>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>가</td>
        <td>나</td>
        <td>다</td>
    </tr>
</table>

-(결과)

---

표의 구조를 지정하는 태그

• <thead> 태그
  • thead는 "table" 과 "head"가 합쳐짐
  • 제목 부분
• <tbody> 태그
  • tbody는 "table" 과 "body"가 합쳐짐
  • 본문 부분
• <tfoot> 태그
  • tfoot은 "table" 과 "foot"이 합쳐짐
  • 요약 부분

---

행이나 열을 합치는 속성

• rowspan 속성
  • 행을 합침
• colspan 속성
  • 열을 합침

-(예시)

<table>
<caption>rowspan 이용하기</caption>
	<thead>
        <tr>
            <th>예시 1</th>
            <th>예시 2</th>
            <th>예시 3</th>
    	</tr>
  	</thead>
  	<tbody>
    	<tr>
            <td rowspan="2">A</td>
            <td>B</td>
            <td>C</td>
    	</tr>
        <tr>
            <td>가</td>
            <td>나</td>
        </tr>
  	</tbody>
</table>

-(결과)

---

열을 묶어주는 태그

• <col> 태그
  • 열을 1개만 지정할 때 사용
  • 배경색을 넣거나 너비를 바꿀 때 사용
• <colgroup> 태그
  • 2개 이상의 열을 묶어서 사용
  • <col> 태그를 2개 이상 묶어 사용