HTML 문법 - 4 (리스트 태그, 테이블 태그)

 

리스트 태그

• a
• b

1. a
2. b

이러한 것들을 리스트라고 한다. 각 항목별로 분류를 한다고 생각하면 될 것 같다. 이 때 분류를 도형이나 기호 혹은 a,b,c 같은 알파벳과 같이 어떤 방식으로 항목을 분류해 줄 것인지 태그를 통해 구현해줄 수 있다.

<ul> </ul>

순서가 없는 리스트(Unordered List)를 뜻한다.

■나 ●와 같은 것들로 항목을 구분해준다.

style 속성을 이용하여 모양을 바꿔줄 수 있다.

<ul style="list-style-type: [모양]">

circle,square 등의 모양을 넣을 수 있다.

그 외에도 다양한 속성을 가지고있다.

각 항목은 <li>를 통해 구분한다.

 

<ol> </ol>

순서가 있는 리스트(Ordered List)를 뜻한다.

1, 2, 3, 4 같은 숫자나 a, b, c 같은 알파벳 i, ii, iii 등 순서가 존재하는 것들로 항목을 구분해준다.

숫자 혹은 알파벳 대소문자와 같은 것들은 type 속성을 이용하여 바꿔줄 수 있다.

각 항목은 <li>를 통해 구분한다.

 

<dl> </dl>

정의 리스트(Definition List)를 뜻한다.

각 항목은 <dt>를 통해 구분하고, <dd>를 통해 설명한다.

 

테이블

 

<table>

테이블을 만드는 태그이다. <table border="1"> 이렇게 작성해줌으로써 테두리를 만들 수 있다.

 

<caption>

테이블 위에 제목을 넣어주는 태그이다.

 

<tr>

테이블 로우(table row)로 가로줄을 만드는 태그이다.

 

<th>

테이블 헤드(table head)로 제목을 만드는 태그이다.

 

<td>

테이블 데이터(table data)로 데이터를 넣는 태그이다.

또한 테이블의 열을 채워넣는 태그이다.

 

rowspan

셀을 세로로 병합하는 속성이다.

 

colspan

셀을 가로로 병합하는 속성이다.

 

---

 

아래는 테이블 태그를 이용한 코드이다.

 

<table border="1">
    <caption>테이블 1</caption>
    <tr>
        <th>이름</th>
        <th>나이</th>
        <th>성별</th>
    </tr>
    <tr>
        <td>홍길동</td>
        <td>24</td>
        <td>남성</td>
    </tr>
    <tr>
        <td>김철수</td>
        <td>33</td>
        <td>남성</td>
    </tr>
    <tr>
        <td>김영희</td>
        <td>52</td>
        <td>여성</td>
    </tr>
</table>

웹 사이트에서는 아래와 같이 표시된다.

 

<th>태그를 한 부분은 진하게 표시되었고 테이블은 border = "1"에 의해 선이 나타나게 된다. 만약 border에 관한 설정 없이 작성하였다면 아래와 같이 표시된다.

 

 

 

이렇게 간단한 기능을 이용해 대학교 시간표도 만들 수 있다.

코드 길이가 매우 길어 코드는 분리시켜놓았다.

        <table border="1">
            <caption>일정표</caption>
            <thead>
                <tr>
                    <th></th>
                    <th colspan=5>요일</th>
                </tr>
                <tr>
                    <th>시간</th>
                    <th>월요일</th>
                    <th>화요일</th>
                    <th>수요일</th>
                    <th>목요일</th>
                    <th>금요일</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>8:00</td>
                    <td rowspan=3>자구</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td rowspan="3">자구</td>
                </tr>
                <tr>
                    <td>9:00</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>10:00</td>
                    <td rowspan=3>통계</td>
                    <td></td>
                    <td rowspan=2>컴네</td>
                </tr>
                <tr>
                    <td>11:00</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>12:00</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>13:00</td>
                    <td></td>
                    <td></td>
                    <td rowspan="2">이산</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>14:00</td>
                    <td></td>
                    <td></td>
                    <td rowspan="4">디비</td>
                    <td></td>
                </tr>
                <tr>
                    <td>15:00</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>16:00</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>17:00</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>18:00</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>19:00</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>

아래와 같이 만들 수 있다.

일정표

	요일
시간	월요일	화요일	수요일	목요일	금요일
8:00	자구				자구
9:00
10:00		통계		컴네
11:00
12:00
13:00			이산
14:00				디비
15:00
16:00
17:00
18:00
19:00

---