Table

[- Disclaimer -] 아래 내용은 정보보안 공부 목적으로 작성된 것이나, 이를 토대로 허가되지 않은 대상에 실습을 진행할 경우 해킹 시도로 간주하여 법적 처벌을 받을 수 있음을 알려 드립니다.

표 구조

✦ <table>

✧ 표 전체를 담는 Container

→ Table 영역

✦ <caption>

✧ 표 제목

→ 젤 위쪽 중앙에 표시 됨

✦ <figure>, <figcaption>

✧ <figcaption> 위치에 따라 표 위나 아래에 제목 표시

✦ <th> (=<thead>)

✧ Heading Cell Group

→ Table 굵게 한 칸 + 정렬

Ex)
<th colspan=5>    // 행 병합 (5칸)
<th rowspan=5>    // 열 병합 (5칸)
Plain Text
복사

✧ 여러 <tr> 포함 가능

✦ <td> (=<tbody>)

✧ Data Cell Group

→ Table 한 칸

✧ 여러 <tr> 포함 가능

✦ <tf> (=<tfoot>)

✧ 바닥 Cell Group

✧ 여러 <tr> 포함 가능

✦ <tr>

✧ row

→ Table 한 줄

✦ 표는 여러 row와 Column 으로 구성되며 한 row 및 Column은 여러 Cell로 구성

✦ 시각 장애인도 화면 판독기를 통해 표 구조 쉽게 이해 가능

✦ 본문 길어질 경우 Java Script를 써 제목, 바닥 고정 후 본문만 독립적으로 Scroll되게 할 수 있음

Ex) - 1

<table>
    <tr>
        <th>클라우드 슈밥</th>
        <td>뿌뿌</td>
        <td>피피</td>
    </tr>
    <tr>
        <th>질 칼라이</th>
        <td>I Say Ho !</td>
        <td>You Say Do !</td>
    </tr>
</table>
Plain Text
복사

클라우드 슈밥	뿌뿌	피피
질 칼라이	I Say Ho !	You Say Do !
Plain Text
복사

Ex) - 2

<table border="20">    // 20 Pixel 테두리. 가급적 CSS 3 표현 권장
    <caption>ㅇㅅㅇ</caption>
    <th>
        <tr><th>호두</th><th>호마봉</th><th>용학살창<th></tr>
    </th>
    <tb>
        <tr><td>왕생당</td><td>당주</td><td>굿굿</td></tr>
        <tr><td>두려움따윈없어</td><td>아쎄호</td><td>유쎄두</td></tr>
    </tb>
    <tf>
        <tr><th>결론</th><th>결론</th><th>결론</th></tr>
    </tf>
</table>
Plain Text
복사

Ex) - 3

✦ 표에 Image 삽입

<table>
    <caption>ㅇㅅㅇ</caption>
    <tb>
        <tr>
            <td><img src="ㅇㅅㅇ.jpg"></td>
            <td><img src="ㅎㅉㅎ.jpg"></td>
        </tr>
    </tb>
</table>
Plain Text
복사

Ex) - 4

<figure>
    <figcaption>
    <p>ㅎㅇ<b>
    ㅇㅅㅇ</b></p>
    </figcaption>
    <table border="200">
        <tr>...</tr>
    </table>
</figure>
Plain Text
복사

✦ <td> 요소의 rowspan 속성과 colspan 속성을 사용하여 row Cell, Column Cell 병합

<table border="1">
    <tr>
        <td rowspan="3">아래 칸 Cell 합쳐진 상태(1)<br>아래 칸 Cell 합쳐진 상태(2)</td><td>1행 2열</td>
    </tr>
    <tr>
        <td>2행 2열</td>
    </tr>
    <tr>
        <td>3행 2열</td>
    </tr>
Plain Text
복사

<table border="1">
    <tr>
        <td colspan="3">옆 칸 Cell 합쳐진 상태</td>
    </tr>
    <tr>
        <td>2행 1열</td><td>2행 2열</td><td>2행 3열</td>
    </tr>
    <tr>
        <td>3행 1열</td><td>3행 2열</td><td>3행 3열</td>
    </tr>
Plain Text
복사

<table border="1">
    <colgroup>
        <col style="width:100px;">
        <col style="width:300px;">
        <col style="width:100px;">
        <col style="width:300px;">
    </colgroup>
    <tr>
        <th>Nickname</th>
        <td></td>
        <th>Contact</th>
        <td></td>
    </tr>
    <tr>
        <th>Hobby</th>
        <td Colspan="3"></td>
    </tr>
    <tr>
        <th>what I want to say</th>
        <td colspan="3"></td>
    </tr>
</table>
Plain Text
복사

✦ Column을 묶어 Style 지정

✦ <caption> 뒤에 사용 및 <tr>, <td> 전에 사용

✦ <Col>

✧ Column 1개를 묶어 style 지정

✦ <colgroup>

✧ 여러 Column을 묶어 Style 지정

→ 여러 <col> 사용

<table border="1">
    <caption>ㅇㅅㅇ</caption>
    <colgroup>
        <col>
        <col span="2" style="background-color:skyblue">
        <col style="background-color:yellow">
    </colgroup>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
Plain Text
복사