08. HTML / 요소 - 표 콘텐츠

표 콘텐츠 08. HTML / 요소 - 양식

       table 태그 ( 테이블 표를 만들 때 사용 ) -> display : table (블럭 요소와 동일) 

             - tr 태그 ( 행 , 줄 만들 때 ) ex) 3줄을 만든다 -> <tr></tr> 3개 만든다.

             - td , th 태그 ( 칸, 셀 만들 때 )  ex) 2칸을 만든다 <tr> 태그 안에 <td></td> 2개 입력

         

css가 적용이 안되어 테이블 형태만 잡고 있다. -> css에서 border 설정 

 

                                                      border 설정후 

칸사이의 여백을 없어고 싶을 때는 ? 

 

                                      table 의 css 를 설정 

                                      table {

                                           border-collapse : collapse;

                                      }

타입과 값은 이 테이블에 헤더와 같은 기능을 하기 때문에 td -> th 태그로 수정을 해주면 좋다.

 

 

            th 태그 ('머리글 칸' 을 지정)

 

 

                    -colspan 사용 ( 열 병합 )

기본값은 1 현재 열이 2개 라서 최대 2개 까지 병합이 가능

 

 

                   -rowspan 사용 ( 행 병합 )

병합을 하는 행위는 1칸에서 1칸을 추가하여 합치는 개념( 원래있던 칸하고 합치는 개념이 아님) 그래서 2번째 열에서 빈칸 <td></td>가 밀려 나가는걸 볼수 있고 그래서 이걸 해결하려면 <td></td> 이 빈칸을 지우면 해결 완료 !

 

 

 

 

           td 태그  ('일반 칸'을 지정)

 

 

      caption 태그 ( 표의 제목을 설정 )

             - 열리는 table 태그 바로 다음에 작성해야 된다.

             - <table> 당 하나의 <caption>만 가능 

 

 

 

 

       colgroup, col 태그 ( 표의 열들을 공통적으로 정의하는 컬럼(col)과 그의 집합 (colgroup))

 

 

테이블의 열들의 배경색을 설정할 때 100칸이면 100개의 스타일을 적용 ( 너무 비효율 )- > 콜태그  사용 

col 태그의 span 속성을 사용하면 ( span="2") 옆에 줄 까지 배경색이 입혀지고 (span="3") 3줄다 배경색이 입혀 지게 된다.

 

 

 

      thead, tbody, tfoot 태그 ( 표의 머리글, 표의 본문, 표의 바닥글을 지정 )

                 - 기본적으로 테이블의 레이아웃에 영향을 주지 않는다.

 

 

                              정리