본문 바로가기
Reference/HTML

table 태그는 표를 설정합니다.

by @webstoryboy 2022. 12. 7.

table 태그는 표를 설정합니다.

Reference/HTML

<table> 태그는 표를 설정합니다.

by @webs 2022. 12. 6.

<table>

<table> 태그는 표를 설정합니다.
테이블은 테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서 레이아웃을 표현한 적도 있지만, 웹표준을 준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다.

테이블은 제목을 표시하기 위해 <caption>을 사용하고, 셀 요소를 그룹화하기 위해 <colgroup>과 <col>을 사용합니다. 테이블 전체 구조를 분리하기 위해 <thead>, <tbody>, <tfoot>를 사용하며, 행과 열을 나타내는 <tr>, <td>, <th> 등을 사용합니다. 여기에 접근성을 위해 scope 속성을 사용하고 셀의 병합을 위해 colspan과 rowspan을 사용하게 됩니다.


특징 설명
요소 블록 요소(Block Element)
닫는 태그 닫는 태그 사용(<table> ~ </table>)
버전 HTML4
시각적 표현 없음
사용성 ★★★★★

정의(Definition)

  • <table> 태그는 표를 설정합니다.
  • <table> 태그는 <thead>, <tbody>, <tfoot>으로 영역을 설정 할 수 있습니다.
  • <table> 태그는 주로 게시판 영역, 회원가입 영역 또는 표를 나타내는 영역에서 많이 사용합니다.
  • <table> 태그는 레이아웃을 목적으로 사용은 적합하지 않지만, 예외적으로 메일을 보낼 때는 레이아웃을 목적으로 사용 할 수도 있습니다.
  • HTML5에서는 "align", "bgcolor", "border", "cellpadding", "cellspacing", "frame", "rules", "summary", "width" 속성을 지원하지 않습니다.

표와 관련된 태그

  • <table> 태그는 표를 설정합니다.
  • <thead> 태그는 표의 헤더 영역 그룹을 설정합니다.
  • <tbody> 태그는 표의 본문 영역 그룹을 설정합니다.
  • <tfoot> 태그는 표의 푸터 영역 그룹을 설정합니다.
  • <caption> 태그는 표의 제목을 설정합니다.
  • <colgroup> 태그는 표의 열을 묶는 그룹을 설정합니다.
  • <col> 태그는 <colgroup> 요소에 속하는 각 열의 속성을 설정합니다.
  • <tr> 태그는 표의 행을 설정합니다.
  • <td> 태그는 표의 열(셀)을 설정합니다.
  • <th> 태그는 행이나 열에 타이틀을 설정합니다.
  • border-collapse 속성은 표의 테두리 분리 여부를 설정합니다.
  • border-spacing 속성은 표의 테두리 간격을 설정합니다.

예제1(Sample)

테이블 기본 예제입니다.

표 제목 설정
표 제목1 표 제목2 표 제목3 표 제목4 표 제목5
표 내용1 표 내용1 표 내용1 표 내용1 표 내용1
표 내용2 표 내용2 표 내용2 표 내용2 표 내용2
표 내용3 표 내용3 표 내용3 표 내용3 표 내용3
표 내용4 표 내용4 표 내용4 표 내용4 표 내용4
표 내용5 표 내용5 표 내용5 표 내용5 표 내용5
푸터1 푸터1 푸터1 푸터1 푸터1
HTML
CSS
SCRIPT
<div class="table-box">
    <table>
        <caption>표 제목 설정</caption>
        <thead>
            <tr>
                <th>표 제목1</th>
                <th>표 제목2</th>
                <th>표 제목3</th>
                <th>표 제목4</th>
                <th>표 제목5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>표 내용1</td>
                <td>표 내용1</td>
                <td>표 내용1</td>
                <td>표 내용1</td>
                <td>표 내용1</td>
            </tr>
            <tr>
                <td>표 내용2</td>
                <td>표 내용2</td>
                <td>표 내용2</td>
                <td>표 내용2</td>
                <td>표 내용2</td>
            </tr>
            <tr>
                <td>표 내용3</td>
                <td>표 내용3</td>
                <td>표 내용3</td>
                <td>표 내용3</td>
                <td>표 내용3</td>
            </tr>
            <tr>
                <td>표 내용4</td>
                <td>표 내용4</td>
                <td>표 내용4</td>
                <td>표 내용4</td>
                <td>표 내용4</td>
            </tr>
            <tr>
                <td>표 내용5</td>
                <td>표 내용5</td>
                <td>표 내용5</td>
                <td>표 내용5</td>
                <td>표 내용5</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>푸터1</td>
                <td>푸터1</td>
                <td>푸터1</td>
                <td>푸터1</td>
                <td>푸터1</td>
            </tr>
        </tfoot>
    </table>
