본문 바로가기

HTML5 테이블 태그

131ZIPDAN 2017. 5. 24.

HTML5 테이블 태그

table 태그 : 표(Table) 삽입

thead 태그 : 표의 머리(Table Head) 생성

thody 태그 : 표의 본문(Table Body) 생성

tfoot 태그 : 표의 꼬리(Table Foot)) 생성

tr 태그 : 표의 행(Table Row) 삽입

th 태그 : 표의 제목 요소(Table Header)) 생성

td 태그 : 표의 일반 요소(Table Data) 생성

간단한 표 만들어 보기.

<body>

<table border="1">
  
  <thead>
   
   <tr>
    
    <th></th>
    <th>1</th>
    <th>2</th>
    <th>3</th>
   </tr>
  </thead>
  
  <tbody>
   <tr>
    
    <td>1</td>
    <td>표</td>
    <td>생</td>
    <td>성</td>
   </tr>
   <tr>
    <td>2</td>
    <td>참</td>
    <td>쉽</td>
    <td>죠</td>
   </tr>
  </tbody>
</table>
</body>

셀의 영역 지정 태그

colspan 태그 : 셀의 너비 지정

rowspan 태그 : 셀의 높이 지정

앞의 표를 이용해서 셀의 영영만 다시 지정 해보기.

<body>
<table border="1">
  <thead>
   <tr>
          
    <th colspan="4">HTML5</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <-- rowspan 태그를 이용하여 셀의 높이를 지정 -->
    <td rowspan="2">안녕</td>
    <td>표</td>
    <td>생</td>
    <td>성</td>
   </tr>
   <tr>
    <td>참</td>
    <td>쉽</td>
    <td>죠</td>
   </tr>
  </tbody>
</table>
</body>

테이블 태그를 이용하여.

아래 이력서 테이블을 만들어 보자.

'Programming' 카테고리의 다른 글

HTML5 공간 분할 태그 (0)	2017.05.25
HTML5 이미지 태그 (0)	2017.05.25
HTML5 글자 태그 (0)	2017.05.23
HTML5 목록 태그 (0)	2017.05.23
HTML5 하이퍼링크 설정 (0)	2017.05.23

댓글

티스토리툴바