예제는 '자유게시판'을 테이블로 만들어보는 것이다.
| 자유게시판 | ||||
| 번호 | 제목 | 작성자 | 작성일 | 조회수 |
| 3 | 3등! | 펭수 | 2020-12-01 | 10 |
| 2 | 2등! | 펭수 | 2020-12-01 | 25 |
| 1 | 1등이다! | 펭수 | 2020-11-30 | 20 |
우선 첫 번째, 제목 '자유 게시판'은 헤드라인크기로 <h1></h1>태그를 사용하여 넣어준다.
그 후 table태그를 만들고 그안에 thead태그를 이용하여 tr로 줄을 만들고 th로 칸을 만들어 차례대로 입력을 해준다.
th태그로 번호, 제목, 작성자, 작성일, 조회수를 만들고 thead태그를 닫고
tbody태그를 하여 tr태그로 줄을 만들고 역시나 차례대로 3등부터해서 th태그로 3, 3등!, 펭수, 2020-12-01, 10을 입력.
그 외 아래 두 줄도 같이 반복해서 넣어준다.
그리고 이렇게 하면 제목 자유게시판이 왼쪽정렬로 되어있는데 이때 사용하는데 div태그의 align옵션의 center이다.
그렇게 만들면 기본적인 제목(자유게시판)의 가운데 정렬까지 가능하다.
또한 아래 제목칸(3등!, 2등!, 1등이다!)를 늘릴때는 th태그로 제목이 되어있는데 그 태그에 <th width="50"또는"50%"또는 200, 300> 등 다양하게 집어넣을 수 있다.
그리고 위에보면 자유게시판은 가운데로 정렬되었고 이제 테이블을 보자면
제목아래(3등!, 2등!, 1등이다!)는 왼쪽정렬 그 외에는 모두 오른쪽 정렬이다.
이럴땐 어떻게 보면 당연한거지만 어려울 수도 있는데, 애초에 td칸에 있는 모든 태그내의 내용들은 tr에 속해있고,
그 tr들은 tbody에 속해있다. 그래서 전체 가운데정렬을 할땐, td에 일일히, tr에 일일히 넣는것 보단 깔끔하게 tbody에
<tbody align="center">해주면 전체 가운데정렬이 된다. 하지만 td에서도 제목영역칸만 왼쪽정렬하는것은 한번에 하기 어렵다. 왜냐하면 속해있는것이아닌 개체같은 느낌으로 있기에, 그래서 Ctrl을 누르고 커서를 움직여 한번에 작성해주면 조금은 더 편리하다. 그렇게하면 더없이 깔끔한 식을 작성할 수 있다.
+) Ctrl+d를 누르면 행을 복사하게 된다.
위 테이블을 만든 식은 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>자유 게시판</title>
</head>
<body>
<div align="center">
<h1>자유 게시판</h1>
<table border="1" width="600">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회수</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>3</td>
<td align="left">3등!</td>
<td>펭수</td>
<td>2020-12-01</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td align="left">2등!</td>
<td>펭수</td>
<td>2020-12-01</td>
<td>25</td>
</tr>
<tr>
<td>1</td>
<td align="left">1등이다!</td>
<td>펭수</td>
<td>2020-11-30</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
'HTML' 카테고리의 다른 글
| [HTML#09] TABLE 태그 (0) | 2020.12.09 |
|---|---|
| [HTML#08] LIST 태그 (0) | 2020.12.09 |
| [HTML#07] HTML DIV태그, P태그 (0) | 2020.12.04 |
| [HTML#06] HTML A태그 (0) | 2020.12.04 |
| [HTML#05] HTML IMG태그 (0) | 2020.12.04 |