table 표 작성법

*기본 구성

<table> →표 전체 묶음
 <tr> ....행
  <th>제목</th>
  <td>데이터</td>
 </tr>
</table>

 

*분류 구성

-<thead></thead> >>순번, 제목,작성자, 작성일 등 제목
-<tbody></tbody>  >>헤드(제목 작성자 이런거)뺀 내용 즉 데이터, 생략해도됨 어차피 티헤드랑 티풋이 없으면 구분할 필요가 없으니까.
-<tfoot></tfoot>
>>티헤드나 티풋이 없는 표도 있고 순서가 바뀐 표도 있음, 필수는 아님. (구분할때 사용)

 

*행이나 열의 어디에 해당하는지 구분하기

ex)<th scope="col"></th> →열(세로)

   <th scope="row"></th> →행(가로)

>>웹 접근성을 위해 사용

 

*행, 열 합치는 방법

ex)<td colspan="2"></td>  →열2개를 합쳐서 행1개로 만든다. 

    <td rowspan="3"></td> →행3개를 합쳐서 열1개로 만든다.

 

*colgroup으로 특정 col에 스타일 적용시키기

<colgroup><!--col은상하(열) col 적힌 태그순서로 1열 2열 3열...적용됨-->

    <col span="2" style="background-color: #ccc; width:100px;">  <!-- span은 다음꺼랑 칸합쳐진거 까지 적용 -->

    <col>

    <col style="background-color:yellow; width:200px;">

</colgroup>

 

 

*이중선 안되게 표의 선 정리하기

-table 에 css로 border-collapse:collapse; 속성

>table 안에 th랑 td각 border를 주고 table에 또 border주면 이중으로 선이 생기니까 하나로 보이게 하고 싶을 때 사용, 안하면 칸마다 줄이 끊어지는 현상도 발생/ 기본적으로 많이 사용

 

*참고

-표는 보기엔 정리가 잘되어있는데 음성지원으로는 안돼서 접근성이 떨어짐 
<caption>표연습</caption> →어떤 건지 캡션 달아서 음성지원되게 하면 좋은데, 안 보이게 하고 싶으면 나중에 따로 처리해야됨(ex:작성자,제목~~로 구성)
-table안에 캡션있어도 table에 border주면 caption은 안먹히고 표에만 선 생김

 

 

---

*적용 예시

 

<table class="coffee">
        <caption>테이크아웃커피 비교대상제품</caption>
        <colgroup><!--col은상하(열)ㅣㅣㅣ이순서대로col적힌태그순서로1열2열3열...적용됨-->
            <col span="2" style="background-color: #ccc; width:100px;"><!-- span은 다음꺼랑 칸합쳐진거 적용 -->
            <col>
            <col style="background-color:yellow; width:200px;">
            <col>
            <col>
            <col>
        </colgroup>
        <thead>
            <tr>
                <!-- <th>분류</th> -->
                <th scope="col" colspan="2">분류</th>
                <th scope="col" >브랜드명</th>
                <th scope="col" >기본사이즈</th>
                <th scope="col" >제품명</th>
                <th scope="col" >가격(원)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row" rowspan="2">해외커피브랜드</td>
                <th scope="row">미국</td>
                <td>스타벅스커피</td>
                <td>Tall</td>
                <td>카페아메리카노</td>
                <td>3,900</td>
            </tr>
            <tr>
                <!-- <td></td> -->
                <th scope="row">이탈리아</td>
                <td>커피빈</td>
                <td>small</td>
                <td>아메리카노</td>
                <td>4300</td>
            </tr>
            <tr>
                <th scope="row" colspan="2" rowspan="4">국내커피브랜드</td>
                <!-- <td></td> -->
                <td>엔제리너스 커피</td>
                <td>small</td>
                <td>아메리카노</td>
                <td>3500</td>
            </tr>
            <tr>
                <!-- <td colspan="2"></td> -->
                <!-- <td></td> -->
                <td>이디야커피</td>
                <td>onesize</td>
                <td>아메리카노</td>
                <td>2500</td>
            </tr>
            <tr>
                <!-- <td colspan="2"></td> -->
                <!-- <td></td> -->
                <td>카페베네</td>
                <td>regular</td>
                <td>아메리카노</td>
                <td>3800~4500</td>
            </tr>
            <tr>
                <!-- <td colspan="2"></td> -->
                <!-- <td></td> -->
                <td>탐앤탐스커피</td>
                <td>tall</td>
                <td>아메리카노</td>
                <td>5000</td>
            </tr>
        </tbody>  
    </table>

테이크아웃커피 비교대상제품

분류		브랜드명	기본사이즈	제품명	가격(원)
해외커피브랜드	미국	스타벅스커피	Tall	카페아메리카노	3,900
	이탈리아	커피빈	small	아메리카노	4300
국내커피브랜드		엔제리너스 커피	small	아메리카노	3500
		이디야커피	onesize	아메리카노	2500
		카페베네	regular	아메리카노	3800~4500
		탐앤탐스커피	tall	아메리카노	5000