[HTML] 표 만들기(table 태그, caption 태그, tr 태그, th 태그, td 태그, rowspan, colspan 속성, thead, tfoot, tbody 태그, col, colgroup 태그, scope 태그)

표(table)는 웹 페이지에서 흔하게 볼 수 있는 2차원 격자 형태로 구성된 데이터를 의미한다.

표는 다음 그림처럼 행(row), 열(column) 그리고 행과 열이 만나는 셀(cell) 로 구성된다

 

1. table 태그

HTML에서 표를 생성할 때는 table 태그를 사용한다. 

폼과 마찬가지로 표 관련 태그는 모두 table  태그 안에서 사용한다.

형식)
	<table></table>

 

 

---

 

2. caption 태그

HTML에서 표를 생성할 때 웹 접근성을 향상하는 방법의 하나로 표 제목을 지정해

표를 만들때는 반드시 caption 태그를 사용해야한다.

<table>
	<caption> 표 제목 </caption>
</table>

 

---

 

3. tr 태그

tr(table row) 태그는 표에서 행을 생성한다.

tr 태그 하나는 행 하나를 생성하므로 행을 여러개 만들고 싶다면 tr태그를 여러번 사용하면 된다.

<table>
	<tr></tr>
</table>

 

 

---

 

4. th, td 태그

th(table header) 태그와 td(table data) 태그는 표에서 열을 생성할때 사용한다.

th 태그는 표에서 제목을 나타내는 열을 생성할 때 td 태그는 표에서 일반적인 데이터를 나타내는 열을 생성할때 사용한다.

<table>
   <tr>
    	<th>제목</th>
        <td>내용</td>
    <tr>
</table>

 

위 이미지를 만들기 위한 코드를 만들어보자

 

<table>
	<tr>
    	<th>번호</th>
        <th>상품명</th>
        <th>수량</th>
        <th>가격</th>
	</tr>
    <tr>
    	<td>1</td>
        <td>콜라</td>
        <td>1개</td>
        <td>1,500원</td>
	</tr>
    <tr>
    	<td>2</td>
        <td>사이다</td>
        <td>2개</td>
        <td>1,000원</td>
	</tr>
    <tr>
    	<td>3</td>
        <td>탄산수</td>
        <td>3개</td>
        <td>1,000원</td>
	</tr>
</table>

 

---

 

5. rowspan과 colspan 속성

표 관련 태그에서 행을 의미하는 tr 태그 안에 열을 의미하는 th, td 태그를 사용하면 행과 열이 만나 셀이 생성된다

생성된 셀은 병합할 수 있는데 행과 행을 병합할때는 rowspan 속성을, 

열과 열을 병합할 때는 colspan 속성을 사용한다.

 

rowspan과 colspan의 속성값으로 병합하고 싶은 셀의 개수를 적는데 병합한 셀의 개수만큼 다음 행 또는 열은 비워야 한다.

 

위의 이미지를 만들기 위한 코드를 작성해보면

<table>
            <tr>
                <th>번호</th>
                <th>상품명</th>
                <th>수량</th>
                <th>가격</th>
            </tr>
            <tr>
                <td>1</td>
                <td>콜라</td>
                <td>1개</td>
                <td>1,500원</td>
            </tr>
            <tr>
                <td>2</td>
                <td>사이다</td>
                <td>2개</td>
                <td rowspan="2">1,000원</td> <!-- 행 병합 -->
            </tr>
            <tr>
                <td>3</td>
                <td>탄산수</td>
                <td>3개</td>
                <!-- 4행 4열은 3행 4열과 병합했으므로 생성하지 않는다. -->
            </tr>
            <tr>
                <td>총 금액</td>
                <td colspan="3">6,500원</td> <!-- 열 병합 -->
                <!-- 5행 2열부터 열 3개를 병합했으므로 나머지 열은 생성하지 않습니다.-->
            </tr>
</table>

 

---

6. thead, tfoot, tbody 태그

표에서도 행을 묶어 그룹화 할 수 있는데 thead, tfoot, tbody 태그를 사용하면 된다.

thead 태그는 헤더 영역에 해당하는 행을,

tfoot 태그는 푸터 영역에 해당하는 행을,

tbody 태그는 본문 영역에 해당하는 행을 그룹 짓는다.

 

thead, tfoot, tbody 태그는 표에서 표현하여는 데이터 형식에 따라 사용하지 않을 수도 있지만 사용하다보면 반드시

thead, tfoot, tbody 순서여야한다.

thead와 tfoot 태그는 한번만 사용할 수 있고 thead 태그로 그룹화한 행은 th 태그로 열을 생성한다.

형식)

<table>
    <thead>
    	<th>...</th>
    </thead>
    <tfoot>
    	<td>...</td>
    </tfoot>
    <tbody>
    	<td>...</td>
    </tbody>
</table>

 

 

 

위의 형식대로 코드를 작성해보면

 

---

 

7. col과 colgroup 태그

표에서 열을 그룹화할 때는 col 태그와 colgroup 태그를 사용한다. col 태그는 하나의 열을 그룹화하고 colgroup 태그는 span 속성과 함께 사용해 2개 이상의 열을 그룹화 한다

<col>
<colgroup span="그룹화 할 열의 개수">

 

아래의 코드는 col 태그와 colgroup 태그로 열을 그룹지어서

1열의 너비를 80px, 2열과 3열의 너비를 150px, 4열 너비를 100px로 지정한다

<table>
    <col style="width:80px">
    <colgroup span="2" style="width:150px"></colgroup>
    <col style="widtj:100px">
    <tr>
    	<th>번호</th>
        <th>상품명</th>
        <th>수량</th>
        <th>가격</th>
    </tr>
    <tr>
          <td>1</td>
          <td>콜라</td>
          <td>1개</td>
          <td>1,500원</td>
    </tr>
    <tr>
          <td>2</td>
          <td>사이다</td>
          <td>2개</td>
          <td>1,000원</td>
    </tr>
    <tr>
          <td>3</td>
          <td>탄산수</td>
          <td>3개</td>
          <td>1,000원</td>
    </tr>
  </table>

 

---

 

8. scope 속성

표를 생성할 때 사용할 수 있는 속성 중에서 순전히 웹 접근성 향상을 목적으로 사용하는 scope 속성으로 제목을 나타내는 셀의 범위를 지정한다. 그래서 표에서 제목을 나타내는 th 태그에서만 사용이 가능하다

위의 표는 '구분, 중간고사, 기말고사, 전공, 교양'이 전부 th 태그로 작성되는 제목으로 범위가 명확하지 않다

 

이럴때 scope 속성으로 th 태그의 범위를 지정하면 웹 접근성이 향상된다.

scope 속성은 col, colgroup, row를 값으로 넣을 수 있는데 

col은 열을, row는 행을 뜻하므로 속성값에 col이 들어가면 세로 방향, row가 들어가면 가로방향이다.

 

위의 이미지를 만들기 위한 코드를 작성해보면 아래와 같다

    <table>
      <tr>
        <th scope="col">구분</th>
        <th scope="col">중간고사</th>
        <th scope="col">기말고사</th>
      </tr>
      <tr>
        <th scope="row">전공</th>
        <td>A+</td>
        <td>B+</td>
      </tr>
      <tr>
        <th scope="row">교양</th>
        <td>C-</td>
        <td>B</td>
      </tr>
    </table>