[HTML] <table> 테이블 태그 (rowspan, colspan, border 사용 방법)

<table> 태그는 HTML 문서에서 표를 만드는 태그다.

행과 열을 넣기 위해 <tr>, <td>등을 태그 안에 함께 작성한다.

 

이전에는 웹 페이지의 레이

아웃을 구성할 때 <table> 태그를 이용하여 많이 구성하였다고 한다.

하지만 적당한 사용 방법이 아니므로
레이아웃 구성시에는 <div> 태그와 CSS를 이용하는 것이 좋다.

 

먼저 테이블 태그를 열어보자

<table border = "1" align="center"></table>

테이블 내부에 border라는 속성은 테두리를 의미한다.

 

픽셀 값을 넣어 테이블의 윤곽을 설정한다.

 

픽셀 값, 줄 종류, 줄 색상

ex) 1px, solid, #777

 

같은 형태로 다양한 값 적용이 가능하다.

픽셀만 정해주도록 하자.

 

이제 테이블 내부에 tr, td로 행과 열을 넣어야 할 것이다.

 

align은 맞추다, 즉 정렬의 의미를 가진 속성이다.

VS code에서 작성 시 center, left 등 다양한 내부 값을 자동완성으로 확인할 수 있다.

보기 좋게 화면 가운데 표시되게 center를 주자.

 

이 border 속성은 내부에 있는 모든 행과 열 요소에도 적용된다.

 

<table border = "1" align="center">
        <tr>
            <td>번호</td>
            <td>이름</td>
            <td>성별</td>
            <td>주소</td>
        </tr>
</table>

<tr> 태그는 표의 행을 나타낸다.

<td> 태그는 열을 나타내고 <tr> 태그 하위에 위치한다.

 

워드 작업처럼 표의 행과 열을 미리 정하고 작성하는 것이 아닌,

행을 선언하고 그 행의 가로로 쭉 쌓이는 열을 작성하는 방식이다!

 

이해하기 쉬운 이미지

 

처음엔 어색하게 느껴져도 이해하면 충분히 쉽게 사용 가능하다.

---

결과

번호

이름

성별

주소

---

rowspan과 colspan

표를 작성하다 보면 표의 내부 내용을 합쳐야 할 때가 있다.

그런 경우에 rowspan과 colspan을 사용하면 된다.

 

row = 행, span = 너비

rowspan = 행의 너비

직관적으로 알 수 있다.

 

<!-- 3행 4열 -->
    <table border = "1" align="center">
        <tr>
            <td>번호</td>
            <td>이름</td>
            <td>성별</td>
            <td>주소</td>
            <td rowspan="4">행 합치기</td>
        </tr>
        <tr>
            <td>1</td>
            <td>안한량</td>
            <td>남</td>
            <td>안양</td>
        </tr>
        <tr>
            <td>2</td>
            <td>노한량</td>
            <td>남</td>
            <td>노원</td>
        </tr>
        <tr> <!-- colspan, rowspan 열, 행 합치기 -->
            <td colspan="4">열 합치기</td>
        </tr>

    </table>

 

속성을 선언하고 내부에 합칠 칸의 개수를 넣어주면 완성이다.

 

위 코드를 천천히 읽어보고 결과를 예상해봅시다!

---

---

---

---

---

---

---

번호	이름	성별	주소	행 합치기
1	안한량	남	안양
2	노한량	남	노원
열 합치기

이렇게 테이블을 만들 수 있는 테이블 태그이다.