[HTML] Tables

HTML tables은 웹 개발자가 데이터를 행과 열로 배치할 수 있도록 한다.

HTML 테이블 만들기

HTML의 테이블은 행과 열 내부의 테이블 셀로 구성됩니다.

# A simple HTML table:
<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>

 

Table Cells

• 각 테이블 셀은 <td> 및 </td> 태그로 정의됩니다.
• td는 테이블 데이터를 나타냅니다.
• <td>와 </td> 사이의 모든 것은 테이블 셀의 내용입니다.

<table>
	<tr>
    	<td>Emil</td>
        <td>Tobias</td>
        <td>Linus</td>
    </tr>
</table>

• 테이블 데이터 요소는 테이블의 데이터 컨테이너입니다.
• 모든 종류의 HTML 요소를 포함할 수 있습니다.
• text, images, lists, other tables, 등등.

Table Rows

• 각 테이블 행은 <tr>로 시작하고 </tr> 태그로 끝납니다.
• tr은 테이블 행을 나타냅니다.

<table>
	<tr>
    	<td>Emil</td>
        <td>Tobias</td>
        <td>Linus</td>
    </tr>
    <tr>
    	<td>16</td>
        <td>14</td>
        <td>10</td>
    </tr>
</table>

• 테이블에 원하는 만큼의 행을 가질 수 있습니다.
• 각 행의 셀 수가 동일한지 확인하기만 하면 됩니다.

Table Headers

셀을 헤더로 사용하고 싶은 경우에 <td> 태그 대신 <th> 태그를 사용합니다.

# 첫 번째 행을 테이블 헤더로 설정합니다.
<table>
	<tr>
    	<th>Person 1</th>
        <th>Person 2</th>
        <th>Person 3</th>
    </tr>
    <tr>
    	<td>Emil</td>
        <td>Tobias</td>
        <td>Linus</td>
    </tr>
    <tr>
    	<td>16</td>
        <td>14</td>
        <td>10</td>
    </tr>
</table>

• 기본적으로 <th> 요소의 텍스트는 굵게 중앙에 표시되지만 CSS를 사용하여 변경할 수 있습니다.

HTML Table Tags

Tag	Description
<table>	테이블을 정의한다.
<th>	테이블 내에 제목 셀을 정의한다.
<tr>	테이블 내에 행을 정의한다.
<td>	테이블 내에 셀을 정의한다.
<caption>	테이블 캡션을 정의한다.
<colgroup>	형식화를 위해 테이블에 있는 하나 이상의 열 그룹을 지정합니다.
<col>	<colgroup> elements 내의 각 열에 대한 열 속성을 지정합니다.
<thead>	표의 헤더 내용을 그룹화합니다.
<tbody>	테이블의 본문 내용을 그룹화합니다.
<tfoot>	표의 바닥글 내용을 그룹화합니다.

REFERENCE

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

HTML Tables