HTML <table>태그 사용법 - 테이블 생성

HTML <table>태그

HTML을 이용해 웹 페이지를 만드는 과정 중 생각처럼 잘 안되는 부분이 <table>태그의 사용입니다. 엑셀에서는 어렵지 않게 표를 만들고, 행과 열을 구분짓고, 셀 병합과 분할이 가능했습니다. 하지만, 직접 코드를 짜서 테이블을 만들고, 구조를 세우고, 모양을 만들어 나가는 것은 쉽지 않습니다. 이번 포스팅에서는 HTML의 <table>태그의 사용법에 대해 정리하도록 하겠습니다.

 

 

 

테이블의 구성 요소

테이블은 셀로 구성되며, 테이블의 행은 row, 열은 column으로 불려 집니다. 하나의 <table>은 하나 이상의 <tr>로 구성됩니다. <tr>은 셀을 나타내는 <th>, <td>를 자식 태그로 가집니다.

 

💡테이블을 구성할 때는 위에서 아래로, 좌측에서 우측으로 작성하는 것이 좋습니다.

<table> : 표를 나타내는 태그
<tr> : 행을 나타내는 태그
<th> : 제목 셀을 나타내는 태그
<td> : 셀을 나타내는 태그

 

<table>와 <tr>,<td>를 이용한 기본 테이블 생성

아래의 <table>태그 예제코드 실행 결과

<table>
    <tr>
		<td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
</table>

<table>은 =테두리, <tr>은 -테두리, <td>는 -점선으로 구분하였습니다. 

태그를 분석해보면 <tr>은 선언한 순서대로 위에서 아래로 표기되며, 각 <tr>내부에 위치한 <td>는 왼쪽에서 오른쪽으로 표기됩니다.

이러한 법칙을 숙지하면 어떤 테이블이든 만들 수 있습니다.