๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Mark Up/HTML

[HTML5]์‰ฝ๊ณ  ๊ฐ„ํŽธํ•œ HTML Table ๋งŒ๋“ค๊ธฐ: ์ดˆ๋ณด์ž๋„ ํ•  ์ˆ˜ ์žˆ๋Š” ์™„๋ฒฝ ๊ฐ€์ด๋“œ

by YJ Dev 2024. 5. 23.
728x90
๋ฐ˜์‘ํ˜•
SMALL

HTML Table์€ ์›น ํŽ˜์ด์ง€์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ฒด๊ณ„์ ์œผ๋กœ ํ‘œ์‹œํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” HTML ํ‘œ๋ฅผ ๋งŒ๋“œ๋Š” ๊ธฐ๋ณธ ๋ฐฉ๋ฒ•๋ถ€ํ„ฐ ๋‹ค์–‘ํ•œ ์†์„ฑ๊ณผ ์Šคํƒ€์ผ๋ง ๊ธฐ๋ฒ•, ๊ทธ๋ฆฌ๊ณ  ์ ‘๊ทผ์„ฑ ํ–ฅ์ƒ ๋ฐฉ๋ฒ•์„ ์†Œ๊ฐœํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

html table

HTML Table์˜ ๊ตฌ์กฐ๐Ÿ 

HTML table์€ ์›น ํŽ˜์ด์ง€์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ฒด๊ณ„์ ์œผ๋กœ ํ‘œ์‹œํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” ์ค‘์š”ํ•œ ์š”์†Œ์ž…๋‹ˆ๋‹ค.
๊ธฐ๋ณธ์ ์œผ๋กœ <table> ํƒœ๊ทธ๋กœ ์‹œ์ž‘ํ•˜๊ณ , ํ‘œ์˜ ํ–‰(row), ์—ด(column), ๋จธ๋ฆฌ๊ธ€(header) ๋“ฑ์œผ๋กœ ๊ตฌ์„ฑ๋ฉ๋‹ˆ๋‹ค. ๊ฐ ์š”์†Œ๋Š” HTML ํƒœ๊ทธ๋กœ ์ •์˜๋ฉ๋‹ˆ๋‹ค. ์•„๋ž˜์—์„œ HTML table์˜ ๊ธฐ๋ณธ ๊ตฌ์กฐ์™€ ๊ฐ ์š”์†Œ์˜ ์—ญํ• ์„ ์ž์„ธํžˆ ์„ค๋ช…ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

<table> ํƒœ๊ทธ

<table> ํƒœ๊ทธ๋Š” ํ‘œ๋ฅผ ์ •์˜ํ•˜๋Š” ๊ฐ€์žฅ ๋ฐ”๊นฅ์ชฝ ํƒœ๊ทธ์ž…๋‹ˆ๋‹ค. ์ด ํƒœ๊ทธ ์•ˆ์— ํ‘œ์˜ ๋ชจ๋“  ๋‚ด์šฉ์ด ํฌํ•จ๋ฉ๋‹ˆ๋‹ค.

<table>
    <!-- ํ‘œ์˜ ๋‚ด์šฉ์ด ์—ฌ๊ธฐ์— ๋“ค์–ด๊ฐ‘๋‹ˆ๋‹ค -->
</table>

<tr> ํƒœ๊ทธ

<tr> ํƒœ๊ทธ๋Š” ํ‘œ์˜ ํ–‰(row)์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ ํ–‰์€ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์…€(cell)๋กœ ๊ตฌ์„ฑ๋˜๋ฉฐ, ์ด๋Ÿฌํ•œ ์…€๋“ค์€ <td>๋˜๋Š” <th> ํƒœ๊ทธ๋กœ ์ •์˜๋ฉ๋‹ˆ๋‹ค.

<table>
    <tr>
        <!-- ํ–‰์˜ ๋‚ด์šฉ์ด ์—ฌ๊ธฐ์— ๋“ค์–ด๊ฐ‘๋‹ˆ๋‹ค -->
    </tr>
</table>

<td> ํƒœ๊ทธ

<td> ํƒœ๊ทธ๋Š” ํ‘œ์˜ ๋ฐ์ดํ„ฐ ์…€(data cell)์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ ์…€์€ ๊ฐœ๋ณ„ ๋ฐ์ดํ„ฐ๋ฅผ ํฌํ•จํ•˜๋ฉฐ, <tr> ํƒœ๊ทธ ์•ˆ์— ์œ„์น˜ํ•ฉ๋‹ˆ๋‹ค.

