[HTML/CSS] 테이블 만들기

개인적으로 HTML에서 테이블을 어떻게 만드는지를 정리한 글입니다. (Revised: 2020/10/01). 참고한 레퍼런스들은 아래에 있습니다.

1. 테이블의 요소

HTML에서 테이블을 만들기 위해서 필요한 요소들은 다음과 같다;

<table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>, <caption> 

1) HTML에서 기본적인 테이블을 만드는 순서

    ■ <table>태그를 이용하여 만들 테이블을 정의
    ■ <tr> 태그를 사용하여 테이블에서 사용할 행들을 선언
    ■ <tr> 태그 내부에 <td>태그를 사용하여 나타낼 테이터/셀 칸들을 정의 >

2) 요약

    ■ <table> : 작성할 테이블을 정의
    ■ <tr>: 작성할 테이블의 행을 정의 (table row)
    ■ <th>: 작성할 테이블의 열의 제목을 정의 (table headline)
    ■ <td>: 작성할 테이블 내의 데이터가 들어갈 셀을 정의 (table data)
    ■ <thead>/<tbody>/<tfoot>: 각 열의 의미에 따라 테이블을 구분
    ■ <caption> : 테이블의 표 제목을 정의

---

 

Table 1. HTML내 테이블을 만들기 위한 기본적인 태그들

태그	설명
<tr>	▪ 테이블의 가로줄 생성    ▪ <tr></tr> 태그를 사용
<td>	▪ 각 테이블 안의 데이터를 기입할 Cell을 생성    ▪ <td></td>태그를 사용하며, 각각의 태그들은 각각의 세로줄에 대응이 된다.    ▪ <td></td> 태그는 <tr></tr> 태그 내부에 존재해야 한다.    ▪ Default 값으로 Regular, Left-aligned로 설정됨.
<thead> <tbody> <tfoot>	▪ <thead>, <tbody>, <tfoot> 태그를 사용하여, 테이블의 머리 (테이블의 첫 행), 몸통 (테이블의 본문) 그리고 요약을 명시적으로 설정할 수 있다.    ▪ <thead>, <tbody>, <tfoot> 태그는 <table> 태그의 하위, <tr> 태그의 상위에 위치한다.    ▪ 사용하는 방법       (1) 가장 위쪽의 <tr> 태그 부분을 <thead>, <thead> 태그로 감싸줌.       (2) <thead> 로 감싸진 부분의 <tr> 태그를 <th> 태그로 변경함.       (3) 그 이외의 부분은 <tbody> 태그로 묶어서 테이블의 몸통 부분을 나타날 수 있음.
<th>	▪ <thead> 태그 내부에 존재하며, <th >에 대응되는 열의 제목을 표시한다.    ▪ Default 값으로 Bold, Centered로 설정됨.
<caption>	▪ 표의 제목을 작성함.    ▪ <table> 태그의 바로 뒤에 붙여서 사용함.

3) 예제

(a) 예제-1

   ▪ 코드

<table border="1">
    <tr>
    	<td align="center"> data </td>
    </tr>
</table>

   ▪ 결과

data

(b) 예제-2

   ▪ 코드

<table border="1">
    <tr>
    	<td> (1,1) </td>
        <td> (1,2) </td>
    </tr>
    <tr>
    	<td> (2,1) </td>
        <td> (2,2) </td>
    </tr>
</table>

   ▪ 결과

(1,1)	(1,2)
(2,1)	(2,2)

(c) 예제-3

   ▪ 코드

<table>
    <thead>
        <tr>
    	    <th> head_column 1 </th>
            <th> head_column 2 </th>
            <th> head_column 3 </th>
        </tr>
    </thead>    
    <tbody>
        <tr>
    	    <td> data_(1,1) </td>
            <td> data_(1,2) </td>
            <td> data_(1,3) </td>
        </tr>
        <tr>
    	    <td> data_(2,1) </td>
            <td> data_(2,2) </td>
            <td> data_(2,3) </td>
        </tr>
    </tbody>    
