HTML | Table 표

크롱·2023년 2월 24일
0

HTML

목록 보기
3/6

📒 Table

  • 데이터를 담은 표를 만들때 사용
    thead tbody - 헤더와 데이터 구분
    tr - table row 가로 행 : 새로운 줄 추가
    th - 제목 셀
    td - 데이터 셀

  • 가로 한 줄씩 만든다고 생각하자


📌 기본구조

<table><!--나 테이블 만들거임-->
	<thead>
	<tr> <!--제목-->
		<th>ID</th> 
		<th>이름</th>
		<th>개발분야</th>
	</tr> <!--table row 가로로 배치--> 
    </thead> 
	<tbody> <!--데이터 정보-->
		<tr>
			<td>0001</td>
			<td>김버그</td>
			<td>프론트엔드</td>
		</tr>
		<tr>
			<td>0002</td>
			<td>클옹</td>
			<td>프론트엔드</td>
		</tr>
	</tbody>
</table>

👉 결과 :

ID 이름 개발분야
0001 김버그 프론트엔드
0002 클옹 프론트엔드



📌 심화

  • th 에 범위 scope="row" / "col" 적기
    ex. 월화수목금 scope = "col"
    1 ~ 5교시 scope = "row"
  • rowspan : 셀 병합, 아래로 뚫림
    colspan : 옆으로 뚫림
    ex. rowspan="2" 를 했을 경우 다음 tr에서 td를 생략해야한다.
<html>
	<head>
		<meta charset="utf-8">
		<title>표 심화</title>
		<link rel="stylesheet" href="./style.css">
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th></th>
					<th scope="col"></th>
					<th scope="col"></th>
					<th scope="col"></th>
					<th scope="col"></th>
					<th scope="col"></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row">1교시</th>
					<td rowspan="2">왕초보 HTML &amp; CSS</td>
					<td>모각코</td>
					<td rowspan="2">왕초보 HTML &amp; CSS</td>
					<td>모각코</td>
					<td rowspan="2">왕초보 HTML &amp; CSS</td>
				</tr>
				<tr>
					<th scope="row">2교시</th>
					<td rowspan="2">Javascript 스킬업</td>
					<td rowspan="2">Javascript 스킬업</td>
					<!--rowspan 아래로우 뚫림
                        colspan 옆으로 뚫림-->
				</tr>
				<tr>
					<th scope="row">3교시</th>
					<td>Javascript 시작반</td>
					<td>Javascript 시작반</td>
					<td>Javascript 시작반</td>
				</tr>
				<tr>
					<th colspan="6" scope="row">점심시간</th>
				</tr>
				<tr>
					<th scope="row">4교시</th>
					<td>SASS 기초</td>
					<td rowspan="2">HTML &amp; CSS 포트폴리오</td>
					<td rowspan="2">오픈 세미나</td>
					<td rowspan="2">HTML &amp; CSS 포트폴리오</td>
					<td>SASS 기초</td>
				</tr>
				<tr>
					<th scope="row">5교시</th>
					<td>모각코</td>
					<td>모각코</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

출처: 김버그의 HTML CSS는 재밌다

profile
👩‍💻안녕하세요🌞

0개의 댓글