<table>
    <tr>
        <td>๋‚ด์šฉ 1</td>
        <td>๋‚ด์šฉ 2</td>
    </tr>
</table>

<th> ํƒœ๊ทธ

<th> ํƒœ๊ทธ๋Š” ํ‘œ์˜ ๋จธ๋ฆฌ๊ธ€ ์…€(header cell)์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ๋จธ๋ฆฌ๊ธ€ ์…€์€ ๋ณดํ†ต ํ…์ŠคํŠธ๋ฅผ ๊ตต๊ฒŒ ํ‘œ์‹œํ•˜๊ณ  ์ค‘์•™ ์ •๋ ฌํ•ฉ๋‹ˆ๋‹ค.
<th> ํƒœ๊ทธ๋Š” <tr> ์•ˆ์— ์œ„์น˜ํ•˜๋ฉฐ, ์ฃผ๋กœ ํ‘œ์˜ ์ฒซ ๋ฒˆ์งธ ํ–‰์— ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

<table>
    <tr>
        <th>์ œ๋ชฉ 1</th>
        <th>์ œ๋ชฉ 2</th>
    </tr>
    <tr>
        <td>๋‚ด์šฉ 1</td>
        <td>๋‚ด์šฉ 2</td>
    </tr>
</table>

๋จธ๋ฆฌ๊ธ€๊ณผ ๋ณธ๋ฌธ ๊ตฌ๋ถ„: <thead>, <tbody>, <tfoot> ํƒœ๊ทธ ๐ŸŒˆ

HTML ํ‘œ๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์ฒด๊ณ„์ ์œผ๋กœ ํ‘œ์‹œํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค์–‘ํ•œ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๊ทธ์ค‘์—์„œ๋„ <thead>, <tbody>, <tfood> ํƒœ๊ทธ๋Š” ๋Š” ํ–‰์„ ๋ฌถ์–ด ๊ทธ๋ฃนํ™”ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, ํ‘œ์˜ ๋จธ๋ฆฌ๊ธ€, ๋ณธ๋ฌธ, ๋ฐ”๋‹ฅ๊ธ€์„ ์ •์˜ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ด ํƒœ๊ทธ๋“ค์„ ์‚ฌ์šฉํ•˜๋ฉด ํ‘œ์˜ ๊ตฌ์กฐ๋ฅผ ๋” ๋ช…ํ™•ํ•˜๊ฒŒ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ๊ณ , ์Šคํƒ€์ผ๋ง ๋ฐ ์ ‘๊ทผ์„ฑ์„ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<thead> ํƒœ๊ทธ

<thead> ํƒœ๊ทธ๋Š” ํ‘œ์˜ ๋จธ๋ฆฌ๊ธ€ ๋ถ€๋ถ„์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ์—ด ์ œ๋ชฉ์„ ํฌํ•จํ•˜๋Š” ํ–‰์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค. <thead> ํƒœ๊ทธ ์•ˆ์—๋Š” ํ•˜๋‚˜ ์ด์ƒ์˜ <tr> ํƒœ๊ทธ๊ฐ€ ๋“ค์–ด๊ฐ€๋ฉฐ, <tr> ํƒœ๊ทธ ์•ˆ์—๋Š” <th> ํƒœ๊ทธ๊ฐ€ ์ฃผ๋กœ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

<table>
    <thead>
        <tr>
            <th>์ œ๋ชฉ 1</th>
            <th>์ œ๋ชฉ 2</th>
        </tr>
    </thead>
    <!-- ํ‘œ์˜ ๋ณธ๋ฌธ ๋ฐ ๋ฐ”๋‹ฅ๊ธ€ -->
</table>

<tbody> ํƒœ๊ทธ

<tbody> ํƒœ๊ทธ๋Š”ํ‘œ์˜ ๋ณธ๋ฌธ ๋ถ€๋ถ„์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ ํ–‰๋“ค์„ ํฌํ•จํ•˜๋ฉฐ, <tbody> ํƒœ๊ทธ ์•ˆ์—๋Š” ์—ฌ๋Ÿฌ ๊ฐœ์˜ <tr> ํƒœ๊ทธ๊ฐ€ ๋“ค์–ด๊ฐ‘๋‹ˆ๋‹ค. ๊ฐ <tr> ํƒœ๊ทธ ์•ˆ์—๋Š” <th> ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐœ๋ณ„ ์…€์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.

