How to make table with HTML
HTML로 표(테이블) 만드는 법
테이블 안에 있는 블럭들을 가로로는 행 Row이라고 부르며 세로로는 열 Column로 부릅니다.
HTML에서 표를 만들 때는 <table></table> 태그를 사용합니다.
<table> 태그 안에 <tr></tr> 태그를 사용하면 테이블의 행 하나가 생성됩니다.
이렇게 row와 column이 하나인 table이 완성됩니다.
<tr>태그 안에서는 <td></td>를 사용해서 정보를 입력합니다.
(tr은 표의 행을 뜻하는 tablerow의 약자입니다)
<table>
<tr>
<td>tablerow</td>
</tr>
</table>
tablerow |
HTML 테이블 열 늘리는 법
1 오른쪽에 2라는 정보를 담은 열을 만들고 싶다면 어떻게 하면 될까요?
<tr> 태그 안에 있는 1에서 엔터 치시고 2를 다음 줄에 입력해주면 됩니다.
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
1 | 2 |
HTML 테이블 행 늘리는 법
1과 2라는 정보가 담긴 행 아래에 3과 4라는 두 개의 열을 가진 행을 만들어보겠습니다.
<tr> 태그를 하나 더 입력해주세요
두번째 태그에는 숫자 3과 4를 각각 다른 줄에 삽입했습니다.
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
1 | 2 |
3 | 4 |
그러면 이렇게 행이 하나 더 늘어난 것을 볼 수 있습니다.
이제 잘 아시겠죠?
이걸 조합하면 아래와 같은 테이블을 만들 수 있습니다.
<table>
<tr>
<td>1rowLeft</td>
<td>1rowRight</td>
</tr>
<tr>
<td>2rowLeft</td>
<td>2rowRight</td>
</tr>
<tr>
<td>3rowLeft</td>
<td>2rowRightt</td>
</tr>
</table>
1rowLeft | 1rowRight |
2rowLeft | 2rowRight |
3rowLeft | 3rowRight |
Table의 head 입력하기
추가적으로 이번에는 각 열을 설명해주는 head를 달아보겠습니다.
<table> 태그 안에 <thead> 태그를 사용해서 table head를 만듭니다.
그 안에 담긴 정보들에는 <th> 태그를 사용해주세요.
Table의 body 입력하기
<table> 태그 안에 <tbody> 태그를 사용해서 table body를 만듭니다.
그 안에 담긴 정보들에는 <td> 태그를 사용해주세요.
<table>
<thead>
<tr>
<th>Dates</th>
<th>Work</th>
</tr>
</thead>
<tbody>
<tr>
<td>2014-2017</td>
<td>ROK Air Force</td>
</tr>
<tr>
<td>2018-2020</td>
<td>Government Worker</td>
</tr>
</tbody>
</table>
Dates | Work |
2014-2017 | ROK Air Force |
2018-2020 | Government Worker |
지금까지 간략하게 HTML에서 표(테이블) 만드는 법을 알아봤습니다.
모쪼록 이 글이 많은 분들께 도움이 되었기를 바랍니다.
'Development > Web' 카테고리의 다른 글
Udemy Web Development Course 완강 (0) | 2021.01.12 |
---|---|
20-12-09 개발자에 도전하다 (0) | 2020.12.09 |