#5-2. HTML 테이블(table) 만드는 방법

# HTML에서 테이블(table)을 만드는 방법을 소개합니다.
# 테이블의 구성요소와 열을 합치는 방법, 행을 합치는 방법 등을 소개합니다.


# tag 목록을 볼 수 있는 페이지로 이동합니다.

# 비전공자가 이해한 HTML

---

HTML 테이블(TABLE)

 

---

 

1) HTML 테이블(table)이란?

테이블(table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 의미합니다.
HTML에서는 <table>태그를 사용하여 이러한 테이블을 작성할 수 있습니다.

<table>태그의 구성은 다음과 같습니다.

1. <tr>태그는 테이블에서 행을 구분
2. <th>태그는 각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨가 적용되고 정렬은 가운데 정렬
3. <td>태그는 테이블의 열을 각각의 셀(cell)로 나누어 줌

CSS의 border 속성을 이용하여 테이블에 테두리를 표현할 수 있습니다.
border 속성값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리를 가지게 됩니다.

border만 설정하면 테두리가 두 줄씩 나타나는데, 그 이유는 <table>태그와 <th>태그, <td>태그가 모두 자신만의 테두리를 가지고 있기 때문입니다.

이런 경우 두 줄로 표현되는 테두리를 한 줄로 설정하려면 border-collapse 속성을 사용해야 합니다.

<style>
  table, th, td { 
  border: 1px solid black;
  border-collapse: collapse }
  }
</style>

<table style="width:100%">
  <tr style="background-color:lightgrey">
    <th>참치</th>
    <th>고래</th>
  </tr>
  <tr>
    <td>상어</td>
    <td>문어</td>
  </tr>
  <tr>
    <td>오징어</td>
    <td>고등어</td>
  </tr>
</table>

 

---

 

2) HTML 테이블 열 합치기

colspan 속성을 이용하면 테이블의 열(column)을 합칠 수 있습니다.

<table style="width:100%">
  <tr>
    <td colspan="2">참치</td>
    <td>고래</td>
  </tr>
  <tr>
    <td>상어</td>
    <td>문어</td>
    <td>꽁치</td>
  </tr>
</table>

 

---

 

2) HTML 테이블 행 합치기

rowspan 속성을 이용하면 테이블의 행(row)을 합칠 수 있습니다.

<table style="width:100%">
  <tr>
    <td rowspan="2">참치</td>
    <td>고래</td>
    <td>날치</td>
  </tr>
  <tr>
    <td>상어</td>
    <td>문어</td>
  </tr>
</table>

 

---

 

4) HTML 테이블 캡션(caption)설정

<caption> 태그를 사용하면 테이블 상단에 제목이나 짧은 설명을 붙일 수 있습니다.

<table style="width:100%">
  <caption>해양 생물</caption>
  <tr>
    <td>참치</td>
    <td>고래</td>
    <td>상어</td>
  </tr>
</talbe>

 

---

 

해당 글은 TCP School에 있는 글을 토대로 공부한 내용입니다.