-
2023년 11월 27일 HTML 학습, 실습 내용을 정리했다.
테이블 만들기
<table> : 테이블 생성.
<tr> : 표에 행 삽입. table row
<th> : 표의 제목 셀 생성. table heading . 테이블 맨 위에 생성되는 메타데이터를 표시할 때 사용하고, 자동으로 볼드 효과를 적용한다.
<td> : 표의 일반 셀 생성 . table data. 해당 컬럼 종류에 포함되는 데이터를 직접 넣는다.
<tbody> : 테이블의 실질적 데이터가 들어가는 부분 표시.
<thead> : 테이블의 메타데이터가 들어가는 부분 표시.
사용
<tr> </tr> 안에 <th> , <td>를 통해 데이터를 넣어 사용한다.
<table border = "10"> 태그와 속성을 이용해 테두리를 생성할 수 있다.
사용코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="10">
<thead>
<!-- 테이블 헤딩-->
<tr>
<!-- 테이블 헤딩의 행에 들어갈 내용들. 메타데이터. 진하게 표시된다-->
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회수</th>
</tr>
<!--테이블 헤딩 끝-->
</thead>
<tbody>
<!-- 진하게 표시된 행 밑 각 컬럼에 들어갈 데이터들-->
<tr>
<!-- 첫번째 행-->
<td>1번</td>
<td>월요알바</td>
<td>김건</td>
<td>11월27일</td>
<td>0</td>
</tr>
<tr>
<!-- 두번째 행-->
<td>2번</td>
<td>가기싫다</td>
<td>김건</td>
<td>11월27일</td>
<td>1</td>
</tr>
<tr>
<!-- 세번째 행-->
<td>3번</td>
<td>ㅠㅠ</td>
<td>김건</td>
<td>11월27일</td>
<td>2</td>
</tr>
<!-- 실제 데이터 입력 끝-->
</tbody>
<!-- 테이블 끝-->
</table>
</body>
</html>
마무리
thead와 tbody는 안써도 테이블이 만들어지기는 하나, 코드의 부분마다 구분을 확실하게 하여 가독성을 높이고, 상위 속성을 수정하면 하위 속성에도 모두 적용되어 편리하다고 한다.