<table>
    <!-- ํ‘œ์˜ ๋จธ๋ฆฌ๊ธ€ -->
    <tbody>
        <tr>
            <td>๋‚ด์šฉ 1</td>
            <td>๋‚ด์šฉ 2</td>
        </tr>
        <tr>
            <td>๋‚ด์šฉ 3</td>
            <td>๋‚ด์šฉ 4</td>
        </tr>
    </tbody>
    <!-- ํ‘œ์˜ ๋ฐ”๋‹ฅ๊ธ€ -->
</table>

<tfoot> ํƒœ๊ทธ

<tfoot>ํƒœ๊ทธ๋Š”ํ‘œ์˜ ๋ฐ”๋‹ฅ๊ธ€ ๋ถ€๋ถ„์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ํ‘œ์˜ ์š”์•ฝ ์ •๋ณด๋‚˜ ์ด๊ณ„๋ฅผ ํฌํ•จํ•˜๋Š” ํ–‰์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.<tfoot> ํƒœ๊ทธ ์•ˆ์—๋Š” ํ•˜๋‚˜ ์ด์ƒ์˜ <tr> ํƒœ๊ทธ๊ฐ€ ๋“ค์–ด๊ฐ€๋ฉฐ, <tr> ํƒœ๊ทธ ์•ˆ์—๋Š” <td> ํƒœ๊ทธ๊ฐ€ ์ฃผ๋กœ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

<table>
    <!-- ํ‘œ์˜ ๋จธ๋ฆฌ๊ธ€ ๋ฐ ๋ณธ๋ฌธ -->
    <tfoot>
        <tr>
            <td>๋ฐ”๋‹ฅ๊ธ€ 1</td>
            <td>๋ฐ”๋‹ฅ๊ธ€ 2</td>
        </tr>
    </tfoot>
</table>

<thead>, <tbody>, <tfoot> ๊ตฌ์กฐ ์˜ˆ์ œ

<table>
    <thead>
        <tr>
            <th>์ œ๋ชฉ 1</th>
            <th>์ œ๋ชฉ 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>๋‚ด์šฉ 1</td>
            <td>๋‚ด์šฉ 2</td>
        </tr>
        <tr>
            <td>๋‚ด์šฉ 3</td>
            <td>๋‚ด์šฉ 4</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>๋ฐ”๋‹ฅ๊ธ€ 1</td>
            <td>๋ฐ”๋‹ฅ๊ธ€ 2</td>
        </tr>
    </tfoot>
</table>

์ด ์˜ˆ์ œ๋Š” ํ‘œ์˜ ๊ฐ ๋ถ€๋ถ„์„ ๋ช…ํ™•ํ•˜๊ฒŒ ๊ตฌ๋ถ„ํ•˜์—ฌ ๊ตฌ์กฐํ™”๋œ ๋ฐ์ดํ„ฐ๋ฅผ ์ œ๊ณตํ•˜๋ฉฐ, ํ‘œ์˜ ๋จธ๋ฆฌ๊ธ€, ๋ณธ๋ฌธ, ๋ฐ”๋‹ฅ๊ธ€์„ ๊ฐ๊ฐ <thead>, <tbody>, <tfoot> ํƒœ๊ทธ๋กœ ๋‚˜๋ˆ„์–ด ์ •์˜ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ํ‘œ์˜ ๊ตฌ์กฐ๋ฅผ ๋” ๋ช…ํ™•ํžˆ ํ•˜๊ณ , ์Šคํƒ€์ผ๋ง ๋ฐ ์ ‘๊ทผ์„ฑ์„ ๋”์šฑ ํ–ฅ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ „์ฒด HTML Table ๊ตฌ์กฐ ์˜ˆ์ œ

์•„๋ž˜๋Š” ์œ„์—์„œ ์„ค๋ช…ํ•œ ๋ชจ๋“  ์š”์†Œ๋ฅผ ํฌํ•จํ•œ HTML table์˜ ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML Table ์˜ˆ์ œ</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>์ œ๋ชฉ 1</th>
                <th>์ œ๋ชฉ 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>๋‚ด์šฉ 1</td>
                <td>๋‚ด์šฉ 2</td>
            </tr>
            <tr>
                <td>๋‚ด์šฉ 3</td>
                <td>๋‚ด์šฉ 4</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>๋ฐ”๋‹ฅ๊ธ€ 1</td>
                <td>๋ฐ”๋‹ฅ๊ธ€ 2</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

