html 공부 table

coh·2022년 6월 16일
0

html + css + javascript

목록 보기
3/4

table>cpation+(tr>td3)3 tab!!

table>caption+(thead>tr>th4)+(tbody>(tr>(th+td3))3)+tfoot(tr>th+td3)

emmet 이용해서 좀 더 편하게 코딩할 수 있습니다. 지금같은 경우는 오히려 이 방법이 좀 더 복잡해 보일 수도 있겠네요

th tag 속성으로 scope을 지정할 수 있는데 각 th가 행과 열 중 어떤 것의 머리가 되는지를 알려줍니다.

<table>
		<caption>웹개발 공부 기록</caption>
		<thead>
			<tr>
				<th scope="col">과목</th>
				<th scope="col"></th>
				<th scope="col"></th>
				<th scope="col"></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row">HTML</th>
				<td>60분</td>
				<td>60분</td>
				<td>0분</td>
			</tr>
			<tr>
				<th scope="row">CSS</th>
				<td>0분</td>
				<td>30분</td>
				<td>60분</td>
			</tr>
			<tr>
				<th scope="row">JS</th>
				<td>0분</td>
				<td>0분</td>
				<td>60분</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<th>총 시간</th>
				<td>60분</td>
				<td>90분</td>
				<td>120분</td>
			</tr>
		</tfoot>
	</table>

table을 만들고 열과 행을 병합하는 방법으로

colspan과 rowspan이 있습니다.

table은 반드시 표 용도로만 짜고 페이지 짜는 용도로 쓰지 않습니다.

profile
Written by coh

0개의 댓글