반응형
SMALL
Table 요소
● HTML Table 모델
Tag 설명 <table> - 2차원 격자 모양의 표를 표시한다. (테이블을 만든다.) <tr> - Table Row, 표에서 행(Row) 구분한다. <th> - Table Header, 표 내부의 제목으로 사용한다. (생략 가능) <td> - Table Data, 표에서 열(Column) 구분한다. <caption> - 표의 상단 /하단에 제목을 적을 때 사용한다. (생략 가능)
- 기본적으로 가운데 정렬이지만, CSS로 정렬 방식 변경이 가능하다.<thead> -행 그룹 설정할 때 제목 그룹을 설정한다. (선언 위치와 무관하게 데이터 상단 고정) <tbody> - 행 그룹 설정할 때 내용 그룹을 설정한다. (여러 번 사용 가능) <tfoot> - 행 그룹 설정할 때 꼬리 그룹을 설정한다. (선언 위치와 무관하게 데이터 하단 고정) ● 셀 합치기
속성 설명 colspan - 두 개 이상의 열(Column)을 하나로 합치기 위해 사용한다. rowspan - 두 개 이상의 행(Row)을 하나로 합치기 위해 사용한다. ● Table 스타일
- HTML 4.01까지는 talbe 스타일을 위한 속성이 제공되었으나, HTML5부터는 스타일 속성들을 더 이상 지원하지 않고 CSS에서 적용한다.
● 소스코드<table border="1"> <caption align="top">[Table caption]</caption> <thead> <tr> <th>thead1</th> <th>thead2</th> <th>thead3</th> </tr> </thead> <tfoot> <tr> <td>tfoot1</td> <td>tfoot2</td> <td>tfoot3</td> </tr> </tfoot> <tbody> <tr> <td>tbody</td> <td>tbody</td> <td rowspan="2">rowspan</td> </tr> <tr> <td colspan="2">colspan</td> </tr> </tbody> </table>● 결과 (<body> 내부에 입력)
[Table caption] thead1 thead2 thead3 tfoot1 tfoot2 tfoot3 tbody tbody rowspan colspan
HTML List
HTML List
HTML 기본 문법!!! ● 기회는 준비된 자에게 찾아온다.
han-hoon.tistory.com
기회는 준비된 자에게 찾아온다.
반응형
LIST
'Programming > HTML' 카테고리의 다른 글
| [HTML] HTML 마크업 요소 (링크&iframe) (0) | 2022.03.14 |
|---|---|
| [HTML] HTML 마크업 요소 (이미지) (0) | 2022.03.14 |
| [HTML] HTML 마크업 요소 (포맷팅&목록형) (0) | 2022.03.14 |
| [HTML] HTML 기본 (0) | 2022.03.14 |
| [HTML] HTML의 특징 (0) | 2022.03.13 |
댓글