πŸ”΅ CSS - table

jea_iΒ·2022λ…„ 2μ›” 7일
0

CSS

λͺ©λ‘ 보기
16/19
post-thumbnail
<body>
    <h2>table νƒœκ·Έ μ•Œμ•„λ³΄κΈ°</h2>
    <p>
        table은 ν‘œλ₯Ό κ·Έλ¦¬κΈ°μœ„ν•œ νƒœκ·Έμž…λ‹ˆλ‹€.
        <br>ν‘œλŠ” ν–‰κ³Ό μ—΄λ‘œ ꡬ뢄할 수 μžˆμŠ΅λ‹ˆλ‹€.
        <br>ν–‰ μ•ˆμ— 열이 λ°°μΉ˜λ˜λŠ” ꡬ쑰둜 이해할 수 μžˆμŠ΅λ‹ˆλ‹€.
    </p>
    <table border="1px">
        <tr>
            <td>μ—°λ²ˆ</td>
            <td>이름</td>
            <td>νŠΉμ„±</td>
        </tr>
        <tr>
            <td>1</td>
            <td>μžλ°”μŠ€ν¬λ¦½νŠΈ</td>
            <td>ν”„λ‘ νŠΈκ°œλ°œμ–Έμ–΄</td>
        </tr>
        <tr>
            <td>2</td>
            <td>제이쿼리</td>
            <td>λ°˜μ‘ν˜•μ–Έμ–΄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>λΆ€νŠΈμŠ€νŠΈλž©</td>
            <td>ν”„λ ˆμž„μ›Œν¬</td>
        </tr>
    </table>
    <hr>
    <h3>tableνƒœκ·Έ</h3>
    <p>
        ν‘œλ₯Ό μ •μ˜ν•˜λŠ” νƒœκ·Έλ‘œ tableνƒœκ·Έ 내뢀에 μ‹€μ œ ν‘œμ™€ κ΄€λ ¨λœ μš”μ†Œλ“€μ΄ μž‘λ™ν•¨
    </p>
    <h3>ν‘œ μ˜μ—­νƒœκ·Έ</h3>
    <ul>
        <li>
            <h4>theadνƒœκ·Έ</h4>
            <p>
                ν‘œμ˜ 제λͺ©μ΄ μ‚½μž…λ˜λŠ” μ˜μ—­μž…λ‹ˆλ‹€.
            </p>
        </li>
        <li>
            <h4>tbodyνƒœκ·Έ</h4>
            <p>
                ν‘œμ˜ λ‚΄μš©μ΄ μ‚½μž…λ˜λŠ” μ˜μ—­μž…λ‹ˆλ‹€.
            </p>
        </li>
        <li>
            <h4>tfootνƒœκ·Έ</h4>
            <p>
                ν‘œμ˜ κΈ°νƒ€λ‚΄μš©μ΄ μ‚½μž…λ˜λŠ” μ˜μ—­μž…λ‹ˆλ‹€.
            </p>
        </li>
    </ul>
    <hr>
    <h3>trνƒœκ·Έ : Table rows</h3>
    <p>
        ν‘œμ˜ 행을 μ •μ˜ν•˜λŠ” νƒœκ·Έλ‘œ μžμ‹μœΌλ‘œ td,thμš”μ†Œκ°€ ν•„μš”ν•¨
    </p>
    <hr>
    <h3>th, tdνƒœκ·Έ : Table head, Table Definition</h3>
    <p>
        trνƒœκ·Έ μ•ˆμ—μ„œ μž‘μš©ν•˜λ©° μ‹€μ œ ν‘œμ˜ μ˜μ—­μ„ μ •μ˜ν•˜λŠ” μš”μ†Œμž…λ‹ˆλ‹€.
    </p>

    <table border="1px">
        <thead>
            <tr>
                <th>μ—°λ²ˆ</th>
                <th>이름</th>
                <th>νŠΉμ„±</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>홍길동</td>
                <td>기획자</td>
            </tr>
            <tr>
                <td>2</td>
                <td>ν™κΈΈμˆœ</td>
                <td>λ””μžμ΄λ„ˆ</td>
            </tr>
            <tr>
                <td>3</td>
                <td>ν™κΈΈμ˜</td>
                <td>개발자</td>
            </tr>
        </tbody>
    </table>
</body>
profile
μ—΄μ •μ—΄μ •μ—΄μ •πŸ”₯

0개의 λŒ“κΈ€

κ΄€λ ¨ μ±„μš© 정보