프론트엔드-03.HTML Table(테이블)

테이블

• 표 작성

<table> : 표 태그
<caption> : 표의 제목
<tr> : 행 (column)
<td> : 열 (row)
<th> : 제목행 (굵은 글씨)

그룹화
<thead> : 테이블 제목 구분 표시
<tbody> : 테이블 바디 구분 표시
<tfoot> : 테이블 풋 구분 표시

• 기타 테이블에서 자주 쓰이는 속성 값

<table border = "1"> : 테이블간의 선
<table cellspacing = "5px"> : 셀 간 거리
<td colspan="2"> : 열을 해당 개수만큼 합침 (가로)
<td rowspan="2"> : 행을 해당 개수만큼 합침 (세로)

실제로 작성을 통해 표가 어떻게 작성되는지 알아보자.

Ex)

     <table>
        <caption>표의 제목</caption>
        <thead>
            <th>
                <th>제목칸</th> <!-- th는 굵은 글씨로 나타남 -->
                <th colspan="2">1행 2, 3열</th>
                <th>1행 3열</th>
            </th>
        </thead>
        <tbody>
            <tr>
                <td>2행 1열</td>
                <td rowspan="2">2, 3행 2열</td>
                <td>2행 3열</td>
                <td>2행 4열</td>
            </tr>
            <tr>
                <td>3행 1열</td>
                <td>3행 3열</td>
                <td>3행 4열</td>
            </tr>
        </tbody>
    </table>

Result. (실제 HTML에서는 border 및 스타일 없이 나타남)

표의 제목

제목칸	1행 2, 3열	1행 4열
2행 1열	2, 3행 2열	2행 3열	2행 4열
3행 1열	3행 3열	3행 4열

Ex) 작성해보자

<table border="1">
<tr>
    <td>
    	<p>단락 입니다</p>
        <p>단락 입니다</p>
    </td>
    <td>셀 안에 테이블
        <table border="1">
        	<tr>
            	<td>1 1</td>
            	<td>1 2</td>
        	</tr>
        	<tr>
            	<td>2 1</td>
                <td>2 2</td>
    		</tr>
        </table>
	</td>
</tr>
</table>

Result.

단락 입니다 단락 입니다

셀 안에 테이블 1 1 1 2 2 1 2 2

• 참고 : 테이블 태그를 간단히 작성하는 사이트
  https://www.tablesgenerator.com/html_tables