2025.01.27 오랜만에 HTML 공부
표 작성하기
표를 그리기 위해서는 여러 태그를 조합해서 코드를 작성해야 한다.
- table : 표의 시작과 끝
- tr(table row) : 표의 하나의 행
- th, td : 표의 열
테이블의 시작을 끝을 묶어주는 table 태그가 있다. 각각의 열을 td 태그로 묶어주고 한 줄을 tr 태그로 한 번 더 묶어줌으로써 하나의 표고의 한 줄이 이루어지게 된다. 이 여러 줄이 모여 테이블이 형성되는 것이다.
4 X 3 테이블의 경우 tr 태그는 3개, table 태그는 1개, td 태그는 12개가 필요하다.
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
...
</table>
코드는 예시로 든 것이고 이런식으로 반복이 계속되고 마지막에 table 태그가 닫혀 표 생성이 마무리된다.
<td> 태그 대신에 <th> 태그를 입력하면 th는 table heading을 뜻하는 것으로 td 태그를 썼을 때보다 더 굵게 표시된다. bold 형식을 쓴다고 생각하면 편할 것 같다. 보통 td로 쓰긴 하지만 th를 쓰면 강조할 때 사용이 가능하다.
행/열 합치기
rowspan : 합칠 행의 수 | colspan : 합칠 열의
<table>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
rowspan은 합칠 행의 수고 반대로 colspan(column span)은 합칠 열의 수다. 이 태그들은 th나 td 태그에서만 사용이 가능하다.
행은 아래로 합쳐지는 것이고 열은 옆으로 합쳐지는것이라 생각하면 된다.
표 만들기
<html>
<head>
<meta charset="utf-8">
<title>여행계획</title>
</head>
<body>
<h1>발리 여행 계획</h1>
<hr/>
<table border="1"> // 외곽선을 준다는 뜻
<tr>
<th>일</th>
<th>시간</th>
<th>여행지 및 활동</th>
<th>
<a href="https://~~ 링크 넣기">내용</a>
</th>
</tr>
<tr>
<td>1일째</td>
<td>09:00</td>
<td>공항</td>
<td><img src="./images/hotel.jpg"></td>
</tr>
<tr>
<td>1일째</td>
<td>13:00</td>
<td>공항</td>
<td><img src="./images/hotel.jpg"></td>
</tr>
</table>
</body>
</html>'Front-End' 카테고리의 다른 글
| [CSS] 기초 공부 1 (1) | 2025.01.29 |
|---|---|
| [HTML] 기초 공부 5 (3) | 2025.01.28 |
| [HTML] 기초 공부 3 (0) | 2025.01.01 |
| [HTML] 기초 공부 2 (1) | 2024.12.29 |
| [HTML] 기초 공부 (1) | 2024.12.28 |