table

목차

• table
• caption
• tr, th,td
• thead, tbody, tfoot
• col, colgroup
• rowspan, colspan

---

table

표를 만듦

---

 

caption

표의 제목을 만들어줌

 

 <caption>반 성적</caption>

---

 

tr, th, td

tr태그는 row(행) 가로방향 집합, 셀때는 세로로 센다 (1행, 2행, ...)

th태그는 행의 제목(굵은 글자)

td태그는 행에 들어가는 데이터

<tr>
    <th>1반</th>
    <td>90점</td>
    <td>80점</td>
</tr>
<tr>
    <th>2반</th>
    <td>80점</td>
    <td>90점</td>
</tr>

---

 

thead, tbody, tfoot

보이는 화면에는 영향이 없지만, 코드짤때 가시성을 위해 사용

<table>
    <caption>반 성적</caption>
    <thead>
        <tr>
            <th>1반</th>
            <td>2반</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>80점</th>
            <td>90점</td>
        </tr>
        <tr>
            <th>90점</th>
            <td>80점</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>foot1</td>
            <td>foot2</td>
        </tr>
    </tfoot>
</table>

---

 

colgroup, col

coldroup>col 태그는 열(세로 방향 집합, 셀때는 가로로 센다. 1열, 2열...)을 묶어준다

.col1 {
    background-color: yellow;
}

.col2 {
    background-color: green;
}

<table>
        <caption>학급 성적표</caption>
        <colgroup>
            <col class="col1">
            <col class="col2">
            <col>
            <col>
            <col>
            <col>
        </colgroup>
        <tr>
            <th>반</th>
            <th>이름</th>
            <th>국어</th>
            <th>영어</th>
            <th>수학</th>
            <th>과학</th>
        </tr>
        <tr>
            <td>1반</td>
            <td>홍길동</td>
            <td>100</td>
            <td>80</td>
            <td>90</td>
            <td>90</td>
        </tr>
        <tr>
            <td>1반</td>
            <td>김철수</td>
            <td>80</td>
            <td>100</td>
            <td>90</td>
            <td>80</td>
        </tr>
        <tr>
            <td>평균</td>
            <td></td>
            <td>80.5</td>
            <td>80.5</td>
            <td>90.5</td>
            <td>75.5</td>
        </tr>
 </table>

 

---

rowspan, colspan

rowspan태그는 행을 합쳐줌

colspan태그는 열을 합쳐줌

합쳐지는 열,행은 th,td태그를 없애줘야함

<table>
        <caption>학급 성적표</caption>
        
        <tr>
            <th>반</th>
            <th>이름</th>
            <th>국어</th>
            <th>영어</th>
            <th>수학</th>
            <th>과학</th>
        </tr>
        <tr>
            <td rowspan="2">1반</td>
            <td>홍길동</td>
            <td>100</td>
            <td>80</td>
            <td>90</td>
            <td>90</td>
        </tr>
        <tr>
            <!-- <td>1반</td> -->
            <td>김철수</td>
            <td>80</td>
            <td>100</td>
            <td>90</td>
            <td>80</td>
        </tr>
        <tr>
            <td colspan="2">평균</td>
            <!-- <td></td> -->
            <td>80.5</td>
            <td>80.5</td>
            <td>90.5</td>
            <td>75.5</td>
        </tr>

</table>

---

Github

Link