HTML로 테이블 만드는 방법 완벽 가이드

HTML에서 테이블을 만들려면 <table> 태그를 사용합니다. 테이블은 행과 열로 구성되며, 하나 이상의 <tr>, <th>, <td> 요소를 조합하여 구조를 만들 수 있습니다.

각 태그의 역할은 다음과 같습니다.

<tr> (Table Row) : 테이블의 행(row)을 정의합니다.
<th> (Table Header) : 테이블의 제목 셀(헤더)을 정의합니다. 텍스트가 굵게 표시되고 가운데 정렬됩니다.
<td> (Table Data) : 테이블의 일반 데이터 셀을 정의합니다.

주의사항: 사용이 중단된 속성들

과거에 테이블 스타일을 지정하던 align, bgcolor, border, cellpadding, cellspacing 같은 테이블 속성들은 HTML5에서 더 이상 지원되지 않는 폐기된(deprecated) 속성입니다. 따라서 이러한 속성은 사용하지 말고, 테이블의 모양과 스타일은 반드시 CSS로 지정하는 것이 좋습니다.

예제 코드

다음 코드를 실행하면 HTML에서 테이블을 만드는 방법을 직접 확인할 수 있습니다. 이 예제에서는 <style> 태그를 사용해 테이블 테두리에 스타일을 적용했습니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
            border: 1px solid black;
         }
      </style>
   </head>

   <body>
      <h1>Programming Languages</h1>
      <table>
         <tr>
            <th>Language</th>
            <th>Release Year</th>
         </tr>
         <tr>
            <td>Java</td>
            <td>1995</td>
         </tr>
         <tr>
            <td>Pascal</td>
            <td>1970</td>
         </tr>
      </table>
   </body>
</html>

실행 결과

위 코드를 브라우저에서 실행하면 언어(Language)와 출시 연도(Release Year)를 나타내는 2열 테이블이 생성되며, 각 행에는 Java(1995년)와 Pascal(1970년) 데이터가 표시됩니다. 헤더 셀은 <th> 태그 덕분에 굵은 글씨로 강조되어 나타납니다.

이처럼 <table>, <tr>, <th>, <td> 태그만 기억하면 누구나 간단하게 HTML 테이블을 만들 수 있습니다.