์ด ์˜ˆ์ œ๋Š” ๊ฐ„๋‹จํ•œ 2x3 ํ‘œ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. <thead>, <tbody>, <tfoot> ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ‘œ์˜ ๋จธ๋ฆฌ๊ธ€, ๋ณธ๋ฌธ, ๋ฐ”๋‹ฅ๊ธ€์„ ๋ช…ํ™•ํžˆ ๊ตฌ๋ถ„ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ ํ–‰์€ <tr> ํƒœ๊ทธ๋กœ ์ •์˜๋˜๊ณ , ๊ฐ ์…€์€ <td> ๋ฐ <th> ํƒœ๊ทธ๋กœ ์ •์˜๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์—ด ๊ทธ๋ฃนํ™”: <col>, <colgroup> ํƒœ๊ทธโญ

<col> ๋ฐ <colgroup> ํƒœ๊ทธ๋Š” HTML ํ…Œ์ด๋ธ”์˜ ์—ด์„ ์ •์˜ํ•˜๊ณ  ์Šคํƒ€์ผ์„ ์ ์šฉํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

<col> ํƒœ๊ทธ

<col> ํƒœ๊ทธ๋Š” ํ…Œ์ด๋ธ”์˜ ์—ด์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ <col> ํƒœ๊ทธ๋Š” ํ…Œ์ด๋ธ”์˜ ์—ด ํ•˜๋‚˜์— ํ•ด๋‹นํ•˜๋ฉฐ, ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ํ•ด๋‹น ์—ด์— ์Šคํƒ€์ผ์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์Šคํƒ€์ผ๋ง์€ ํŠน์ • ์—ด์—๋งŒ ์ ์šฉ๋˜๋ฉฐ, <th> ๋ฐ <td> ํƒœ๊ทธ์—์„œ ์Šคํƒ€์ผ์„ ์˜ค๋ฒ„๋ผ์ด๋“œ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<colgroup> ํƒœ๊ทธ

<colgroup> ํƒœ๊ทธ๋Š” ์—ฐ๊ด€๋œ ์—ด๋“ค์„ ๊ทธ๋ฃนํ™”ํ•˜์—ฌ ์Šคํƒ€์ผ์„ ์ ์šฉํ•  ๋•Œ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. <col> ํƒœ๊ทธ์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜์—ฌ ์—ด ๊ทธ๋ฃน์— ๋Œ€ํ•œ ์Šคํƒ€์ผ์„ ํ•œ๊บผ๋ฒˆ์— ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. <col> ํƒœ๊ทธ์™€ <colgroup> ํƒœ๊ทธ๋ฅผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜์—ฌ ํ…Œ์ด๋ธ”์˜ ์—ด์— ๋Œ€ํ•œ ์Šคํƒ€์ผ๋ง ๋ฐ ๊ตฌ์กฐ๋ฅผ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<col>, <colgroup> ํƒœ๊ทธ ์˜ˆ์ œ

<table>
  <colgroup>
    <col style="background-color: lightblue;">
    <col style="background-color: lightgreen;">
  </colgroup>
  <tr>
    <th>์ œ๋ชฉ 1</th>
    <th>์ œ๋ชฉ 2</th>
  </tr>
  <tr>
    <td>๋‚ด์šฉ 1</td>
    <td>๋‚ด์šฉ 2</td>
  </tr>
</table>

์ด ํ‘œ๋Š” <colgroup> ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‘ ๊ฐœ์˜ ์—ด ๊ทธ๋ฃน์„ ์ •์˜ํ•˜๊ณ  ๊ฐ ์—ด์— ๋ฐฐ๊ฒฝ์ƒ‰์„ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. ์ฒซ ๋ฒˆ์งธ ์—ด์€ ์—ฐํ•œ ํŒŒ๋ž€์ƒ‰(lightblue) ๋ฐฐ๊ฒฝ์ƒ‰์ด ์ ์šฉ๋˜๊ณ , ๋‘ ๋ฒˆ์งธ ์—ด์€ ์—ฐํ•œ ๋…น์ƒ‰(lightgreen) ๋ฐฐ๊ฒฝ์ƒ‰์ด ์ ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์Šคํƒ€์ผ์€ ๊ฐ ์—ด์— ์ผ๊ด„์ ์œผ๋กœ ์ ์šฉ๋˜๋ฉฐ, ํ…Œ์ด๋ธ”์˜ ๋จธ๋ฆฌ๊ธ€๊ณผ ๋ณธ๋ฌธ์—๋Š” ์ œ๋ชฉ 1๊ณผ ์ œ๋ชฉ 2, ๋‚ด์šฉ 1๊ณผ ๋‚ด์šฉ 2๊ฐ€ ํฌํ•จ๋ฉ๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ํ‘œ์˜ ์—ด์„ ์‹œ๊ฐ์ ์œผ๋กœ ๊ทธ๋ฃนํ™”ํ•˜๊ณ  ๊ฐ ์—ด์— ์ผ๊ด€๋œ ์Šคํƒ€์ผ์„ ์ ์šฉํ•˜์—ฌ ๊ฐ€๋…์„ฑ์„ ํ–ฅ์ƒํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

