[HTML] 테이블(Table) 태그

*작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다.

 

테이블 태그는 표를 만들 수 있는 태그이다.

관련된 태그가 많기는 하지만 중요하게 사용하는 것들은 많지 않다.

 

가장 기본적으로 알고 있어야 할 태그들은 <table>, <tr>, <th>, <td>이다.

이 네가지 태그만 알고 있어도 표를 만드는 데 문제는 없다.

 

1. <table> </table>

테이블 영역을 생성한다.

 

2. <tr> </tr>

테이블의 한 줄을 의미한다.

 

3. <th> </th>

테이블에서 헤더 데이터를 삽입한다. 굵은 글씨로 표시된다.

 

4. <td> </td>

테이블에 데이터 하나를 삽입한다.

 

위의 네가지로 만든 테이블을 예제로 보자.

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

 

 

이것이 표처럼 보이지 않을 수 있다.

아직 배우지는 않았지만, 이 표에 CSS를 적용하면 아래와 같이 보일 수 있다.

혹시나, CSS 코드가 궁금하다면 (더보기)를 눌러주기..✌

CSS에서 표의 크기, 테두리, 여백, 정렬 등을 조절할 수 있다.

https://www.w3schools.com/html/html_table_borders.asp

HTML Table Borders

 

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

 

 

5. 셀 병합

테이블에서 자주 사용되는 속성으로 colspan과 rowspan이 있다.

colspan은 가로 줄을 병합하고, rowspan은 세로 줄을 병합한다.

예를 들어, <td colspan="3">Header</td> 라는 코드는 Header라고 입력된 칸이 가로로 세 칸을 차지한다.

<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>