[HTML] 표작성 (표 크기 / 정렬 / 합치기 colspan, rowspan)

1) 표 크기 (table) cell, column (칸), row (줄)

<table border='1' width='250' height='200'>
<tr><td>cell1</td><td>cell2</td><td>cell3</td></tr>
<tr><td>국어</td><td>영어</td><td>수학</td></tr>
<tr><td>달러</td><td>원화</td><td>엔화</td></tr>
</table>

 

 

 

 

 

2) 정렬 : 가로(align), 세로(valign)

<table border='1' width='300' height='300'>
<tr>
 <td align='left'>종로구</td>
 <td align='center'>강남구<td>
 <td align='right'>마포구<td>
</tr>
<tr>
 <td valign='top'>박지성<td>
 <td valign='center'>손흥민<td>
 <td valign='bottom'>김연아<td>
</tr>
</table>

<table>
<tr bgcolor='#99ccff'>
 <th>개<th>
 <th>소<th>
</tr>
<tr> 
 <td align='right' valing='bottom'>강아지<td>
 <td>송아지<td>
</tr>
</table>

 

 

 

 

 

⊙ <tr> : 그 줄이 다 적용

⊙ <td> : 그 칸에만 적용

⊙ bgcolor : 배경색 적용

⊙ <th> : <td>와 똑같이 셀을 가리키지만 글씨가 진하게 나옴

 

3) thead, tbody, tfoot

 ⊙ <thead> : 표의 머리

 ⊙ <tbody> : 표의 몸통

 ⊙ <tfoot>   : 표의 꼬리

 ⊙ thead와 tfoot은 표에서 한 번씩만 올 수 있고, tbody는 여러번 나올 수 있다

 ⊙  tfoot은 반드시 thead보다 뒤에 와야 한다.

<table border="1">
  <thead>
   <tr>
    <th>Month</th>
    <th>Saving</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>January</td>
    <td>$100</td>
   </tr>
   <tr>
    <td>February</td>
    <td>$80</td> 
   </tr>
  <tfoot>
   <tr>
    <td>Sum</td>
    <td>$180</td>    
   </tr>
  </tfoot>  

  

 

4) 셀 합치기

 ⊙ 가로 colspan

<tr>
  <td colspan = "  "></td>    → 합칠 칸의 개수만큼 숫자를 적고 다른 칸은 없애줘야 함
</tr>

<table border="1">
<tr>
 <td colspan="2">ㄱ</td>    <!-- 2칸이 1칸에 해당, 때문에 합쳐진 한 개 <td></td> 삭제-->
 <td>ㄴ</td>
</tr>
<tr>
 <td>ㄷ</td>
 <td>ㄹ</td>
 <td>ㅁ</td>
</tr>
<tr>
 <td colspan="3">ㅂ</td>    <!-- 3칸이 1칸에 해당, 때문에 합쳐진 두 개 <td></td> 삭제-->
</tr>
</table>

 

 

  ⊙ 세로 rowspan : 위에서 내려오는 것이 아니라 아래에서 올라오는 식

<table border="1" width="300">
  <tr>
  	<td rowspan="2">가</td> <!-- 세로 2줄 합치기, 때문에 두 번째 <tr>의 <td>를 지워 줄의 개수를 줄여야함  -->
  	<td>나</td> 
  	<td>다</td>
  </tr>
  <tr>
  	<td>라</td>
  	<td rowspan="2">마</td>
  </tr>
  <tr>
  	<td>사</td>
  	<td>아</td>
  </tr>  
</table>

 

  ⊙ colspan & rowspan

<table border="1" width="300" height="200">
  <tr>
    <td colspan="2">가</td>
    <td rowspan="4">나</td>
    <td>다</td>
    <td>라</td>    
  </tr>
  <tr>
    <td>마</td>
    <td>바</td>
    <td>사</td>
    <td>아</td>    
  </tr>
    <tr>
    <td colspan="2" rowspan="2">ㄱ</td>
    <td>ㄴ</td>
    <td>ㄷ</td>    
  </tr>
  <tr>
    <td>ㄹ</td>
    <td>ㅁ</td>
  </tr>
  <tr>
    <td>ㅂ</td>
    <td>ㅅ</td>   
    <td colspan="3">ㅇ</td> 
  </tr>
</table>