HTML Table ์…€ ๋ณ‘ํ•ฉํ•˜๊ธฐ: colspan๊ณผ rowspanโญ

HTML table์—์„œ ์…€์„ ๋ณ‘ํ•ฉํ•˜๋ฉด ๋” ๋ณต์žกํ•œ ๋ ˆ์ด์•„์›ƒ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์…€ ๋ณ‘ํ•ฉ์—๋Š” ๋‘ ๊ฐ€์ง€ ์ฃผ์š” ์†์„ฑ์ธ colspan๊ณผ rowspan์ด ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. colspan์€ ์…€์„ ๊ฐ€๋กœ๋กœ ๋ณ‘ํ•ฉํ•˜๊ณ , rowspan์€ ์…€์„ ์„ธ๋กœ๋กœ ๋ณ‘ํ•ฉํ•ฉ๋‹ˆ๋‹ค. ์…€์„ ๋ณ‘ํ•ฉํ•  ๋•Œ ๊ฐ ์…€์˜ ์œ„์น˜๋ฅผ ์ •ํ™•ํžˆ ์ง€์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ž˜๋ชป๋œ ์œ„์น˜์— ๋ณ‘ํ•ฉ์„ ์‹œ๋„ํ•˜๋ฉด ์˜ˆ๊ธฐ์น˜ ์•Š์€ ๊ฒฐ๊ณผ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์†์„ฑ๊ณผ ์‚ฌ์šฉ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ์ด ๊ธฐ๋Šฅ์„ ์ž์„ธํžˆ ์„ค๋ช…ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

colspan : ์…€์„ ๊ฐ€๋กœ๋กœ ๋ณ‘ํ•ฉ

colspan ์†์„ฑ์€ ํ•˜๋‚˜์˜ ์…€์ด ์—ฌ๋Ÿฌ ์—ด์„ ์ฐจ์ง€ํ•˜๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, colspan="2" ๋Š” ํ•ด๋‹น ์…€์ด ๋‘ ๊ฐœ์˜ ์—ด์— ๊ฑธ์ณ ์žˆ์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

<table>
    <tr>
        <th>์ œ๋ชฉ 1</th>
        <th>์ œ๋ชฉ 2</th>
        <th>์ œ๋ชฉ 3</th>
    </tr>
    <tr>
        <td colspan="2">๊ฐ€๋กœ๋กœ ๋ณ‘ํ•ฉ๋œ ์…€</td>
        <td>๋‚ด์šฉ 3</td>
    </tr>
    <tr>
        <td>๋‚ด์šฉ 1</td>
        <td>๋‚ด์šฉ 2</td>
        <td>๋‚ด์šฉ 3</td>
    </tr>
</table>

์œ„ ์˜ˆ์ œ์—์„œ ๋‘ ๋ฒˆ์งธ ํ–‰์˜ ์ฒซ ๋ฒˆ์งธ ์…€์€ colspan="2"์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋‘ ๊ฐœ์˜ ์—ด์„ ๋ณ‘ํ•ฉํ•ฉ๋‹ˆ๋‹ค.

rowpan : ์…€์„ ์„ธ๋กœ๋กœ ๋ณ‘ํ•ฉ

rowspan ์†์„ฑ์€ ํ•˜๋‚˜์˜ ์…€์ด ์—ฌ๋Ÿฌ ํ–‰์„ ์ฐจ์ง€ํ•˜๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, rowspan="2"๋Š” ํ•ด๋‹น ์…€์ด ๋‘ ๊ฐœ์˜ ํ–‰์— ๊ฑธ์ณ ์žˆ์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

<table>
    <tr>
        <th>์ œ๋ชฉ 1</th>
        <th>์ œ๋ชฉ 2</th>
        <th>์ œ๋ชฉ 3</th>
    </tr>
    <tr>
        <td rowspan="2">์„ธ๋กœ๋กœ ๋ณ‘ํ•ฉ๋œ ์…€</td>
        <td>๋‚ด์šฉ 2</td>
        <td>๋‚ด์šฉ 3</td>
    </tr>
    <tr>
        <td>๋‚ด์šฉ 4</td>
        <td>๋‚ด์šฉ 5</td>
    </tr>
