๐Ÿ’œ HTML,CSS

HTML&CSS 6์ผ์ฐจ (์ •๋ฆฌx)

Genie_. 2024. 3. 23. 21:53
728x90
๋ฐ˜์‘ํ˜•
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ํ‘œ</title>
</head>
<body>
    <!-- deprecated : ์•ž์œผ๋กœ๋Š” ๋น„๊ถŒ์žฅ/์ง€์–‘ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์‚ฌ์šฉํ•˜์ง€x -->
    <!-- table์— align="center" => ํ…Œ์ด๋ธ”์„ ํ™”๋ฉด์ƒ์˜ ์ค‘์•™์œผ๋กœ -->
    <!-- tr์— align="center" => ์…ธ์— ์ ํžŒ ๊ธ€์ž๋ฅผ ์ค‘์•™์ •๋ ฌ์œผ๋กœ (ํ˜„์žฌ ์ค„ ์ „๋ถ€) -->
    <!-- td์— align="center" => ์…ธ์— ์ ํžŒ ๊ธ€์ž๋ฅผ ์ค‘์•™์ •๋ ฌ์œผ๋กœ (ํ˜„์žฌ ์นธ๋งŒ) -->
    <!-- ๋‚˜์ค‘์— width, border, align ์ „๋ถ€ ์•ˆ์”€ => css ์ด์šฉ -->
    <table width="300" border="1" align="center">
        <tr align="center"> <!-- ํ–‰ -->
            <td>์ œ๋ชฉ1</td><!-- ์—ด -->
            <td>์ œ๋ชฉ2</td>
            <td rowspan="2">์ œ๋ชฉ3</td>
        </tr>
        <tr>
            <td colspan="2">๋‚ด์šฉ1</td>
        </tr>
        <tr>
            <td colspan="2">๋‚ด์šฉ11</td>
            <td>๋‚ด์šฉ12</td>
        </tr>
    </table>

    <table border="1" width="300">
        <caption align="bottom">์ด๊ณ„ ๋ฐ์ดํ„ฐ</caption>
        <thead>
            <tr style="background-color: lightskyblue">
                <th>๋ฐฉ๋ฌธ์ž์ˆ˜</th> <!-- <th> :  ์ž๋™ ์ค‘์•™์ •๋ ฌ + ๋ณผ๋“œ -->
                <th>๊ฐ€๊ฒฉ</th>
                <th>์ด๊ณ„</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>15</td>
                <td>15,000</td>
                <td>X</td>
            </tr>
            <tr>
                <td>10</td>
                <td>10,000</td>
                <td>X</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>25</td>
                <td>25,000</td>
                <td>X</td>
            </tr>
        </tfoot>
    </table>

    <h1>๋ฐด๋“œ ๋™์•„๋ฆฌ ์ง€์› ์–‘์‹</h1>
    <table border="1">
        <caption>๋™์•„๋ฆฌ ์ง€์›์„œ</caption>

        <colgroup> <!-- ๊ตณ์ด ๋ชฐ๋ผ๋„ ๋จ/ ํ•˜๋‚˜ํ•˜๋‚˜ ๋„ฃ์ง€x ๊ทธ๋ฃน์œผ๋กœ ๋ฌถ์–ด์„œ ๋„ฃ๋Š”๊ฒƒ -->
            <col style="background-color: gray">
        </colgroup>

        <tr align="center">
            <th rowspan="3" style="background-color: lightgray">ํ…Œ์ŠคํŠธ</th>
            <!-- <td rowspan="3" <b>ํ…Œ์ŠคํŠธ</b></td> //// <b></b>๋„ ๊ฐ€๋Šฅํ•จ>-->
            <td>์ด๋ฆ„</td>
            <td>ํ™๊ธธ๋™</td>
        </tr>
        <tr align="center">
            <td>ํ•™๊ณผ/ํ•™๋ฒˆ</td>
            <td>์ปดํ“จํ„ฐ๊ณตํ•™/20220101</td>
        </tr>
        <tr align="center">
            <td>์—ฐ๋ฝ์ฒ˜</td>
            <td>010-1234-5678</td>
        </tr>
        <tr align="center">
            <th style="background-color: lightgray">์ง€์›๋ถ„์•ผ</th>
            <td colspan="2">๋“œ๋Ÿผ</td>
        </tr>
    </table>



</body>
</html>

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