HTML / (21) 표

▶ HTML 표를 사용하면 웹 개발자가 데이터를 행과 열로 정렬할 수 있다.

 

■ HTML 표 정의

▶ HTML의 표는 행과 열 내부의 표 셀로 구성된다.

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table3 

 

■ 표 셀

▶ 각 표 셀은 <td> 와 </td> 태그에 정의된다.

▶ td 는 표 데이터를 나타낸다.

▶ <td> 와 </td> 사이에 모든 것은 표 셀의 내용이다.

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

※ 표 셀에는 텍스트, 이미지, 리스트, 링크, 다른 표 등 모든 종류의 HTML 요소가 포함될 수 있다.

 

■ 표 행

▶ 각 표에 행은 <tr> 로 시작하여 </tr> 태그로 끝난다.

▶ tr 은 표에 행을 나타낸다.

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

▶ 표에 원하는 만큼 많은 행을 가질 수 있다.

▶ 각 행에서 셀 수가 동일한지 동일한지 확인해야 한다.

※ 행이 다른 행보다 더 적거나 많은 셀을 가질 수 있는 경우가 있다.

※ 이에 대해서는 이후 다른 글에서 설명하겠다.

 

■ 표 Headers

▶ 때론 셀이 표 머리글 셀이 되기를 원하는 경우가 있다.

▶ 이런 경우 <td> 태그 대신에 <th> 태그를 사용한다.

▶ tr 은 표에 머리글을 나타낸다

<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

▶ 기본적으로 <th> 요소에 내용은 굵고 가운데 정렬이지만 CSS 로 변경할 수 있다.

 

출처 : https://www.w3schools.com/html/html_tables.asp

HTML Tables