</table>

์œ„ ์˜ˆ์ œ์—์„œ ๋‘ ๋ฒˆ์งธ ํ–‰์˜ ์ฒซ ๋ฒˆ์งธ ์…€์€ rowspan="2" ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋‘ ๊ฐœ์˜ ํ–‰์„ ๋ณ‘ํ•ฉํ•ฉ๋‹ˆ๋‹ค.

์ „์ฒด ์˜ˆ์ œ: colspan๊ณผ rowspan ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๊ธฐ

์•„๋ž˜๋Š” colspan๊ณผ rowspan ์†์„ฑ์„ ๋ชจ๋‘ ์‚ฌ์šฉํ•˜์—ฌ ์…€์„ ๋ณ‘ํ•ฉํ•œ ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>์…€ ๋ณ‘ํ•ฉ ์˜ˆ์ œ</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>์ œ๋ชฉ 1</th>
            <th>์ œ๋ชฉ 2</th>
            <th>์ œ๋ชฉ 3</th>
        </tr>
        <tr>
            <td rowspan="2" colspan="2">๊ฐ€๋กœ์™€ ์„ธ๋กœ๋กœ ๋ณ‘ํ•ฉ๋œ ์…€</td>
            <td>๋‚ด์šฉ 3</td>
        </tr>
        <tr>
            <td>๋‚ด์šฉ 4</td>
        </tr>
        <tr>
            <td>๋‚ด์šฉ 1</td>
            <td>๋‚ด์šฉ 2</td>
            <td>๋‚ด์šฉ 3</td>
        </tr>
    </table>
</body>
</html>


์ด ์˜ˆ์ œ์—์„œ๋Š” ์ฒซ ๋ฒˆ์งธ ์…€์„ rowspan="2"์™€ colspan="2" ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ๋‘ ๊ฐœ์˜ ์—ด๊ณผ ๋‘ ๊ฐœ์˜ ํ–‰์„ ๋ณ‘ํ•ฉํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๋ณต์žกํ•œ ๋ ˆ์ด์•„์›ƒ์„ ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

HTML ํ‘œ ์Šคํƒ€์ผ๋ง๐Ÿฐ

