자습서/HTML

HTML 테이블 태그 - table

2023. 5. 16. 18:01
목차
  1. HTML에서 테이블 태그란?
  2. 테이블 태그의 사용 방법
  3. 테이블 태그 사용 예시
  4. HTML에서 테이블을 스타일링하는 방법
  5. 테이블에서 경계선을 그리는 방법
  6. 테이블 행, 열, 셀의 배경색과 글자 색상을 바꾸는 방법
  7. 테이블의 각 열 너비를 조정하는 방법
  8. 테이블의 정렬 방법을 지정하는 방법
  9. 테이블 태그 사용의 장점
  10. 데이터를 구조화하여 표시할 수 있습니다.
  11. 표 형식으로 레이아웃을 구성할 수 있습니다.
  12. 스타일링이 용이합니다.
  13. 웹 접근성을 높일 수 있습니다.
  14. 검색 엔진 최적화에 유리합니다.

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를 지정하여 개별적으로 스타일링할 수도 있습니다.

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

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

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

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

  1. HTML에서 테이블 태그란?
  2. 테이블 태그의 사용 방법
  3. 테이블 태그 사용 예시
  4. HTML에서 테이블을 스타일링하는 방법
  5. 테이블에서 경계선을 그리는 방법
  6. 테이블 행, 열, 셀의 배경색과 글자 색상을 바꾸는 방법
  7. 테이블의 각 열 너비를 조정하는 방법
  8. 테이블의 정렬 방법을 지정하는 방법
  9. 테이블 태그 사용의 장점
  10. 데이터를 구조화하여 표시할 수 있습니다.
  11. 표 형식으로 레이아웃을 구성할 수 있습니다.
  12. 스타일링이 용이합니다.
  13. 웹 접근성을 높일 수 있습니다.
  14. 검색 엔진 최적화에 유리합니다.
'자습서/HTML' 카테고리의 다른 글
  • HTML 입력 태그 - input
  • HTML 목록 태그 - List Tags
  • HTML 버튼 태그 - button
  • HTML 링크 태그 - Link Tags
메타보드
메타보드
메타보드는 다양한 학습을 위한 자습서 및 예제를 제공합니다. 궁금한 점이나 요청사항은 댓글 게시판 및 방명록을 통해 언제든지 공유해주세요.

블로그 메뉴

  • 홈
  • 방명록
  • 분류 전체보기
    • 자습서
      • HTML
      • CSS
      • JavaScript
    • 웹 애플리케이션

태그

인기 글

메타보드
HTML 테이블 태그 - table
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.