</table>

   ▪ 결과

head_column 1	head_column 2	head_column 3
data_(1,1)	data_(1,2)	data_(1,3)
data_(2,1)	data_(2,2)	data_(2,3)

2. 테이블의 속성 (디자인과 관련)

Table 2. HTML내 테이블 디자인과 관련된 태그들

속성	설명
align	▪ 정렬을 지정한다. (left, center, right)    ▪ 사용방법: ex) align=”left”
border	▪ 테두리 선의 두께를 지정한다.    ▪ border=”number”    - 숫자가 높을수록 테두리가 두꺼워 짐     ex) border=“1 ”
bgcolor	▪ 배경색을 지정한다.    ▪ 색을 지정하는 방법:    ▪ 사용하는 방법     (1) “red”, “black”과 같이 기존의 정의된 색을 사용가능     ex) bordercolor=”blue”     (2) rgb 형식의 #000000으로 색을 지정가능
bordercolor	▪ 테두리 선의 색을 지정한다.
cellspacing	▪ 셀 간의 간격을 지정한다.
width	▪ 가로 길이를 지정한다.     (1) 상수값 입력 (픽셀 단위의 크기)     ex) width=50px     (2) %단위로 입력 (웹브라우져 크기에 대한 %)     ex) width=100%
height	▪ 세로 길이를 지정 - 설정방법은 width와 동일
rawspan	▪ 지정한 값만큼 행을 병합 (위아래로)    ▪ <td> 태그에서 사용됨
colspan	▪ 지정한 값만큼 열을 병합 (좌우로)    ▪ <td> 태그에서 사용됨

3. 테이블의 스타일

- css를 사용하여, border-collapse, table-layout등을 선언할 수 있음

1) “border-collapse” property

   ■ border-collapse:separate – 인접한 테두리들이 각각 모두 표현됨 (default 값)
   ■ border-collapse:collapse – 인접한 테두리가 하나로 표현됨

2) table-layout

   ■ 테이블 내부의 간격을 직접 설정하기 위해서 사용되는 속성
   ■ 가장 많이 쓰이는 속성 중 하나
   ■ 테이블 태그의 내부 컬럼 간격을 원하는데로 조정하는 경우, 이 속성값을 fixed로 사용해야 외부 css를 사용한 간격 조정이 가능함.

3) Cell padding

   ■ Cell padding을 사용해서 셀의 내용물과 셀의 경계면 사이의 간격을 정의할 수 있다.
   ■ Padding을 따로 설정하지 않는 경우에는, 각각의 테이블들은 Padding 없이 나타나게 된다.
   ■ Padding을 설정하기 위해선 Css의 padding property를 이용한다.

4) Left-align Heading

   ■ 각각의 <th> 태그에 정의된 내용물들을 css를 사용해서 한번에 정렬시킬 수 있다.
   ■ css의 text-align 특성을 사용한다

5) Border Spacing

   ■ 각각의 셀들의 경계간의 간격을 정의한다.
   ■ css의 border-spacing 특성을 사용한다.

---

Reference:
[1] https://dullyshin.github.io/2019/08/07/HTML-table/
[2] https://godog.tistory.com/entry/html-%ED%85%8C%EC%9D%B4%EB%B8%94table-%ED%91%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0
[3] https://www.codingfactory.net/10232
[4] https://webisfree.com/2016-07-04/[html]-%ED%85%8C%EC%9D%B4%EB%B8%94-%EB%A7%8C%EB%93%A4%EA%B8%B0-table-%ED%83%9C%EA%B7%B8%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%B4-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0
[5] https://jhnyang.tistory.com/285
[6] https://ofcourse.kr/html-course/table-%ED%83%9C%EA%B7%B8
[7] https://www.w3schools.com/html/html_tables.asp