주요 태그_2

1 minute read


주요 태그 2

오랫동안 사용돼온 태그나 사용빈도가 높은 태그들을 정리한다.



table

표를 만드는 태그이다.

<table border="2">
  <thead>
    <tr>
        <th>이름</th> <th>성별</th> <th>주소</th> <th>회비</th> 
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>bak</td> <td>male</td> <td>busan</td> <td>1000</td> 
    </tr>
    <tr>
        <td>kim</td> <td>female</td> <td>seoul</td><td>500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
        <td>합계</td> <td></td> <td></td> <td>1500</td> 
    </tr>  
  </tfoot>
</table>
이름 성별 주소 회비
bak male busan 1000
kim female busan500
합계 1500

표의 구조

<table border=~> : table 태그의 속성 중 border는 표의 테두리 두께를 설정한다.

<thead> : 표의 머리행을 지정한다. 코드의 위치가 어디든지 태그로 묶이면 항상 표의 최상단에 위치하게 된다.

<tbody> : 표의 본문에 해당하는 영역을 지정한다.

<tfoot> : 표의 바닥으로 지정한다. 이 태그로 묶으면 코드의 중간에 있어도 항상 표의 맨 아래에 위치한다.

<th> : 표의 머리를 강조하여 표시한다.

<td> : table data의 줄임말로 표에 들어갈 데이터를 정하는 태그이다. 이 데이터의 수 만큼 표의 열이 만들어진다.

<tr> : table row의 줄임말로 표의 행을 표현한다. td를 묶어서 하나의 행으로 만든다.

셀 병합

표를 합친다.

이름 성별 주소 회비
bak male busan 1000
kim female 500
합계 1500
<tr>
    <td>bak</td> <td>male</td> <td rowspan="2">busan</td> <td>1000</td> 
</tr>

<tr>
    <td colspan="3">합계</td>  <td>1500</td> 
</tr> 

<td rowspan=”~”> : 열을 합친다. 합치려는 열의 td 태그 안의 속성으로 입력한 숫자만큼 칸을 합친다.

<td colspan=”~”> : 행을 합친다. 합치려는 행의 td 태그 안의 속성으로 입력한 숫자만큼 칸을 합친다.