HTML #3 - Table Tag

📍 Table Tag

표를 만드는 태그에는 table, tr, td, th가 있다.

<table> : 기본적으로 표를 생성해주는 태그
<tr> : 표의 행을 나타내는 태그
<td> : 표의 열을 나타내는 태그
<th> : 표의 제목 셀을 나타내는 태그 (글씨 진해짐)

기본적인 표 만들기

<table border="1"> <!-- border 속성 : 테두리 두께 (default = 0)-->
    <caption>테이블의 타이틀</caption>
    <tr>
        <!-- 제목을 나타내는 th는 td 속성을 대체한다 -->
        <th>제목 1</th>
        <th>제목 2</th>
    </tr>
    <tr>
        <td>섹션 1-1</td>
        <td>섹션 1-2</td>
    </tr>
    <tr>
        <td>섹션 2-1</td>
        <td>섹션 2-2</td>
    </tr>
</table>
<!-- figure : 테이블 하단에 설명을 다는 태그 -->
<figure>figure</figure>

테이블임을 명시해주는 <table>태그를 작성하고, 그 안에 <tr>로 행을, 그 안에 <td>로 열을 나타낼 수 있다.
단, 테이블의 제목을 나타낼 때에는 <td>대신 <th>를 사용해 더 강조된 표현을 할 수 있다.

표의 행 / 열 합치기

<table border="1">
    <caption>행 합치기</caption>
    <tr>
        <!-- rowspan : 행 합치기 -->
        <td rowspan="2">섹션 1-1</td>
        <td>섹션 1-2</td>
    </tr>
    <tr>
        <!-- <td>섹션 2-1</td> -->
        <td>섹션 2-2</td>
    </tr>
</table>

<table border="1">
    <caption>열 합치기</caption>
    <tr>                
        <!-- colspan : 열 합치기 -->
        <!-- width : 너비 / height : 높이 -->
        <td colspan="2" width="100" height="50" align="center">섹션 1-1</td>
        <!-- <td>섹션 1-2</td> -->
    </tr>
    <tr>
        <td>섹션 2-1</td>
        <td>섹션 2-2</td>
    </tr>
</table>