반응형
이번에 알아볼 기본 태그는 <table> 태그입니다. 표를 만드는 대표적인 태그로 <th>, <tr>과 <td> 태그를 이용해서 표의 행과 열, 너비/높이 등을 설정할 수 있습니다. 각 각의 태그가 어떤 역할을 하고, 어떤 구조로 표가 만들어지는에 대해서 알아보겠습니다.
기본 구조
표를 만드는 태그의 기본 구조입니다. <tr> 태그는 행, <th>, <td> 태그는 열을 정의하는 태그입니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>테이블 태그에 대해서 알아보기</title>
</head>
<body>
<table>
<tr>
<th>표 제목1</th>
<th>표 제목2</th>
</tr>
<tr>
<td>표 내용1</td>
<td>표 내용2</td>
</tr>
</table>
</body>
</html>
표는 어디 간 거지?
위의 코드를 실행해보면 실제로 표는 온데간데없고, 글자만 두둥실 떠다니는 것을 볼 수 있습니다. 이상한 게 아니고 정상입니다! 표의 테두리를 설정해주기 위해선 <style> 태그를 사용해야 합니다. <style> 태그를 이용하면 시각적으로 다양한 기능을 사용할 수 있습니다. 이번 포스팅에서는 가볍게 표의 테두리를 설정하는 방법만 알고 넘어가겠습니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>테이블 태그에 대해서 알아보기</title>
<style>
table {border:1px solid black;}
td,tr,th {border:1px solid red; padding:1px;}
</style>
</head>태그명 {테두리 두께 선 종류 선 색깔}
'<body> 속성에 들어가는 <table> 태그는 전부 다 검은색(black) 실선(solid) 두께 (border)가 1px인 테두리로 설정하겠다' 라는 의미입니다.
유동적인 모양의 표를 만들고 싶어요.
위와 같은 표의 형태를 만들어보겠습니다. 우선 표의 너비와 높이를 마음대로 바꾸기 위해서는 colspan 과 rowspan을 사용해야 합니다. colspan은 열, rowspan은 행의 크기를 설정할 수 있습니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>테이블 태그에 대해서 알아보기</title>
<style>
table {border:1px solid #aaa; width: 500px; height: 200px; text-align: center;}
td,tr,th {border:1px solid red; padding:1px;}
</style>
</head>
<body>
<table>
<tr>
<th colspan="4">A</th>
</tr>
<tr>
<td rowspan="3">B</td>
<td rowspan="2">C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>F</td>
<td>G</td>
</tr>
<tr>
<td colspan="2">H</td>
<td>I</td>
</tr>
</table>
</body>
</html>
반응형
'웹 디자인 > HTML · CSS' 카테고리의 다른 글
| [HTML·CSS] div태그로 화면 공간 분할하기 (0) | 2022.10.05 |
|---|---|
| [HTML/CSS] <video> 태그로 간단한 동영상 설정하기(iframe 태그) (1) | 2021.12.18 |
| [HTML/CSS] a 태그와 이미지 태그 사용해보기 (map 태그) (0) | 2021.12.16 |
| [HTML/CSS] 기본적인 글꼴 태그 알아보기 (0) | 2021.12.08 |
| [HTML/CSS] 필수 태그와 주석 처리 알아보기 (html, head, body 등) (0) | 2021.12.07 |