develope_kkyu

[HTML] 리스트&테이블 알아보기 본문

FrontEnd/HTML

[HTML] 리스트&테이블 알아보기

developekkyu37 2022. 12. 22. 11:30
728x90
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 리스트&테이블</title>
</head>
<body>
    <ul>
        <LI>ul1</LI>
        <LI>ul2</LI>
        <LI>ul3</LI>
    </ul>
    <ol>
        <li>ol1</li>
        <li>ol2</li>
        <li>ol3</li>
    </ol>
    <dl>
        <dt>전화번호</dt>
        <dd>032-000-0000</dd>
        <dt>주소</dt>
        <dd>경기도 부천시</dd>
    </dl>
    
    <!-- 문장 -->
    <div>div</div>
    <div>div2</div>
    <p>p</p>
    <br>        <!-- 한줄 띄우기-->
    <!-- 테이블(칼럼명이 없는 테이블) -->
    <table border="1">
        <tr>
            <td>색션1</td>
            <td>색션2</td>
        </tr>
        <tr>
            <td>색션3</td>
            <td>색션4</td>
        </tr>
        <tr>
            <td>색션5</td>
            <td>색션6</td>
        </tr>
    </table>
    <br>        <!-- 한줄 띄우기-->
    <!-- 테이블(칼럼명이 있는 테이블) -->
    <table border="1">
        <thead>
            <tr>
                <th>칼럼명 1</th>
                <th>칼럼명 2</th>
                <th>칼럼명 3</th>
                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>데이터1</td>
                <td>데이터2</td>
                <td>데이터3</td>
            </tr>
            <tr>
                <td>데이터4</td>
                <td>데이터5</td>
                <td>데이터6</td>
            </tr>
        </tbody>
    </table>
    <br>

      <!-- 테이블(2개의 행 합침) -->
      <table border="1">
        <thead>
            <tr>
                <th>칼럼명 1</th>
                <th>칼럼명 2</th>
                <th>칼럼명 3</th>
                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>데이터1</td>
                <td>데이터2</td>
                <td>데이터3</td>
            </tr>
            <tr>
                <td colspan="2">데이터4</td>
                <td>데이터6</td>
            </tr>
        </tbody>
    </table>

    <br>

      <!-- 테이블(2개의 열 합침) -->
      <table border="1">
        <thead>
            <tr>
                <th>칼럼명 1</th>
                <th>칼럼명 2</th>
                <th>칼럼명 3</th>
                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">데이터1</td>
                <td>데이터2</td>
                <td>데이터3</td>
            </tr>
            <tr>
                <td>데이터5</td>
                <td>데이터6</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

--

728x90