[HTML] list 와 table

1) 리스트/테이블

1.1 리스트

<h1>1. 리스트</h1>

    <h2>1-1. dl / dt / dd </h2>

    <h3>리스트 기본</h3>

    <dl>

        <dt>용어1</dt>

            <dd>-용어1에 대한 설명</dd><br>

        <dt>여대 앞에 사는 남자</dt>

            <dd>- 제가 좋아하는 재즈 제목</dd>    

    </dl>

    

    <hr>



    <h2>1-2. ul / ol / li</h2>

    <!--ul : 순서가 없는 항목들-->

    <!--ol : 순서가 있는 항목들-->

    <!--li : 그 밑에 항목들-->

    <h3>1-2-1. ul / li </h3>

    <ul>

        <li>순서없는 항목1</li>

        <li>순서없는 항목2</li>

        <li>순서없는 항목3</li>

        <li>순서없는 항목4</li>

        <li>순서없는 항목5</li>

    </ul>

    

    <h3>1-2-2. ol / li </h3>

    <ol type="i">

        <!--type : 항목의 순서를 숫자 또는 알파벳으로 나타내게 하는 것-->

        <li>순서있는 항목1</li>

        <li>순서있는 항목2</li>

        <li>순서있는 항목3</li>

        <li>순서있는 항목4</li>

        <li>순서있는 항목5</li>

    </ol>

 

1.2 테이블

 

- 테이블에서 가로 줄을 열(row), 세로 줄을 행(column)

- <tr> 태그는 행, <td> 태그는 열을 표현

 

<table>

<caption>표이름</caption>

<tr>

<th>제목1</th>

<th>제목2</th>

<th>제목3</th>

</tr>

<tr>

<td>내용1</th>

<td>내용2</th>

<td>내용3</th>

</tr>

</table>

 

<h1>2. 테이블</h1>

    <h2>2-1. 기본</h2>

    <table border="1" style="text-align: center; border-color:blue;">

        <caption>출석확인표</caption>

        <tr>

            <th>날짜</th>

            <th>이름</th>

            <th>확인</th>

        </tr>

        <tr>

            <td>19.02.03</td>

            <td>최진아</td>

            <td>ok</td>

        </tr>

        <!--colspan : 가로병합-->

        <!--rowspan : 세로병합-->

        <tr>

            <td>20.01.13</td>

            <td>김영균</td>

            <td>ok</td>

        </tr>

        

    </table>



    <hr>



    <h2>2-2. 병합</h2>

    <h3>2-2-1. 가로병합(colspan)</h3>

    <table border="1" style="width: 200; height: 200; text-align: center;">

        <tr>

            <td width="100" height="100" colspan="2">1</td>

            <td width="100" height="100">2</td>

            

        </tr>

        <tr>

            <td width="100" height="100">4</td>

            <td width="100" height="100">5</td>

            <td width="100" height="100">6</td>

        </tr>

    </table>



    <h3>2-2-2. 세로병합(rowspan)</h3>

    <table border="1" style="width: 200; height: 200; text-align: center;">

        <tr>

            <td width="100" height="100" rowspan="2">1</td>

            <td width="100" height="100">2</td>

            <td width="100" height="100">3</td>

            

        </tr>

        <tr>

            <td width="100" height="100">4</td>

            <!-- <td width="100" height="100">5</td> -->

            <td width="100" height="100">6</td>

        </tr>

    </table>