시작에 앞서 아주 간단한 html 구조를 정리해보겠다!
우선 html 구조는 이렇게 된다고 이해하면 편하다.
<!DOCTYPE HTML>
<html>
<head>
<!-- 문서정보 지정-->
<title>
HTML 문서
</title>
</head>
<body>
<!-- 웹페이지에서 실제 보여지는 부분-->
</body>
</html>
엄청 간단하지 않은가?(사실 조금만 표만 그려도... 화가 날 것이다...)
여기서 헤드 부분이 헷갈릴 수 있는데 실제 실행하면, 위에 헤드에 저장된 정보로 html 문서라고 열리는 것을 볼 수 있다!
그렇다면, 이제는 표를 그려보자!
참고로 나는 예전에 <table border="1"> 를 이용하여 테이블 테두리를 그렸는데, 요즘은 style를 지정해서 그린다고 한다(구글링, gpt)
코드를 살펴보자! 나는 2행 2열인 표를 웹에 나타내기 위해 코드를 짰다.
그전에 태그들에 간단히 정리하자면, 밑의 표처럼 볼 수 있따.
| <table> ~</table> | 표 전체 |
| <tr> ~</tr> | 행 |
| <td>~ </td> | 셀 |
| <th> </th> | 제목 셀 |
+ rowspan -> 행 합치기, colspan -> 열 합치기!
<!DOCTYPE HTML>
<html>
<head>
<!-- 문서정보 지정-->
<title>
TABLE 생성하기!
</title>
<style>
table {
border-collapse: collapse; /* 테두리 겹침 방지 */
width: 50%; /* 테이블 크기 조정 */
}
th, td {
border: 1px solid black; /* 테두리 추가 */
padding: 10px; /* 셀 안쪽 여백 */
text-align: center; /* 가운데 정렬 */
}
th {
background-color: lightgray; /* 제목 행 배경색 */
}
</style>
</head>
<body>
<!-- 웹페이지에서 실제 보여지는 부분-->
<h3> <!-- 테이블의 이름을 지정할 때, 사용-->
2행 2열 테이블
</h3>
<hr>
<table>
<tr>
<th> 아이디</th> <th> 비밀번호</th>
</tr>
<tr>
<td> id</td> <td>password </td>
</tr>
</table>
</body>
</html>
실행화면
이렇게 간단한 웹페이지 html에 대해 정리해볼 수 있었다.