table태그 (표를 만드는 태그)

 

• 표를 담는 태그 
  • <table>, <thead>, <tbody>,<tfoot>,<tr>,<th>,<td>,<caption>,<colgroup>,<col>
    • table은 표를 담는 태그다. 
    • thead는 표의 헤더부를 담는 태그다.
    • tbody는 표의 데이터부를 담는 태그다.
      • 테이블을 구분해놓은 것은 나중에 꾸밀때도 편하기 때문에 구분지어서 작성한다. 
    • tfoot는 표의 푸터부를 담는 태그다. 
    • tr은 표의 행을 생성하는 태그다. 
    • th는 각 항목의 제목을 담는 태그다.
    • td는 각 항목의 데이터를 담는 태그다 
    • colgroup, col은 테이블에 포함된 각 컬럼의 너비를 지정하는 태그다.
    • caption은 표에 대한 설명을 담는 태그다. 

table > (thead? > tr+ > th+)?, (tbody? > tr+ > (th|td)+), (tfoot? > tr+ > (th|tr)+)?

• • • 표기법에 딱 맞는 표기법은 아니다. 전달하기 위해 작성한 표기법이다. 
    • table 
      • (caption?, colgroup?, thead?, tbody?, tfoot?, tr+)
      • ?은 1번만 작성하거나 사용하지 않아 도된다.
      • +는 작성을 해야한다.
    • caption 텍스를 작성하는 부분이다.
    • colgroup 
      • col+ : col은 여러번 적을 수 있다. 
    • thead 
      • tr+ : tr은 여러번 적어야한다.
    • tbody
      • tr+ : tr은 여러번 적어야한다.
    • tfoot
      
      • tr+ : tr은 여러번 적어야한다.
    • tr 
      • (th|td)+ tr내부에는 th와 td를 엄청 여러번 적을 수 있다.
  • <tr>---3행 3열, 항목의 이름, table heading, 항목의 제목
    <th>번호</th>
    <th>이름</th>
    <th>연락처</th>
    </tr>
    <tr>     --- td에는 항목의 값을 입력한다. 
    <td>1</td>
    <td>홍길동</td>
    <td>010-4545-6565</td>
    </tr>
  • <table>
    <thead>
    <tr>
    <th>번호</th>
    <th>이름</th>
    <th>연락처</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>홍길동</td>
    <td>010-4545-6565</td>
    </tr>
    <tr>
    <td>1</td>
    <td>홍길동</td>
    <td>010-4545-6565</td>
    </tr>
    </tbody>
    </table>
    <table>
• • 정석적인 작성방법이다. 테이블의 제목과, 테이블의 바디부분을 지정하여 나중에 css로 꾸며준다. 
• colgroup
  • 각 컬럼의 폭을 지정한다. 
  • width = "*"은 값이 지정된 컬럼의 폭을 제외한 나머지 너비를 전부 차지한다는 의미이다. 
    • *는 2개가 들어가면 안된다. 
  • width을 %으로 설정해주면 크기가 가변적으로 설정이 된다. 
  • 각 컬럼의 한칸, 한칸의 너비를 지정해준다.
    • <colgroup>
      <col width="5%"/>
      <col width="*" />
      <col width="10%" />
      <col width="10%" />
      <col width="6%" />
      <col width="10%" />
  • tobody(tr>td*6)*3
    • tobody내부에 tr이 3개, td가 6개가 완성되게 하는 코드이다. 

표를 병합하기

• 가로 방향 병합
  
  • th, td의 colspan의 속성은 가로방향으로 차지하는 칸의 수를 지정하는 속성이다. 
  • <th colspan="2"></th>
  • <td colspan="3"></td>
  • tr은 행을 표현하기 때문에 사용할 수 없다. 
  • th와 td에서만 사용할 수 있다.
  • tr에 th와 td외의 태그는 사용할 수 없다. 
  •  <td colspan="2">1</td>
    • 첫번째 칸이 가로방향으로 2칸을 차지하겠다는 의미이다. 
    • 그러면 칸이 밀려나기 때문에 다른 행을 삭제해주어야한다. 
• 세로 방향 병합
  • th, td의 rowspan의 속성은 세로방향으로 차지하는 칸의 수를 지정하는 속성이다. 
  • <th rowspan="2"></th>
  • <td rowspan="2"></td>
    
  • 한칸씩 뒤로 밀린다. 그렇기 때문에 모든 행에서 한칸씩 사라져야 크기가 맞다.
• 가로 세로 방향 병합
  • colspan과 rowspan을 이용해서 병합을 할 수 있다. 
  • 그리고 튀어나온 행을 제거해준다. 

• •