MapleStory Cookie With Halo

โœจ UI/๐Ÿ’— HTML

[HTML]ํ…Œ์ด๋ธ” ๋งŒ๋“ค๊ธฐ & ์…€ ๋ณ‘ํ•ฉ

๋‰ด์ด NUEY 2024. 12. 22. 00:48
๋ฐ˜์‘ํ˜•

 

 

Table

 

์ด ํ…Œ์ด๋ธ”์„ ๋งŒ๋“œ๋Š” ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.

 

 

  • <table> : ํƒœ๊ทธ ์•ˆ์— ๋งŒ๋“ญ๋‹ˆ๋‹ค.

    • <caption> : ํ…Œ์ด๋ธ”์˜ ์ œ๋ชฉ
    • <colgroup> : ์ปฌ๋Ÿผ ๋น„์œจ์„ ์ •ํ•ฉ๋‹ˆ๋‹ค.
      • <col> : ์ปฌ๋Ÿผ๊ฐฏ์ˆ˜์™€ ๋งž๊ฒŒ <col>์„ ๋งŒ๋“ค์–ด ์กฐ์ ˆํ•ฉ๋‹ˆ๋‹ค.

    • <thead> : ์ปฌ๋Ÿผ์ด ๋“ค์–ด๊ฐ€๋Š” ๋ถ€๋ถ„
      • <th> : ํ•˜๋‚˜์˜ ์ปฌ๋Ÿผ์ž…๋‹ˆ๋‹ค.

    • <tbody> : ํ‘œ ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค.
      • <tr> : ํ…Œ์ด๋ธ” ์นธ๋“ค์„ ํ•œ ์ค„์— ๋ชจ์•„๋†“์Šต๋‹ˆ๋‹ค.
        • <td> : ์‹ค์ œ ํ…Œ์ด๋ธ” ์นธ์ž…๋‹ˆ๋‹ค.

    • <tfoot> : table foot. ๋ฐ”๋‹ฅ๋ž€ ์ž…๋‹ˆ๋‹ค.

 

์ „์ฒด์ฝ”๋“œ

๋”๋ณด๊ธฐ 
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>ํ…Œ์ด๋ธ” ๋งŒ๋“ค๊ธฐ</title>
    <script src="../common/js/static.js"></script>
</head>

<body>
    <table border="1">
        <caption>&lt;caption>ํ…Œ์ด๋ธ” ์ œ๋ชฉ</caption>
        <colgroup>
            <col width="200px" />
            <col width="300px" />
            <col width="500px" />
        </colgroup>

        <thead>
            <th>&lt;thead>์ปฌ๋Ÿผ 1</th>
            <th>์ปฌ๋Ÿผ 2</th>
            <th>์ปฌ๋Ÿผ 3</th>
        </thead>

        <tbody>
            <tr>
                <td>&lt;td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>&lt;tfoot>footer1</td>
                <td>footer2</td>
                <td>footer3</td>
            </tr>
        </tfoot>
    </table>

    <div id="commonFooter"></div>
</body>

</html>

 

 

์…€ ๋ณ‘ํ•ฉํ•˜๊ธฐ
rowspan="์ˆซ์ž" → ํ–‰๋ณ‘ํ•ฉ
colspan="์ˆซ์ž" → ์—ด๋ณ‘ํ•ฉ

 

ํ•ฉ์น˜๊ณ  ์‹ถ์€๋งŒํผ " " ์•ˆ์— ์ˆซ์ž๋ฅผ ์ ์–ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

 

 

โ€ป ํ…Œ์ด๋ธ” ๋Œ€์‹  div๋ฅผ ์‚ฌ์šฉํ•ด์„œ ํ‘œ๋ฅผ ๋งŒ๋“œ๋Š” ์ถ”์„ธ๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

 

๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€

'โœจ UI > ๐Ÿ’— HTML' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[HTML]์„ ํƒ์ž selector. id, class, name  (0) 2024.12.22
[HTML]์ด๋ฏธ์ง€ img  (0) 2024.12.22
[HTML]๋ชฉ๋กํƒœ๊ทธ <ul> <ol> <dl>  (0) 2024.12.21
[HTML]Entities (&nbsp ๊ณต๋ฐฑ, &quot ํฐ ๋”ฐ์˜ดํ‘œ" ๋“ฑ)  (0) 2024.12.21
[HTML]๊ฒฝ๋กœ ์ข…๋ฅ˜์™€ ์‚ฌ์šฉ๋ฒ•  (0) 2024.12.21

'โœจ UI/๐Ÿ’— HTML'์˜ ๋‹ค๋ฅธ๊ธ€

  • ํ˜„์žฌ๊ธ€[HTML]ํ…Œ์ด๋ธ” ๋งŒ๋“ค๊ธฐ & ์…€ ๋ณ‘ํ•ฉ

๊ด€๋ จ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”