[Html] 표 만들기

table 태그

표 관련 태그는 table 태그 안에서 사용

<table></table>

caption 태그

표를 생성할 때 웹 접근성을 향상시키는 방법으로 표 제목 지정할때 사용

<table>
	<caption>표 제목 </caption>
<table>

---

tr 태그

tr(table row) 태그는 표에서 행을 생성
-> 행을 여러개 생성하고 싶다면 tr태그 여러번

<table>
	<tr></tr>
</table>

th,td 태그

th(table header)와 td(table data)태그는 표에서 열을 생성할 때 사용

th 태그는 표에서 제목을 나타내는 열을 생성할 때, td 태그는 표에서 일반적인 데이터를 나타내는 열을 생성할 때 사용

<table>
	<tr>
    	<th>제목</th>
        <td>내용</td>
    </tr>
<table>

ex)

		<table>
            <caption> 물건 수량</caption>
            <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>

테두리는 css에서 적용

---

rowspan & colspan 속성

행과 행을 병합할 때는 rowspan

열과 열을 병합할 때는 colspan

		<table>
            <caption> 물건 수량</caption>
            <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열과 병합하여 생성 X-->>
            </tr>
            <tr>
                <td>총 금액</td>
                <td colspan="3">6500원</td>
            </tr>
        <table>

---

thead, tfoot, tbody 태그

표에서 행을 묶어서 그룹화 하기 위해 사용

thead 태그 -> 헤더 영역에 해당하는 행
tfoot 태그 -> 푸터 영역에 해당하는 행
tbody 태그 -> 본문 영역에 해당하는 행

순서 : head -> foot -> body 순

thead,tfoot은 한번만 사용 가능하며 thead 태그로 그룹화한 행은은 th태그로 열을 생성해야 함

<table>
	<thead>
    	<th> ... </th>
    </thead>
    <tfoot>
    	<td> ... </td>
    </tfoot>
    <tbody>
    	<td> ... </td>
    </tbody>
</table>

ex)

		 <table>
            <caption> 물건 수량</caption>
            <thead>
                <tr>
                    <th>번호</th>
                    <th>상품명</th>
                    <th>수량</th>
                    <th>가격</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td>총 금액</td>
                    <td colspan="3">6500원</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>
                    <!-- 4행 4열은 3행 4열과 병합하여 생성 X-->>
                </tr>
            </tbody>
        <table>

사용 이유 예시
-> 시각 장애인분들을 위한 스크린 리더를 통해 웹페이지를 읽게 된다면 지금 접근하는 표가 어떤 데이터를 담고 있는지 내용을 읽기전 파악 가능
-> 여러장에 걸친 표 데이터 프린트시 thead,tfoot 태그는 각 페이지에 인쇄됨

---

col & colgroup

열을 그룹화할때 사용

col 태그는 하나의 열을 그룹화, colgroup 태그는 span 속성과 함께 사용해 2개 이상의 열을 그룹화

열 전체를 그룹화해서 통일된 스타일을 적용하는 목적으로 많이 사용
-> caption 태그 다음에 사용해야 함, tr 태그 보다는 먼저
-> col 태그나, colgroup 태그를 사용하면 반드시 두 태그의 갯수와 사용한 열 개수가 일치해야 함

		<table>
            <caption> 물건 수량</caption>
            <col style = "width:80px">
            <colgroup span = "2" style = "width:150px"></colgroup>
            <col style = "width:100px">
            <thead>
                <tr>
                    <th>번호</th>
                    <th>상품명</th>
                    <th>수량</th>
                    <th>가격</th>
                </tr>
                (중략)
        </table>

1열 칼럼 크기 80px, 2,3열 칼럼 크기 150px, 4열 칼럼 크기 100px

---

scope 속성

웹 접근성 향상을 목적으로 사용하는 scope 속성

제목이 나타내는 셀의 범위를 지정
-> th 태그에서만 사용 가능

위 경우 예를 들어 구분,중간고사,기말고사,전공,교양이 전부 th태그로 작성되는 제목이여서 제목의 범위가 명확하지 않은 상태
-> 이때 scope 속성으로 각 th 태그의 범위를 지정하면 웹 접근성 향상

		<table>
            <caption> 성적 나열</caption>
            <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>