반응형
⚫table 태그 : 표(Table)를 출력하기 위한 태그
=> 하위태그 : tr 태그
🔘tr 태그 : 행(Row)를 출력하기 위한 태그
=> 하위태그 : th 태그, td 태
=> 모든 tr 태그의 셀의 갯수는 동일하게 작성하는 것을 권장
🔘th(td) 태그 : 열(Column)를 출력하기 위한 태그
=> th 태그와 td 태그의 태그내용을 열(Column)에 출력 - 셀(Cell)
=> th 태그는 태그내용을 가운데 정렬하여 굵게 출력 - 컬럼명 출력
=> 셀의 폭은 태그내용에 의해 자동 변경
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>table 태그</h1>
<hr>
<!-- border 속성 : 0(외곽선 미출력 - 기본) 또는 1(외곽선 출력)을 속성값으로 설정 -->
<!-- => 상위태그에 적용된 디자인 관련 속성은 하위태그로 상속태그로 상속되어 적용 -->
<table border="1">
<tr>
<th>번호</th><th>이름</th><th>주소</th>
</tr>
<tr>
<td>1000</td><td>홍길동</td><td>서울시 강남구</td>
</tr>
<tr>
<td>2000</td><td>임꺽정</td><td>수원시 팔달구</td>
</tr>
<tr>
<td>3000</td><td>전우치</td><td>인천시 월미구</td>
</tr>
</table>
</body>
</html>
실행결과⬇️
반응형
'Frontend > HTML' 카테고리의 다른 글
[HTML]07_a 태그 (0) | 2023.12.25 |
---|---|
[HTML]06_tbody 태그 & style 태그 & caption 태그 (0) | 2023.12.25 |
[HTML]04_dl 태그 (0) | 2023.12.24 |
[HTML]03_ul태그 & ol 태그 & li 태그 (0) | 2023.12.24 |
[HTML]02_img 태그 (0) | 2023.12.24 |