[HTML] 표 만들기_table, tr, td 태그

열은 속성을 가지고 있고, 행은 데이터를 가지고 있습니다.

HTML에서 태그들을 가지고 표를 만드는 방법을 알아보겠습니다.

---

들어가기

다음은 3 x 3 크기의 표를 만드는 예시 코드입니다.:

<table>
  <tr>
    <td>열 1, 행 1</td>
    <td>열 2, 행 1</td>
    <td>열 3, 행 1</td>
  </tr>
  <tr>
    <td>열 1, 행 2</td>
    <td>열 2, 행 2</td>
    <td>열 3, 행 2</td>
  </tr>
  <tr>
    <td>열 1, 행 3</td>
    <td>열 2, 행 3</td>
    <td>열 3, 행 3</td>
  </tr>
</table>

이 코드는 이렇게 나타납니다.

열 1, 행 1	열 2, 행 1	열3, 행1
열 1, 행 2	열 2, 행 2	열 3, 행 2
열 1, 행 3	열 2, 행 3	열 3, 행 3

위 코드에서 table 태그는 표 전체를 감싸며, tr 태그는 각 행을 나타냅니다.

td 태그는 각 셀을 나타내며, 각 셀 안에 있는 내용은 해당 태그 사이에 입력됩니다.

---

table, tr, td 태그

 

HTML로 표를 만들 때는 <table> 태그를 사용합니다.

<table>태그 안에 <tr> 태그를 사용하여 행(row)을 만들고,

각 행 안에 <td> 태그를 사용하여 열(column)을 만듭니다.

<table>
  <tr>
    <td>셀1</td>
    <td>셀2</td>
    <td>셀3</td>
  </tr>
  <tr>
    <td>셀4</td>
    <td>셀5</td>
    <td>셀6</td>
  </tr>
  <tr>
    <td>셀7</td>
    <td>셀8</td>
    <td>셀9</td>
  </tr>
</table>

옆의 코드는 3행 3열의 표를 나타내며, 다음과 같이 나타납니다.

셀1	셀2	셀3
셀4	셀5	셀6
셀7	셀8	셀9

 

---

+ 테두리가 있는 표 만들기

위의 코드처럼만 작성하면 표 테두리가 없는 표가 그려집니다.

아래의 속성을 <table> 태그에 추가하면 테두리가 있는 표를 작성할 수 있습니다.

<table border="1px solid black">
</table>