HTML์—์„œ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ํ…Œ๋‘๋ฆฌ๊ฐ€ ์—†๊ฒŒ ์„ค์ •๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ํ…Œ๋‘๋ฆฌ๋ฅผ ํฌํ•จํ•œ ์Šคํƒ€์ผ๋ง์„ ์ ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” CSS๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด ์˜ˆ์ œ๋Š” CSS๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ…Œ๋‘๋ฆฌ, ์…€ ์—ฌ๋ฐฑ, ๋ฐฐ๊ฒฝ์ƒ‰, ํ…์ŠคํŠธ ์ •๋ ฌ ๋“ฑ์„ ์„ค์ •ํ–ˆ์Šต๋‹ˆ๋‹ค. HTML table์„ ์Šคํƒ€์ผ๋งํ•  ๋•Œ CSS๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋” ๋งŽ์€ ์ œ์–ด์™€ ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML Table ์Šคํƒ€์ผ๋ง ์˜ˆ์ œ</title>
    <style>
        /* table ์ „์ฒด์˜ ์Šคํƒ€์ผ์„ ์ •์˜ */
        table {
            width: 100%; /* ํ‘œ ๋„ˆ๋น„๋ฅผ 100%๋กœ ์„ค์ • */
            border-collapse: collapse; /* ์…€ ๊ฐ„์˜ ๊ฐ„๊ฒฉ์„ ์ œ๊ฑฐํ•˜์—ฌ ํ•˜๋‚˜์˜ ํ…Œ๋‘๋ฆฌ์ฒ˜๋Ÿผ ๋ณด์ด๊ฒŒ ํ•จ */
        }
        /* ํ‘œ ๋จธ๋ฆฌ๊ธ€(th)์™€ ๋ฐ์ดํ„ฐ ์…€(td)์˜ ์Šคํƒ€์ผ์„ ์ •์˜ */
        th, td {
            border: 1px solid black; /* ๊ฐ ์…€์— ๊ฒ€์€์ƒ‰ ํ…Œ๋‘๋ฆฌ ์„ค์ • */
            padding: 10px; /* ์…€ ๋‚ด๋ถ€ ์—ฌ๋ฐฑ ์„ค์ • */
            text-align: center; /* ์…€ ๋‚ด์˜ ํ…์ŠคํŠธ๋ฅผ ์ค‘์•™ ์ •๋ ฌ */
        }
        /* ํ‘œ ๋จธ๋ฆฌ๊ธ€(th) ์…€์˜ ์Šคํƒ€์ผ์„ ์ •์˜ */
        th {
            background-color: #f2f2f2; /* ๋จธ๋ฆฌ๊ธ€ ์…€์˜ ๋ฐฐ๊ฒฝ์ƒ‰์„ ์—ฐํšŒ์ƒ‰์œผ๋กœ ์„ค์ • */
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>์ œ๋ชฉ 1</th>
                <th>์ œ๋ชฉ 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>๋‚ด์šฉ 1</td>
                <td>๋‚ด์šฉ 2</td>
            </tr>
            <tr>
                <td>๋‚ด์šฉ 3</td>
                <td>๋‚ด์šฉ 4</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>๋ฐ”๋‹ฅ๊ธ€ 1</td>
                <td>๋ฐ”๋‹ฅ๊ธ€ 2</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

์›น ์ ‘๊ทผ์„ฑ ๊ณ ๋ ค๐Ÿ€

์›น ์ ‘๊ทผ์„ฑ์€ ๋ชจ๋“  ์‚ฌ์šฉ์ž๊ฐ€ ์›น ์ฝ˜ํ…์ธ ์— ๋™๋“ฑํ•˜๊ฒŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋„๋ก ๋ณด์žฅํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์žฅ์• ๋ฅผ ๊ฐ€์ง„ ์‚ฌ์šฉ์ž, ๊ณ ๋ น์ž, ๊ธฐ์ˆ ์ ์œผ๋กœ ์•ฝํ•œ ์‚ฌ์šฉ์ž ๋“ฑ ๋ชจ๋“  ์‚ฌ์šฉ์ž๊ฐ€ ์›น ์ฝ˜ํ…์ธ ๋ฅผ ์ดํ•ดํ•˜๊ณ  ์ƒํ˜ธ ์ž‘์šฉํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ํŠนํžˆ, ํ‘œ์™€ ๊ด€๋ จ๋œ ์›น ์ ‘๊ทผ์„ฑ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์†์„ฑ๊ณผ ํƒœ๊ทธ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๋ณด์žฅ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  1. ์˜๋ฏธ ์žˆ๋Š” ํƒœ๊ทธ ์‚ฌ์šฉ
    <table>, <caption>, <thead>, <tbody>, <tfoot>, <th>, <td>์™€ ๊ฐ™์€ ์˜๋ฏธ ์žˆ๋Š” HTML ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ‘œ์˜ ๊ตฌ์กฐ๋ฅผ ๋ช…ํ™•ํžˆ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.
  2. ํ…Œ์ด๋ธ” ์š”์•ฝ
    <caption> ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ‘œ์˜ ์š”์•ฝ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ํ™”๋ฉด ํŒ๋…๊ธฐ ์‚ฌ์šฉ์ž์—๊ฒŒ ํ‘œ์˜ ๋‚ด์šฉ์„ ์ดํ•ดํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.
  3. ํ…Œ์ด๋ธ” ๋จธ๋ฆฌ๊ธ€๊ณผ ๋ฐ”๋‹ฅ๊ธ€
    <thead>์™€ <tfoot> ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ‘œ์˜ ๋จธ๋ฆฌ๊ธ€๊ณผ ๋ฐ”๋‹ฅ๊ธ€์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ํ™”๋ฉด ํŒ๋…๊ธฐ ์‚ฌ์šฉ์ž์—๊ฒŒ ํ‘œ์˜ ๊ตฌ์กฐ๋ฅผ ์ดํ•ดํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.
  4. ํ—ค๋”์™€ ์…€ ์—ฐ๊ฒฐ
    <th> ํƒœ๊ทธ์— scope ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ํ—ค๋”์™€ ์…€์„ ์—ฐ๊ฒฐํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ํ™”๋ฉด ํŒ๋…๊ธฐ ์‚ฌ์šฉ์ž์—๊ฒŒ ํ‘œ์˜ ๊ฐ ์…€๊ณผ ํ—ค๋”์˜ ๊ด€๊ณ„๋ฅผ ๋ช…ํ™•ํžˆ ํ•ฉ๋‹ˆ๋‹ค.

<caption> ํƒœ๊ทธ

<caption> ํƒœ๊ทธ๋Š” ํ‘œ์˜ ์ œ๋ชฉ์ด๋‚˜ ์„ค๋ช…์„ ์ œ๊ณตํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ด๋Š” ํ™”๋ฉด ์ฝ๊ธฐ ์†Œํ”„ํŠธ์›จ์–ด๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์—๊ฒŒ ํ‘œ์˜ ์ฝ˜ํ…์ธ ๋ฅผ ์ดํ•ดํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

<table>
  <caption>Monthly Expenses</caption>
  <tr>
    <th>Category</th>
    <th>Expense</th>
  </tr>
  <tr>
    <td>Food</td>
    <td>$200</td>
  </tr>
  <tr>
    <td>Transportation</td>
    <td>$100</td>
  </tr>
</table>

์œ„์˜ ์˜ˆ์ œ์—์„œ <caption> ํƒœ๊ทธ๋Š” "Monthly Expenses"๋ผ๋Š” ํ‘œ์˜์ œ๋ชฉ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์ œ๋ชฉ์€ ์‹œ๊ฐ์ ์œผ๋กœ ํ‘œ์‹œ๋˜์ง€ ์•Š์ง€๋งŒ, ํ™”๋ฉด ์ฝ๊ธฐ ์†Œํ”„ํŠธ์›จ์–ด๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์€ ์ด๋ฅผ ํ†ตํ•ด ํ‘œ์˜ ๋‚ด์šฉ์„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

scope ์†์„ฑ

scope ์†์„ฑ์€ <th> ์š”์†Œ์— ์‚ฌ์šฉ๋˜๋ฉฐ, ํ•ด๋‹น ๋จธ๋ฆฌ๊ธ€์ด ์–ด๋Š ๋ถ€๋ถ„์— ํ•ด๋‹นํ•˜๋Š”์ง€๋ฅผ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ํ™”๋ฉด ์ฝ๊ธฐ ํ”„๋กœ๊ทธ๋žจ์—๊ฒŒ ํ‘œ์˜ ๊ตฌ์กฐ๋ฅผ ์„ค๋ช…ํ•˜๊ณ  ์ดํ•ดํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

  • scope = "row": ๋จธ๋ฆฌ๊ธ€์ด ํ˜„์žฌ ํ–‰์— ํ•ด๋‹นํ•จ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.
  • scope = "col": ๋จธ๋ฆฌ๊ธ€์ด ํ˜„์žฌ ์—ด์— ํ•ด๋‹นํ•จ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.
  • scope = "rowgroup": ๋จธ๋ฆฌ๊ธ€์ด ํ˜„์žฌ ํ–‰ ๊ทธ๋ฃน์— ํ•ด๋‹นํ•จ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.
  • scope = "colgroup": ๋จธ๋ฆฌ๊ธ€์ด ํ˜„์žฌ ์—ด ๊ทธ๋ฃน์— ํ•ด๋‹นํ•จ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.
<table>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td>$100</td>
    </tr>
    <tr>
      <th scope="row">February</th>
      <td>$80</td>
    </tr>
  </tbody>
</table>

์œ„์˜ ์˜ˆ์ œ์—์„œ, ์ฒซ ๋ฒˆ์งธ <th> ์š”์†Œ์—๋Š” scope="col" ์†์„ฑ์ด ์ง€์ •๋˜์–ด ์žˆ์œผ๋ฏ€๋กœ "Month"์™€ "Savings"๋Š” ์—ด์˜ ๋จธ๋ฆฌ๊ธ€์ž„์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ๋‘ ๋ฒˆ์งธ์™€ ์„ธ ๋ฒˆ์งธ <th> ์š”์†Œ์—๋Š” ๊ฐ๊ฐ scope="row" ์†์„ฑ์ด ์ง€์ •๋˜์–ด ์žˆ์œผ๋ฏ€๋กœ "January"๊ณผ "February"๋Š” ๊ฐ๊ฐ ํ–‰์˜ ๋จธ๋ฆฌ๊ธ€์ž„์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ scope ์†์„ฑ์„ ์‚ฌ์šฉํ•˜๋ฉด ํ‘œ์˜ ๊ตฌ์กฐ๋ฅผ ๋ช…ํ™•ํ•˜๊ฒŒ ์„ค๋ช…ํ•˜์—ฌ ์ ‘๊ทผ์„ฑ์„ ๋†’์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•ต์‹ฌ ๋‚ด์šฉ๐Ÿ‘€

html table

728x90
๋ฐ˜์‘ํ˜•