[HTML] 기본 테이블 만들기

---

기본 테이블 만들기

가장 기본적으로 테이블을 만들기 위해서는 

<table>, <th>, <tr>, <td>

이렇게 4가지 태그를 사용한다.

 

<table> 은 지금부터 테이블이라고 선언해 주는 태그이다.

 

<th> 은 table header 의 줄임말로 테이블 위에 카테고리 이름을 나타낼때 주로 쓰인다.

 

<tr> 은 table row 의 줄임말로 한줄, 엑셀에서의 하나의 행을 나타낸다.

 

<td> 은 table date 의 줄임말로 한칸, 엑셀에서의 하나의 셀을 나타낸다.

 

그래서 종 구성을 나타낼 때는 보통,

<table>
    <th>~~</th>
    <tr>
        <td>~~</td>
        <td>~~</td>
    </tr>
</table>

이런 형태로 구성된다.

 

---

테이블 선 / 제목 추가

그냥 테이블만 만들어 놓으면 글씨들만 보이지만,

만들어놓은 테이블의 구성을 눈으로 확인하고 싶다면

border="1" 을 추가해주면 눈으로 테이블의 선을 확인할 수 있다.

또한,

<caption> 태그를 사용하면 그 테이블의 제목을 붙일 수 있다.

See the Pen table by lsj5634 (@zinisang) on CodePen.