05. 테이블 태그

 

1. 테이블 태그

여러 종류의 테이블을 보기 좋게 정리하여 보여주는 표를 작성

 

 

• 기본형식

<table> <tr> <td>셀1</td> <td>셀2</td> <td>셀3</td> </tr> <tr> <td>셀1</td> <td>셀2</td> <td>셀3</td> </tr> <tr> <td>셀1</td> <td>셀2</td> <td>셀3</td> </tr> </table>

<table>로 시작하고 </table>로 끝냄 <tr></tr>로 행을 생성, <td></td>로 셀을 생성 <th></th>는 셀의 제목, 제목을 가운데 정렬, 굵은 글씨

 

 

• 셀 모양이 보이지 않음

<table> <tr> <td>첫번째 셀</td> </tr> </table>

 

 

 

• border, witdh 속성주면 셀모양이 보임

<table border="1" width="300"> <tr> <td>첫번째 셀</td> </tr> </table>

 

• 행 3 열 2 테이블 만들기

<table border="1"> <tr> <th>첫번째 셀</th><th>두번째 셀</th> </tr> <tr> <td>세번째 셀</td><td>네번째 셀</td> </tr> <tr> <td>다섯번째 셀</td><td>여섯번째 셀</td> </tr> </table>

 

 

• colspan 태그 - 행 합치기 
  <td colspan ='합칠 행의 갯수'>
  

<table border="1"> <tr> <th colspan="2">첫번째 셀</th> </tr> <tr> <td>세번째 셀</td><td>네번째 셀</td> </tr> <tr> <td>다섯번째 셀</td><td>여섯번째 셀</td> </tr> </table>

 

 

• rowspan 태그 -  열 합치기  
  <td rowspan='합칠 열의 갯수'>

<table border="1"> <tr> <th>첫번째 셀</th><th>두번째 셀</th> </tr> <tr> <td rowspan="2">세번째 셀</td><td>네번째 셀</td> </tr> <tr> <td>여섯번째 셀</td> </tr> </table>

 

• 열과 행을 합친 표 만들어보기

<table border="1" width = '200'> <tr> <td colspan="3">셀1</td> </tr> <tr> <td rowspan="3">셀2</td><td>셀3</td><td rowspan="3">셀4</td> </tr> <tr> <td>셀5</td> </tr> <tr> <td>셀6</td> </tr> </table>

 

• colgroup 태그,  caption 태그

<table> <caption>수강생 리스트</caption> <colgroup> <col style="width: 100px; background-color: aqua;"> <col style="width: 200px; background-color: salmon;"> <col style="width: 300px; background-color: greenyellow;"> </colgroup> <tr> <th>이름</th> <th>연락처</th> <th>주소</th> </tr> <tr> <td>김사과</td> <td>01011111111</td> <td>서울시 서초구 양재동</td> </tr> <tr> <td>반하나</td> <td>01022221111</td> <td>서울시 강남구 역삼동</td> </tr> <tr> <td>오렌지</td> <td>01020202020</td> <td>서울시 동작구 사당동</td> </tr> </table>

colgroup 태그 - 컬럼(th 또는 td)에 적용할 스타일을 설정할 수 있도록 함 caption 태그 - 표에 제목을 붙일 때 사용 - 기본 위치는 표의 상단 중앙