</div>
.table-box table {
    width: 100%;
    text-align: center;
}
.table-box table th {
    background: #deeeff;
    font-weight: normal;
}
.table-box table th, 
.table-box table td {
    border: 1px solid #ccc;
    padding: 10px;
    color: #666;
}
.table-box table tfoot td {
    background: #ffeded;
}
//Javascript none

예제2(Sample)

colgroup을 적용한 예제입니다.

표 제목 설정
제목1 제목2 제목3
내용1 내용1 내용1
내용2 내용2 내용2
내용3 내용3 내용3
내용4 내용4 내용4
HTML
CSS
SCRIPT
<div class="table-box">
    <table>
        <caption>표 제목 설정</caption>
        <colgroup>
            <col style="width: 50%;">
            <col style="width: 25%;">
            <col style="width: 25%;">
        </colgroup>
        <thead>
            <tr>
                <th>표 제목1</th>
                <th>표 제목2</th>
                <th>표 제목3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>표 내용1</td>
                <td>표 내용1</td>
                <td>표 내용1</td>
            </tr>
            <tr>
                <td>표 내용2</td>
                <td>표 내용2</td>
                <td>표 내용2</td>
            </tr>
            <tr>
                <td>표 내용3</td>
                <td>표 내용3</td>
                <td>표 내용3</td>
            </tr>
            <tr>
                <td>표 내용4</td>
                <td>표 내용4</td>
                <td>표 내용4</td>
            </tr>
        </tbody>
    </table>
</div>
.table-box table {
    width: 100%;
}
.table-box table th {
    background: #deeeff;
    font-weight: normal;
}
.table-box table th, 
.table-box table td {
    border: 1px solid #ccc;
    padding: 10px;
    color: #666;
}
//Javascript none

예제3(Sample)

colsapn과 rowspan을 적용한 예제입니다.

표 제목 설정
제목1 제목2 제목3
내용1 내용1
내용2 내용2 내용2
내용3 내용3 내용3
내용4 내용4
HTML
CSS
SCRIPT
<div class="table-box">
    <table>
        <caption>표 제목 설정</caption>
        <thead>
            <tr>
                <th>제목1</th>
                <th>제목2</th>
                <th>제목3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2" class="red center">내용1</td>
                <td>내용1</td>
            </tr>
            <tr>
                <td>내용2</td>
                <td>내용2</td>
                <td>내용2</td>
            </tr>
            <tr>
                <td rowspan="2" class="red center">내용3</td>
                <td>내용3</td>
                <td>내용3</td>
            </tr>
            <tr>
                <td>내용4</td>
                <td>내용4</td>
            </tr>
        </tbody>
    </table>
</div>
.table-box table {
    width: 100%;
}
.table-box table th {
    background: #deeeff;
    font-weight: normal;
}
.table-box table th, 
.table-box table td {
    border: 1px solid #ccc;
    padding: 10px;
    color: #666;
}
.table-box table .blue {background: #eef6ff;}
.table-box table .red {background: #ffeded;}
.table-box table .center {text-align: center;}
//Javascript none

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<table>

문서와 관련된 태그(Document Related Tag)

  • <html> 태그는 문서의 최상단 요소를 나타냅니다.
  • <head> 태그는 문서 정보에 해당하는 내용을 설정합니다.
  • <body> 태그는 문서 본문에 해당하는 내용을 설정합니다.
  • <base> 태그는 문서의 기본 URL을 설정합니다.
  • <link> 태그는 문서의 외부 리소스를 설정합니다.
  • <meta> 태그는 문서의 메타 정보를 설정합니다.
  • <style> 태그는 문서의 스타일 정보를 설정합니다.
  • <title> 태그는 문서의 제목을 설정합니다.

섹션과 관련된 태그(Section Related Tag)

  • <main> 태그는 문서의 주요 콘텐츠 섹션을 설정합니다.
  • <section> 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다.
  • <article> 태그는 문서의 독립적인 컨텐츠 섹션을 설정합니다.
  • <aside> 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다.
  • <header> 태그는 문서의 소개 및 메뉴 그룹 컨텐츠 섹션을 설정합니다.
  • <nav> 태그는 문서에 대한 메뉴 링크를 제공하는 섹션을 설정합니다.
  • <footer> 태그는 문서 관련 정보 및 관련 링크 콘텐츠 섹션을 설정합니다.
  • <address> 태그는 문서 관련 연락처 콘텐츠 섹션을 설정합니다.
  • <h1>~<h6> 태그는 각 섹션의 제목을 설정합니다.

참고(Reference)


댓글