HTML 테이블 태그 - table

HTML에서 테이블 태그란?

HTML 테이블 태그는 웹 페이지에서 표를 만드는 데 사용되며, 여러 행(row)과 열(column)로 구성됩니다. 이를 통해 정보를 구조화하고, 시각화하여 보여줄 수 있습니다.

---

테이블 태그의 사용 방법

• <table> : 테이블을 생성하기 위한 최상위 태그입니다. 이 태그는 모든 테이블 구성 요소를 감싸며, <tr> 태그와 함께 사용됩니다.
• <tr> : 테이블에서 행(row)을 나타내는 태그입니다. <table> 태그 안에 위치하며, <th> 또는 <td> 태그와 함께 사용됩니다.
• <th> : 테이블에서 헤더(header) 셀을 나타내는 태그입니다. <tr> 태그 안에 위치하며, 헤더 셀은 일반적으로 볼드체로 표시되며, 표의 열(column)의 제목을 나타냅니다.
• <td> : 테이블에서 데이터(data) 셀을 나타내는 태그입니다. <tr> 태그 안에 위치하며, 데이터 셀은 일반적으로 일반 텍스트로 표시됩니다.

태그의 정의를 읽는 것보다 테이블 태그 사용 예시를 보면 이해가 더 빠를 것 같습니다. 아래는 테이블 태그로 작성한 테이블의 예시입니다.

테이블 태그 사용 예시

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>성별</th>
  </tr>
  <tr>
    <td>김철수</td>
    <td>25</td>
    <td>남성</td>
  </tr>
  <tr>
    <td>박영희</td>
    <td>30</td>
    <td>여성</td>
  </tr>
</table>

위와 같이 테이블 생성을 위해 작성된 코드는 실제 웹 페이지에서 아래와 같이 표시됩니다.

---

HTML에서 테이블을 스타일링하는 방법

테이블에서 경계선을 그리는 방법

<table> 태그에 border 속성을 추가하여 경계선을 그릴 수 있습니다.

<table border="1">

테이블 행, 열, 셀의 배경색과 글자 색상을 바꾸는 방법

• tr, th, td 태그에 bgcolor 속성을 추가하여 배경색을 바꿀 수 있습니다.
• tr, th, td 태그에 color 속성을 추가하여 글자 색상을 바꿀 수 있습니다.

<tr bgcolor="lightgrey">
  <th>이름</th>
  <th>나이</th>
  <th>성별</th>
</tr>

테이블의 각 열 너비를 조정하는 방법

<th>, <td> 태그에 width 속성을 추가하여 너비를 조정할 수 있습니다.

  <tr>
    <th width="100">이름</th>
    <th width="50">나이</th>
    <th width="50">성별</th>
  </tr>

테이블의 정렬 방법을 지정하는 방법

• th, td 태그에 align 속성을 추가하여 가로 정렬 방법을 지정할 수 있습니다.
• th, td 태그에 valign 속성을 추가하여 세로 정렬 방법을 지정할 수 있습니다.

 <tr>
   <td align="left">박영희</td>
   <td align="center">30</td>
   <td align="center">여성</td>
 </tr>

 

다음은 위에서 확인한 테이블 스타일링을 위한 요소들을 모두 적용한 예시 코드입니다.

    <table border="1">
      <tr bgcolor="lightgrey">
        <th width="100" align="center">이름</th>
        <th width="50" align="center">나이</th>
        <th width="50" align="center">성별</th>
      </tr>
      <tr bgcolor="lightgrey">
        <td width="100" align="center">김철수</td>
        <td width="50" align="center">25</td>
        <td width="50" align="center">남성</td>
      </tr>
      <tr bgcolor="lightgrey">
        <td width="100" align="center">박영희</td>
        <td width="50" align="center">30</td>
        <td width="50" align="center">여성</td>
      </tr>
    </table>

위에서 스타일링한 테이블은 실제 웹 페이지에서 아래 이미지처럼 표시됩니다.

테이블 태그 사용의 장점

테이블 태그를 사용하는 것은 저에게도 쉽지 않은 일입니다. 하지만 테이블 태그의 장점은 무시 못 할 정도로 웹 페이지에서 중요합니다.

데이터를 구조화하여 표시할 수 있습니다.

테이블 태그는 데이터를 구조화하여 표시할 수 있는 방법을 제공합니다. 표는 행(row)과 열(column)로 이루어져 있으며, 각 셀(cell)에 데이터를 삽입할 수 있습니다. 이는 데이터를 보기 쉽게 만들어주어 사용자가 정보를 빠르게 파악할 수 있도록 도와줍니다.

표 형식으로 레이아웃을 구성할 수 있습니다.

테이블 태그는 웹 페이지의 레이아웃을 구성하는 데도 사용될 수 있습니다. 이는 셀의 크기와 위치를 조정하여 다양한 디자인 요소를 만들어낼 수 있다는 것을 의미합니다.

스타일링이 용이합니다.

테이블 태그를 사용하여 만든 표는 스타일링이 용이합니다. CSS를 사용하여 셀, 행, 열 등 각 요소에 스타일을 적용할 수 있으며, 각 요소에 클래스 또는 ID를 지정하여 개별적으로 스타일링할 수도 있습니다.

웹 접근성을 높일 수 있습니다.

웹 접근성은 모든 사용자가 웹 사이트의 콘텐츠와 기능을 이용할 수 있도록 하는 것을 의미합니다. 테이블 태그를 사용하여 표를 구성하면, 스크린 리더와 같은 보조기기를 사용하는 사용자도 정보를 쉽게 파악할 수 있도록 돕습니다.

검색 엔진 최적화에 유리합니다.

테이블 태그를 사용하여 웹 페이지를 구성하면, 검색 엔진에서 웹 페이지의 내용을 분석하는 데 유리합니다. 표를 사용하여 데이터를 구조화하면, 검색 엔진이 데이터를 더 쉽게 이해하고 분석할 수 있으며, 이는 검색 엔진 최적화에 도움을 줍니다.