HTML 표 구성시 제목, 테두리, 셀 병합 기능 정리

by

HTML 표 구성은 <table> 태그 사이에 위치합니다. 표의 실제 데이터는 <tr>, <td> 사이에 위치합니다. <td> 태그 중에서 헤더 역할을 하는 요소에는 <th> 태그를 대신 사용합니다. 표 테두리의 이중선 삭제는 border-collapse 속성을 사용합니다.

HTML 표 기본 구성

HTML 표는 <table> 태그 사이에 존재합니다. 표의 각 셀은 <tr> 태그와 <td> 태그의 조합으로 만들 수 있습니다.

<td> 태그는 각 셀 한 칸을 정의합니다. <tr> 태그는 표의 가로 한 줄을 정의합니다.

<table>
  <tr>
    <td>사과</td>
    <td>수박</td>
    <td>레몬</td>
    <td>토마토</td>
  </tr>
</table>

<tr> 태그로 이루어진 개수 만큼 표의 줄 수가 늘어납니다.

<table>
  <tr>
    <td>사과</td>
    <td>수박</td>
    <td>레몬</td>
    <td>토마토</td>
  </tr>
  <tr>
    <td>달콤</td>
    <td>시원</td>
    <td>신맛</td>
    <td>맛없다</td>
  </tr>
  <tr>
    <td>과일</td>
    <td>과일</td>
    <td>과일</td>
    <td>야채</td>
  </tr>
</table>

HTML 표 제목 셀

표의 맨 상단은 제목 셀(head cell)로 지정할 수 있습니다. <td> 대신 <th> 태그를 사용하면 헤드셀로 지정됩니다. 헤드셀은 <td>셀에 비해서 두꺼운 글씨로 표현됩니다.

<table>
  <tr>
    <th>사과</th>
    <th>수박</th>
    <th>레몬</th>
    <th>토마토</th>
  </tr>
  <tr>
    <td>달콤</td>
    <td>시원</td>
    <td>신맛</td>
    <td>맛없다</td>
  </tr>
  <tr>
    <td>과일</td>
    <td>과일</td>
    <td>과일</td>
    <td>야채</td>
  </tr>
</table>

HTML 표 테두리

HTML 표의 테두리를 구현하기 위해서는 CSS 기본 지식이 필요합니다.

<head> 태그 사이의 <style> 태그에서 <table>, <th>, <td> 태그에 css 선택자를 부여합니다.

border 속성을 사용하면 두께(1px), 선 종류(solid), 선 색상(black)을 설정할 수 있습니다.

테두리 효과만 줄 경우 아래 처럼 테두리가 두 줄이 생성됩니다. 쉼표로 이어진 태그의 모음은 CSS의 그룹 선택자 기능을 활용했습니다.

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

<table>, <th>, <td> 태그에 border-collapse 속성을 추가하면, 두 줄 테두리가 삭제됩니다.

table, th, td {
  border-collapse:collapse;
}

HTML 표와 글자 간격

테이블의 셀 간격을 조절하고 싶다면, padding 속성을 추가하면 됩니다. padding에 원하는 px 값을 입력하면, 텍스트와 표 테두리 사이의 간격이 조절됩니다.

table, th, td {
  padding:20px;
}

HTML 표 화면 비율

표를 컴퓨터 모니터, 스마트폰 화면 등 브라우저 크기에 따라 최대 크기로 확장하고 싶다면, <table> 태그에 width: 100% 속성을 추가합니다.

tabale {
  width: 100%;
}

HTML 표 제목

HTML Table의 제목은 <caption> 태그를 사용합니다.

<table> 태그 사이에 <caption> 태그를 삽입하고, 알맞는 제목을 넣습니다.

<table style="width:100%;">
  <caption>동물의 세계</caption>
  <tr>
    <th>포유류</th>
    <th>파충류</th>
    <th>조류</th>
  </tr>
  <tr>
    <td>캥거루</td>
    <td>도마뱀</td>
    <td>갈매기</td>
  </tr>
</table>

HTML 표 텍스트 정렬

표의 텍스트 정렬은 원하는 <th>, <td> 태그에 선택자를 주면 됩니다. text-align 속성을 사용합니다.

lt;th> 태그는 left 정렬, <td> 태그는 right 정렬을 한 모습입니다.

th{
  text-align:left;
}
td{
  text-align:right;
}

HTML 표 가로 셀 병합

HTML 표의 가로 셀 병합은 colspan 속성을 사용합니다. 병합을 원하는 <th> 또는 <td> 태그 뒤에 colspan 속성을 입력합니다.

병합을 원하는 셀 개수를 입력하고 병합을 완료합니다. 병합이 될 개수 만큼 <th> 또는 <td> 태그는 적지 않고 공백으로 유지합니다.

<table style="width:100%;">
  <tr>
    <th colspan="3">과일</th>
  </tr>
  <tr>
    <td>바나나</td>
    <td>파인애플</td>
    <td>코코넛</td>
  </tr>
</table>

HTML 표 세로 셀 병합

HTML Table 세로 병합은 rowspan 속성을 사용합니다.

병합을 원하는lt;th> 또는 <td> 태그 뒤에 rowspan 과 병합할 셀의 개수를 입력합니다. 병합한 후 다른 <tr> 태그의 셀은 개수 만큼 삭제되야 합니다.

<table style="width:100%;">
  <tr>
    <th rowspan="3">야채</th>
    <td>브로콜리</td>
  </tr>
  <tr>
    <td>양파</td>
  </tr>
  <tr>
    <td>당근</td>
  </tr>
</table>

HTML 표 클래스

HTML Table에도 클래스를 부여할 수 있습니다.

표 클래스 부여는 다른 태그와 마찬 가지로 태그 뒤에 class 명을 입력합니다.

<table class = "tamoto">

표의 class를 선택자로 지정할 경우, 클래스를 나타내는 마침표(.) 앞에 table을 입력해야 합니다.

class를 선택자로 지정시에는 테이블 태그 뒤에 마침표 기호와 클래스명을 이어서 기입하면 됩니다. table 태그에 tomato 클래스를 호출하고 싶다면 아래와 같이 작성합니다.

table.tomato { }
table.tomato {
  background-color:powderblue;
}

HTML 표 id

표에 id 지정은 원하는 테이블 태그 뒤에 id 값을 기입합니다. id 값을 animal로 작성하고 싶다면 아래와 같이 완성합니다.

<table id = "animal">

지정한 table id를 선택자로 지정할 경우 원하는 테이블 태그 뒤에 # 기호 및 id 명을 기입하면 됩니다.

table#animal { }
table#animal {
  background-color: yellowgreen;
}

아이디값은 중복이 될 수 없습니다.