테이블 태그 : Table을 만들어 주는 Tag
Table : row(행), column(열)
참조
body 태그 안에서 쓰인다.
table 요소
tr : 행
th : 행의 타이틀(해더 선언), 굵은 글씨, 가운데 정렬
td : 열 테이블의 일반 데이터
caption : 표 제목
col width: 테이블 크기 지정
table 속성
border : 테이블 테두리
bgcolor : 테이블 배경 색 지정
style="width: 값" : 화면 비례 테이블 크기 지정
rules="rows" : 로우줄만 나오게 하기
td, tr, th 속성
rowspan : 로우 합치기
colspan : 컬럼 합치기
예제
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="4" bgcolor="bbcc00" style="width: 50%"
cellpadding="5" rules="rows">
<caption>Type1</caption>
<col width="100"><col width="100"><col width="70">
<tr>
<th>No.</th>
<th>Name</th>
<th>age</th>
</tr>
<tr>
<th>1</th>
<td>Kim</td>
<td>33</td>
</tr>
<tr>
<th>2</th>
<td>Lee</td>
<td>35</td>
</tr>
</table>
<br>
<table border="1" style="width: 50%">
<caption>Type2</caption>
<tr bgcolor="#f0ffff">
<td col width="100">No.</td>
<td col width="100">Name</td>
<td col width="70">age</td>
</tr>
<tr>
<td>1</td>
<td>Kim</td>
<td rowspan="2">33</td>
</tr>
<tr>
<td>2</td>
<td>Lee</td>
</tr>
</table>
</body>
</html>
실행화면
'IT > Html' 카테고리의 다른 글
| [Html] form 태그/입력양식태그/ input type/ action /textArea/ select /submit /checkbox /radio/search/id/class/name (0) | 2021.06.03 |
|---|---|
| [Html] 이미지 태그/scr/alt /외부 이미지 파일의 접근 경로 (0) | 2021.06.03 |
| [Html] 목록 태그(List)/ul/ol/li/dl/dt/dd (0) | 2021.06.03 |
| [Html] 제목 태그/본문 태그/앵커(Anchor) 태그/글자 태그/h/p/hr/br/pre/a/href/target/_blank (0) | 2021.06.03 |
| [Html] HTML정의 / 기본 용어 정리 / Html 문서 형식 (0) | 2021.05.26 |