HTML web2 18일차 - table태그

Front-end/HTML

by 본투비곰손 2023. 6. 7. 00:01

728x90

table태그

표를 만들어 주는태그

1. table

표의 시작을 알리는 태그 ul,section,form 과 같은 역할

2. caption

표의 제목을 나타내는 태그로 width의 갑이 없어도 표의 최대길이로 설정되며 글자가 중앙정렬 된다.

3. th

표의 서브 제목으로 작성된글자가 굵게 표시되며 중앙정렬 된다.

4. tr , td

행태그, 열태그

5. colspan

가로열을 병합해주는 태그로 <td colspan="값"> 과 같은 형식으로 사용한다.

6.rowspan

세로열을 병합해주는 태그로 <td rowspan="값"> 과 같은 형식으로 사용한다.

7. scope

th에만 사용하는 속성으로 가로 또는 세로열의 제목을 정의해준다.

scope="row" 가로 제목 정의 / scope="col" 세로 제목 정의( 브라우저가 명확하게 th성격을 인지)

<style>
		*{margin:0;padding:0;}
		td{border:2px solid black;width:150px;height:50px;}
		caption{border:2px solid black;height:50px;line-height:50px;}
	</style>
</head>
<body>
	<table>
		<caption>메인제목</caption>
		<tr>
			<th>서브제목1열</th>
			<th>서브제목2열</th>
			<th>서브제목3열</th>
			<th>서브제목4열</th>
			<th>서브제목5열</th>
		</tr>		
			
		<tr>
			<td>1행 1열</td>
			<td>1행 2열</td>
			<td>1행 3열</td>
			<td>1행 4열</td>
			<td rowspan="3">1행5열(3개행)<br>rowspan사용</td>
		
		</tr>	
		<tr>
			<td colspan="3">2행 3개열colspan사용</td>
			<td rowspan="2">2행 4열(2개행)<br>rowspan사용</td>				
		</tr>
		
		<tr>
			<td>3행 1열</td>
			<td>3행 2열</td>
			<td>3행 3열</td>
		</tr>
		<tr>
			<td>4행 1열</td>
			<td rowspan="2">2개행 2열<br>rowspan사용</td>
			<td>4행 3열</td>
			<td colspan="2">4행 2개열colspan사용</td>
		</tr>
		<tr>
			<td>5행 1열</td>
			<td>5행 3열</td>
			<td>5행 4열</td>
			<td>5행 5열</td>
		</tr>
	</table>
</body>
</html>

행을 합칠경우 앞쪽행 또는 열에 colspan 또는 rowspan을 적용하여주고 그만큼 다음 행이나 열에 td를 빼준다.

7. thead,tbody,tfoot 구조를 명확하게 하기 위해 작성해주는게 좋다.

thead-표안에서 웹사이트의 header부분처럼 상단부분 역할을 하는 태그 메인제목,서브제목등을 작성

tbody-표에서 본문의 내용을 담당하는 태그 시맨틱태그의 main과 같은 역할

tfoot-표에서 하단부를 담당하는 태그

8.border-collapse:collapse

테이블 태그는 td하나당 하나의 박스가 생성 되는데 border-collapse:collapse속성을 적용하면 외부 및 내부선이 이어지며 이중선이 정리된다.

<style>
		*{margin:0;padding:0;}
		td{border:2px dotted black;
				line-height:100px;text-align:center;
				width:200px;}
		
		table{border-collapse:collapse}
</style>
</head>
<body>
	<table>
		<caption>표 스타일</caption>
		<tr>
			<td>영화제목1</td>
			<td>영화제목2</td>
			<td></td>
		</tr>
		
		<tr>
			<td></td>
			<td>영화제목3</td>
			<td>영화제목4</td>
		</tr>		
	</table>
</body>

9.empty-cells:hide

테이블 태그는 내용이 비어있어도 박스가 생성되는데 empty-cells:hide속성을 적용하면 내용이 없는 박스는 사라진다.

<style>
		*{margin:0;padding:0;}
		td{border:2px dotted black;
				line-height:100px;text-align:center;
				width:200px;}
		    	table{empty-cells:hide}
	</style>
</head>
<body>
	<table>
		<caption>표 스타일</caption>
		<tr>
			<td>영화제목1</td>
			<td>영화제목2</td>
			<td></td>
		</tr>
		
		<tr>
			<td></td>
			<td>영화제목3</td>
			<td>영화제목4</td>
		</tr>		
	</table>
</body>

728x90

'Front-end > HTML' 카테고리의 다른 글

HTML-web2-심화 학습- background (0)	2023.06.10
HTML web2 19일차 - animation (0)	2023.06.07
HTML web2 17일차 - 스프라이트이미지 (0)	2023.06.06
HTML web2 16일차 - transform (0)	2023.06.05
HTML web2 15일차 - z-index (0)	2023.06.04