1. <table>, <tr>, <td>, <th> 태그 - 기본적인 표 만들기
기본형 :
<table>
<tr>
<th></th> <!-- 표에 제목 셀 만드는 태그입니다. 해당 셀에 들어가는 내용을 셀의 중앙에 배치하고 굵게 표시합니다.-->
<td>내용</td>
<td>내용</td>
</tr>
</table>
- 우리가 일상에서 자주 보는 표를 머릿속으로 상상해보세요. 가로, 세로로 각각 행과 열이 있고 그 안에 내용이 입력됩니다.
이런 표를 만들 때는 표를 만드는 태그와 행을 만드는 태그, 열을 만드는 태그가 각각 필요합니다.
이렇게 하나의 표를 만들기 위해서는 여러 개의 태그가 필요합니다.
2. 기본적인 표 만들기
우선 <table> 태그를 이용하여 표 전체 윤곽을 잡은 다음에 행(row)을 먼저 만들고 각 행마다 몇 개의 셀(cell)이 들어갈지 결정합니다.
예를 들어 2개의 행과 3개의 열을 가진 표를 만든다면 다음과 같은 순서로 만들면 됩니다.
1) <table> 태그를 이용하여 표 자리를 만듭니다.
|
1
2
3 |
<table>
<table> |
cs |
<사진 1.1>
2) <tr> 태그를 사용하여 2개의 행을 만듭니다.
|
1
2
3
4
5
6
7
8 |
<table>
<tr>
</tr>
<tr>
</tr>
</table> |
cs |
<사진 1.2>
3) <td> 태그를 사용하여 각 행마다 셀을 3개씩 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12 |
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table> |
cs |
<사진 1.3>
4) 각 셀에 들어갈 내용은 <td>와 </td> 사이에 입력합니다.
다음은 내용이 들어간 코드입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title><table>, <tr>, <td>, <th> 태그 사용 방법</title>
</head>
<body>
<table>
<tr>
<th>제목 셀</th>
<td>1행 2열</td>
<td>1행 3열</td>
<td>1행 4열</td>
</tr>
<tr>
<th>제목 셀</th>
<td>2행 2열</td>
<td>2행 3열</td>
<td>2행 4열</td>
</tr>
</table>
</body>
</html> |
cs |
<사진 1.4>
다음은 <사진 1.4> 결과 화면입니다.
<사진 1.4 결과 화면>
결과 화면을 보면 입력한 대로 출력이 되었지만 우리가 생각했던 표가 아닙니다. 왜냐하면 표를 구분 짓는 테두리 없이 표현이 되었기 때문입니다.
테두리를 표현하고자 한다면 <table> 태그 안에 border 속성으로 속성 값을 1을 주어야 합니다. 다음은 border 속성을 입력한 코드입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title><table>, <tr>, <td>, <th> 태그 사용 방법</title>
</head>
<body>
<table border="1">
<tr>
<th>제목 셀</th>
<td>1행 2열</td>
<td>1행 3열</td>
<td>1행 4열</td>
</tr>
<tr>
<th>제목 셀</th>
<td>2행 2열</td>
<td>2행 3열</td>
<td>2행 4열</td>
</tr>
</table>
</body>
</html> |
cs |
<사진 1.5>
다음은 결과 화면입니다.
<사진 1.5 결과 화면>
<table> 태그 안에 border 속성을 입력한 결과입니다. border 속성값으로 1을 입력했지만 숫자가 올라갈수록 테두리 색이 진하게 표현됩니다.
'Web Basic > HTML5' 카테고리의 다른 글
| [HTML5] <caption>, <figcaption>태그 사용 방법 (0) | 2018.03.20 |
|---|---|
| [HTML5] colspan, rowspan 속성 사용 방법 (2) | 2018.03.19 |
| [HTML5] <dl>, <dt>, <dd>태그 사용 방법 (0) | 2018.03.14 |
| [HTML5] <ul>, <ol>, <li>태그 사용 방법 (0) | 2018.03.12 |
| [HTML5] <span> 태그 사용 방법 (0) | 2018.03.11 |