테이블 태그

삼전·2023년 5월 20일
0

태그

목록 보기
3/6

Table태그 안에 tr, th, td 이 세가지는 기억!
🔹tr: 테이블의 행, th:(열의)제목, td: 테이블의 열
🔹caption: 테이블의 제목
🔹colgroup: 열을 그룹화 아래의 예시로 두 열의 배경을 'green'색으로 페인팅

<!-- 테이블 태그: cellspacing은 '셀과 셀 사이'  -->
	<table border="2" cellpadding="10" cellspacing="10" width="1000">
		<caption>뉘신지</caption>
		<!-- <col> 태그의 span 속성은 <col> 요소로 합쳐질 열(column)의 개수를 명시합니다 -->
		<colgroup>
			<col span="2" style="background:green" />
			<col style="background:pink" />
			<col style="background:orange" />
		</colgroup>
		 <!-- tr:'행', th:'제목 셀', td:'열' -->
		<tr >
			<th width="50">No</th>
			<th width="250">이름</th>
			<th width="250">휴대폰 번호</th>		
			<th width="250">주소</th>		
		</tr>
		<tr height="50">
			<td>1</td>
			<td >김xxx</td>
			<td>010-2xxx-xxxx</td>
			<td>마포구 어디어디 </td>
		</tr>
		<tr height="100" style="background:yellow">
			<td >2</td>
			<td color="red">이xx</td>
			<td>010-3xxx-xxxx</td>
			<td>은평구 어디산다</td>
		</tr>
		<tr height="100" style="background:yellow">
			<td >3</td>
			<td color="red">오xx</td>
			<td>010-2xxx-xxxx</td>
			<td>강남구 어딘가에 있겠지</td>
		</tr>	
	</table>

결과

profile
풀스택eDot

0개의 댓글