728x90
반응형
SMALL
안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)
<!DOCTYPE html>
<html lang="en">
<head>
<title>표관련태그</title>
<!-- style 태그 안은 이제 CSS 영역 -->
<style>
/* CSS 영역의 주석 : html주석 안먹힘*/
/* # == id , 속성값 == tt */
#tt{
background-color : lightgray;
}
/* 현재 html문서안의 모든 thead 태그를 의미 */
thead{
background-color: magenta;
color : white;
}
tfoot{
background-color: darkgreen;
color: yellow;
}
</style>
<!--
표 : 문서에서 다량의 데이터를 정리해서 표현하고자 할 때 사용.
행과 열로 이루어져 있음.
표를 구성하는 태그는 <table>, <tr>, <th>, <td>
<table></table> : 기본적인 표를 생성해주는 태그
<tr></tr> : 표의 한 행을 나타내는 태그
<th></th> : 표의 제목셀을 나타내는 태그
<td></td> : 표의 일반셀을 나타내는 태그
-->
<h1>기본적인 표 만들기(4행 3열)</h1>
<table border = "1"><!-- border 속성 : 표의 테두리 두께 => 속성보다는 CSS로 표현하는게 더 좋긴함-->
<caption><b>웹 브라우저 종류</b></caption>
<!-- 테이블의 제목 추가(기본위치) -->
<tr>
<th width="130", height="30">브라우저명</th>
<th width="80">제조사</th>
<th width="200">홈페이지</th>
</tr>
<tr>
<td>Internet Explorer</td>
<td>MS</td>
</tr>
<tr>
<td>Chrome</td>
<td>Google</td>
</tr>
<tr>
<td>Firefox</td>
<td>Mozila</td>
</tr>
</table>
<hr>
<h1>표의 행과 열을 합치는 속성</h1>
<!--
셀(th, td)태그와 속성을 이용해서 행 또는 열을 합칠 수 있다.
colspan = "2" : 2개의 열을 합치기 (가로로병합)
rowspan = "2" : 2개의 행을 합치기 (세로로병합)
-->
<h3>이력서</h3>
<table border = "1">
<tr>
<td colspan="2" rowspan="2" width="130" height="130">사진</td>
<td width="80">이름</td>
<td width="200"></td>
</tr>
<tr>
<td>연락처</td>
<td></td>
</tr>
<tr>
<td width="70" height="50">주소</td>
<td colspan="3"></td>
</tr>
<tr>
<td height="200">자기소개</td>
<td colspan="3"></td>
</tr>
</table>
<br><br><br><br><br>
<h2>테이블 내에 구조 나누기</h2>
<table border="1">
<thead> <!-- 기능적으로 큰 의미는 없으나 볼 때 영역 구분이 편함 -->
<tr>
<th>이름</th>
<th>나이</th>
<th>주소</th>
</tr>
</thead>
<tbody id="tt">
<!--(tr>td*3)*3-->
<tr>
<td>홍길동</td>
<td>23</td>
<td>서울</td>
</tr>
<tr>
<td>김갑생</td>
<td>30</td>
<td>부산</td>
</tr>
<tr>
<td>ksy</td>
<td>33</td>
<td>서울</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">총 인원</th>
<td>3명</td>
</tr>
</tfoot>
</table>
</head>
<body>
</body>
</html>
728x90
반응형
LIST
'VsCode(HTML) > 1. HTML' 카테고리의 다른 글
| VsCode(HTML) - 목록관련태그 (0) | 2023.07.06 |
|---|---|
| VsCode(HTML) - 글자관련태그 (0) | 2023.07.02 |
| VsCode(HTML) - html 기본틀 만들기 외 입력, 생성 단축키 모음 (0) | 2023.07.02 |