동영상 강좌보기

HTML 표 정의하기

HTML 표는 <table>태그로 정의됩니다.

각 테이블 행은 <tr>태그로 정의됩니다. 표 머리글은 <th>태그로 정의됩니다. 

기본적으로 테이블 표제는 굵게 표시되고 가운데 정렬됩니다. 테이블 테이터/셀은 <td>태그로 정의됩니다.

<table style="width:100%">
  <tr>
    <th>번호</th>
    <th>성명</th> 
    <th>나이</th>
  </tr>
  <tr>
    <td>1</td>
    <td>홍길동</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>2</td>
    <td>이순신</td> 
    <td>94</td>
  </tr>
</table>

** <td>요소는 테이블의 데이터 컨테이너입니다.

여기에는 모든 종류의 HTML요소가 포함될 수 있습니다. (텍스트, 이미지, 목록, 다른 테이블 등)

HTML 표 - 테두리 추가

표에 테두리를 지정하지 않으면 테두리없이 표시됩니다.

테두리는 CSS border속성을 사용하여 설정됩니다.

table, th, td {
    border: 1px solid black;
}

표와 셀의 테두리를 정의합니다.

HTML표 - 축소된 테두리

중복되는 테두리를 하나의 테두리로 축소하려면 CSS border-collapse속성을 추가합니다.

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

HTML 표 - 셀 여백 추가

셀 padding은 셀내용과 경계 사이의 간격(여백)을 지정합니다.

padding을 지정하지 않으면 여백없이 표 셀이 표시됩니다.

padding을 설정하려면 CSS padding속성을 사용합니다.

th, td {
    padding: 15px;
}

HTML표 - 표제 정렬

기본적으로 테이블 표제는 굵게 표시되고 중앙 정렬됩니다.

표 머리글을 왼쪽 정렬하려면 CSS text-align속성을 사용합니다.

th {
    text-align: left;
}

HTML표 - 테두리 간격 추가

테두리 간격은 셀사이의 간격을 지정합니다.

표의 테두리 간격을 설정하려면 CSS border-spacing속성을 사용합니다.

table {
    border-spacing: 5px;
}

** 테이블에 border-collapse속성이 적용되어 있으면 border-spacing속성은 적용되지 않습니다.

HTML 표 - 여러 열(column)을 합치는 경우

셀이 둘 이상의 열에 걸쳐 있도록 하려면 colspan속성을 사용합니다.

<table style="width:100%">
  <tr>
    <th>성명</th>
    <th colspan="2">전화</th>
  </tr>
  <tr>
    <td>거대한</td>
    <td>011-1234-5678</td>
    <td>011-1234-5679</td>
  </tr>
</table>

HTML 표 - 2개 이상의 행(row)을 합치는 경우

셀이 둘 이상의 행에 걸쳐 있도록 하려면 rowspan속성을 사용합니다.

<table style="width:100%">
  <tr>
    <th>성명</th>
    <td>홍길동</td>
  </tr>
  <tr>
    <th rowspan="2">전화</th>
    <td>011-2345-6789</td>
  </tr>
  <tr>
    <td>011-2345-6780</td>
  </tr>
</table>

HTML 표 - 캡션 추가

캡션을 표에 추가하려면 <caption>태그를 사용합니다.

<table style="width:100%">
  <caption>과일촌</caption>
  <tr>
    <th>종류</th>
    <th>영양</th>
  </tr>
  <tr>
    <td>사과</td>
    <td>비타민C</td>
  </tr>
  <tr>
    <td>딸기</td>
    <td>비타민A</td>
  </tr>
</table>

** <caption>태그는 <table>태그 바로 뒤에 삽입해야 합니다.

하나의 표에 특별한 유형을 줄 때

어떤 테이블에 특별한 스타일을 정의하려면 id속성을 테이블에 추가합니다.

<table id="t01">
  <tr>
    <th>번호</th>
    <th>성명</th> 
    <th>나이</th>
  </tr>
  <tr>
    <td>1</td>
    <td>홍길동</td> 
    <td>24</td>
  </tr>
</table>

이제 이 표에 대한 특수한 스타일을 정의합니다.

table#t01 {
    width: 100%; 
    background-color: #f1f1c1;
}

그리고 더 많은 스타일을 추가할 수 있습니다.

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}