본문 바로가기
Web/HTML

#5. List & Table

도톤팽이 2023. 2. 24. 15:05
728x90

1. List

1.1 순서없는 목록

  <body>
    <h2>순서없는 목록</h2>
    <ul>
      <li>apple</li>
      <li>banana</li>
      <li>grape</li>
    </ul>
  </body>
Document

순서없는 목록

  • apple
  • banana
  • grape

순서없는 목록은 ul태그를 이용하여 작성된다.

ul태그 속 li태그를 넣어 List 속 목록들을 작성해준다.

 

1.2 순서있는 목록

  <body>
    <h2>순서있는 목록</h2>
    <ol>
      <li>apple</li>
      <li>banana</li>
      <li>grape</li>
    </ol>
  </body>
Document

순서있는 목록

  1. apple
  2. banana
  3. grape

순서있는 목록은 ol태그를 이용하여 작성된다.

마찬가지로 List 속 목록들은 li태그를 이용하여 작성해준다.

 

ol태그는 type어트리뷰트를 사용하여 순서를 나타내는 문자를 지정해 줄 수 있다.

1 숫자 (기본값)
A 대문자 알파벳
a 소문자 알파벳
I 대문자 로마숫자
i 소문자 로마숫자 
  <body>
    <ol type="A">
      <li>apple</li>
      <li>banana</li>
      <li>grape</li>
    </ol>
    <ol type="a">
      <li>apple</li>
      <li>banana</li>
      <li>grape</li>
    </ol>
    <ol type="I">
      <li>apple</li>
      <li>banana</li>
      <li>grape</li>
    </ol>
    <ol type="i">
      <li>apple</li>
      <li>banana</li>
      <li>grape</li>
    </ol>
  </body>
Document
  1. apple
  2. banana
  3. grape
  1. apple
  2. banana
  3. grape
  1. apple
  2. banana
  3. grape
  1. apple
  2. banana
  3. grape

start 어트리뷰트로 리스트의 시작값을 지정할 수 있다.

reversed 어트리뷰트로 리스트의 순서값을 역순으로 표시한다.

  <body>
    <ol start="5">
      <li>apple</li>
      <li>banana</li>
      <li>grape</li>
    </ol>
    <ol reversed>
      <li>apple</li>
      <li>banana</li>
      <li>grape</li>
    </ol>
  </body>
Document
  1. apple
  2. banana
  3. grape
  1. apple
  2. banana
  3. grape

1.3 중첩 목록

각 리스트들은 중첩하여 작성할 수 있다.

  <body>
    <li>apple</li>
    <li>grape
      <ol>
        <li>Purple</li>
        <li>Green</li>
      </ol>
    </li>
    <li>banana</li>
  </body>
Document
  • apple
  • grape
    1. Purple
    2. Green
  • banana

    • 2. 테이블

    테이블은 표를 만들 때 사용하는 태그이다.

    과거에는 테이블을 사용하여 레이아웃을 구성하기도 하였으나 현재에는 div태그를 사용하여 레이아웃을 구성한다.

    table 표를 감싸는 태그
    tr 표 내부의 행
    th 행 내부의 제목 셀
    td 행 내부의 일반 셀 
      <body>
    <table>
      <tr>
        <th>과일 이름</th>
        <th>색깔</th>
        <th>가격</th>
      </tr>
      <tr>
        <td>딸기</td>
        <td>빨간색</td>
        <td>19,800원</td>
      </tr>
      <tr>
        <td>포도</td>
        <td>보라색</td>
        <td>9,800원</td>
      </tr>
      <tr>
        <td>사과</td>
        <td>빨간색</td>
        <td>3,980원</td>
      </tr>
    </table>
  </body>
    Document
    과일 이름 색깔 가격
    딸기 빨간색 19,800원
    포도 보라색 9,800원
    사과 빨간색 3,980원

    테이블 태그 관련 어트리뷰트는 3가지가 있다.

    border 표 테두리 두께 지정
    rowspan 해당 셀이 점유하는 행의 수 지정
    colspan 해당 셀이 점유하는 열의 수 지정 
      <body>
    <table border="1">
      <tr>
        <th>과일</th>
        <td colspan="2">색깔</td>
      </tr>
      <tr>
        <td>포도</td>
        <td>초록색</td>
        <td>보라색</td>
      </tr>
    </table>

    <table border="1">
      <tr>
        <th>과일:</th>
        <td>포도</td>
      </tr>
      <tr>
        <th rowspan="2">색깔:</th>
        <td>보라색</td>
      </tr>
      <tr>
        <td>초록색</td>
      </tr>
    </table>
  </body>
    Document
    과일 색깔
    포도 초록색 보라색
    과일: 포도
    색깔: 보라색
    초록색

     

    728x90
    저작자표시 비영리 변경금지

    'Web > HTML' 카테고리의 다른 글

    #7. Form & Tags  (2) 2023.02.27
    #6. 이미지 & 멀티미디어  (0) 2023.02.27
    #4. HTML의 핵심 Link  (0) 2023.02.24
    #3. 텍스트 관련 태그들 정리  (0) 2023.02.24
    #2. head 요소의 여러가지 태그들  (0) 2023.02.21

    'Web/HTML' Related Articles

    티스토리툴바