본문 바로가기
HTML

3. List 및 Table

삼색이삼랑해 2022. 8. 11. 16:03

  문서 내 List 출력

1. 순서 목록(Ordered List)

  • <ol> 숫자, 알파벳 등으로 넘버링하여 목록을 출력한다.
  • type 속성으로 순서 표기 방식 변경

      ex) type="1" -> 1. 2. 3. 4. ...
            type="A" -> A. B. C. D. ...
            type="a" -> a. b. c. d. ...
            type="I" -> I. II. III. IV. ...
            type="i" -> i. ii. iii. iv. ...

 

2. 비순서 목록(Unordered List)

  • <ul> 도형을 사용하여 목록을 출력한다.
  • style 속성으로 표기 모양 변경

      ex) style="list-style-type: disc;" - ●
            style="list-style-type: circle;" - ○
            style="list-style-type: square;" - ■
            style="list-style-type: none;" - 도형 제외

 

* 공통사항 : 목록의 항목을 표현하는 태그 - List Item -> <li>

 

3. 사용자(개발자) 정의 목록(Difinition List)

  • <dl> : 정의 목록 태그
  • <dt> : 정의 용어 태그
  • <dd> : 정의 설명 태그
<!DOCTYPE html>
<html>
    <head>
        <title>순서 목록</title>
    </head>
    <body>
        <h2>순서 목록</h2>
        <ol type="A">
            <li><a href="#">HTML5</a></li>
            <li>CSS3</li>
            <li>Javascript</li>
            <li>JQury</li>
            <li>React</li>
        </ol>
       <ul style="list-style-type: circle;">
            <li><a href="#">HTML5</a></li>
            <li>CSS3</li>
            <li>Javascript</li>
            <li>JQury</li>
            <li>React</li>
        </ul>
        <dl>
            <dt>html</dt>
            <dd>웹 애플리케이션 뷰의 뼈대 구성</dd>
            <dd>페이지에서 보여질 내용을 작성</dd>
            <dt>css</dt>
            <dd>html을 보다 세련되게 표현</dd>
            <dt>Javascript</dt>
            <dd>html의 동적 기능을 구현</dd>
        </dl>
    </body>
</html>

  문서 내 표(Table) 출력

Table(표 태그)는 웹 문서에 표를 작성하는 태그로 데이터를 행과 열로 표현(정렬)한다.

 

1. 기본 속성 종류

  • <table> : 표 영역을 나타내는 태그.
  • <tr>: 행을 표현하는 태그.
  • <th> : 열을 표현하는 태그. 열의 제목을 표현하는 태그.
  • <td> : 열을 표현하는 태그. 데이터를 작성하는 태그.

모든 행은 열의 개수가 같으며, 모든 열의 가로 길이 또한 동일하다.

 

2. 추가 속성 종류

  • <caption> : 표의 제목을 붙이는 태그로 항상 표 위에 제목이 붙는다. (css로 변경 가능)
  • colspan : 병합할 열의 개수를 지정
  • rowspan : 병행할 행의 개수를 지정
<!DOCTYPE html>
<html>
    <head>
        <title>기본 테이블</title>
    </head>
    <body>
        <h2>기본 테이블</h2>
        <table border="1">
            <caption>연락처</caption>
            <tr>
                <th>번호</th><th>이름</th><th>연락처</th>
            </tr>
            <tr>
                <td>1</td>
                <td>고길동</td>
                <td>01012345678</td>
            </tr>
            <tr>
                <td>2</td>
                <td>나길동</td>
                <td>01012345678</td>
            </tr>
        </table>
        <hr>
        <h2>테이블 행 병합</h2>
        <table border="1" style="width: 100%;">
            <caption>8월</caption>
            <tr>
                <th>주차</th>
                <th>날짜</th>
            </tr>
            <tr>
                <td rowspan="4">1</td>
                <td>1</td>
            </tr>
            <tr><td>2</td></tr>
            <tr><td>3</td></tr>
            <tr><td>4</td></tr>
        </table>
    </body>
</html>

'HTML' 카테고리의 다른 글

6. form 및 input  (0) 2022.08.12
5. 영역 처리/시맨틱  (0) 2022.08.11
4. 오디오/비디오/특수문자  (0) 2022.08.11
2. 기본적인 태그 알아보기  (0) 2022.08.11
1. HTML 기초  (0) 2022.08.11

'HTML' Related Articles

티스토리툴바