CSS Table 속성

table 속성

1. <table> 속성:block

• table태그는 표를 만드는 태그로, 웹사이트에서 게시판과 같은 영역을 만들때 사용한다.
  또한 일반적인 표를 만들때에 주로 사용된다.
• talbe태그 안에는 자식태그로 tr,td태그를사용한다. 모든 태그는 다 block속성을 가진다.
• table태그 안에서 tr은 칸들을 묶어주는 한 줄을 의미하고, td는 한 칸을 의미한다.
  tr 안에 td 갯수는 모두 동일해야 한다.★

  [기본형]

   <table> -> 표 전체
      <tr> -> 행. 칸들을 묶어주는 한 줄
        <td>내용</td> -> 열. 1칸
      </tr>    
   </table>

2. <th>, <caption>, <figcaption>
   • 표를 만들다보면 표에 제목을 넣고 싶을때가 있다. 표에 제목을 넣을때에는
     행이나 열의 제목을 뜻하는 th태그나 표전체의 제목을 지정하는 caption, figcaption
     태그를 사용한다.

• th는 제목을 나타내는 한 칸을 지정한다. 또한 글자가 굵게 표시되고, 칸의 중앙에 나오는
  것이 기본값이다
  

3. colspan과 rowspan

• colspan은 가로 방향으로 칸을 합칠때 사용하는 속성.
  rowspan은 세로 방향으로 칸을 합칠때 사용하는 속성.

• 각 속성에는 숫자를 쓸 수 있는데 속성이 쓰여진 해당 칸부터 숫자만큼 합쳐진다.
  이 속성들은 td나 th처럼 '칸'을 의미하는 태그에 사용해야 한다.

  [기본형]

    <td & th colspan='2'>내용</td> : 해당 칸은 가로로 2칸짜리이다.
    <td & th rowspan='2'>내용</td> : 해당 칸은 세로로 2칸짜리이다.

4. <thead>, <tbody>, <tfoot>

• 표의 구조를 나눌때 <thead>, <tbody>, <tfoot>으로 나눌 수 있다.

    <thead>태그는 제목을 나타내는 영역으로 제목들을 포함한다.
    해당 태그안에는 제목을 나타낼 tr과 th들로 구성되어 있어야 한다.
  
    <tbody>는 제목에 따른 본문 내용을 표시하는 공간이다. 여러 tr과 td들로 구성된
    영역이다.
  
    <tfoot>는 표의 요약내용을 나타낼때 사용한다. 예를 들어 총 게시물의 갯수나
    표의 통계내용 같은것을 포함하고 생략이 가능한 영역이다.

  [기본형]

    <table>
      <thead>tr과 th가 들어간다</thead>
      <tbody>tr과 th,td가 들어간다</tbody>
      <tfoot>tr과 th,td0가 들어간다</tfoot>
    </table>

5.<colgroup> <col/>

• 한 열(세로줄)에 있는 모든 셀(칸)에 같은 스타일을 적용하고 싶을때 사용한다.

  <col/>태그는 두 줄 이상의 열을 묶어 같은 스타일을 지정하려면 span속성을 사용할 수 있다.
  만약 <col span='2'>형식으로 두 줄을 묶어주면 세로 두 줄에 동일한 스타일을 지정할 수 있다.
  colgroup<>은 <col>들을 묶어주는 태그이다. col의 갯수는 tr안의 th또는 td의 갯수와 같아야
  한다.

  [기본형]

  <table>
     <colgroup>
        <col span-'2' width='10%'/>
        <col />
        <col />
     </colgroup>

6. border-collapse

• table태그에 border를 사용하게 되면 table과 td사이는 두 줄로 표현된다.
  이때 border-collapse속성을 사용하면 표와 표사이의 여백을 없애고 한 줄로 표현해준다.

  [속성값]
  - collapse : table과 td사이의 여백을 없애고 border를 한 줄로 합친다.
  - separate : 기본값으로 table과 td사이 테두리를 따로 표시한다.

  border-spacing

• table태그에 border를 사용하게 되면 table과 td사이의 간격을 지정하는 속성이다.
  

• border-collapse:collapse일땐 사용할 수 없고, border-spacing도 table태그에 지정해야
  한다.

• border-spacing의 값을 1개만 쓰면 모두 동일한 간격을 가지고, 값을 2개로 나눠 쓰면 첫 번째 자리는 좌우 간격의 자리, 뒤의 자리는 세로 간격의 자리이다.
  empty-cells

• 표에서 내용이 없는 칸이 있을 때 해당 칸에 있는 border를 보여줄것인지 안보여줄것인지 정하는 속성이다.

• 마찬가지로 border-collapse:collapse일땐 사용할 수 없다.

  [속성값]
  - show : 내용이 없더라고 빈 셀 주위에 테두리를 표시해준다. 기본값
  - hide : 내용이 없는 칸은 테두리를 없앤다.

  ---

7. table-layout

• 컨텐츠에 맞게 셀 넓이를 지정할 수 있다. 셀의 width값을 지정하면 해당 크기에 맞게
  화면에 표시된다.

• 하지만 영문일 경우 여백없이 길게 입력하면 셀의 width값은 무시되고 영문 내용은 한 줄로 길게 표현된다.

• 만약 width값을 고정하여 칸의 넓이를 적용하려면 table-layout을 사용한다. table태그에 직접 적용해야 한다

  word-break

• table-layout을 적용하면 칸의 넓이가 고정되면서 길게 작성된 영문이 옆 칸을 뚫고 나갈 수 있다.

• 이때에는 word-break속성을 지정하여 칸에 맞춰 영문이 아래로 내려오도록 할 수 있다. 해당 속성도 table태그에 선언한다.

  [속성값]
  - fixed : 칸에 적용한 width값을 고정한다. 한 줄로 영문이 길게 들어가더라도 무시하지 않는다.
  - auto : 기본값으로 내용이 영문으로 띄어쓰기없이 영문이 한 줄로 길게 들어가면 width값을 무시한다.
  word-break
  - break-all : 문자가 칸에 맞춰 아래로 내려온다.
  - keep-all : 문자가 칸을 벗어나더라도 유지한다.

  vertical-align

• 표를 작성하면 글자는 칸의 세로 중앙에 위치한다. 만약 이 글자들의 정렬을 top/middle/bottom 위치로 보내고 싶다면 vertical-align을 사용한다.

• 가로로 정렬하려면 text-align을 이용한다. vertical-align은 table태그안에서만 사용할 수 있다.

  [속성값]
  - baseline : 셀의 글자 기준선에 맞춰 글자의 기준선을 맞춘다.
  - top : 패딩이 있을 경우 패딩영역을 제외한 칸의 윗쪽에 글자를 맞춘다.
  - bottom : 패딩이 있을 경우 패딩영역을 제외한 칸의 아래쪽에 글자를 맞춘다.
  - middle : 기본값으로 칸의 세로 중앙에 글자를 나타낸다.