HTML2 < 2021 - 10 - 28 >

목록 관련 태그

 

ol (Ordered List) : 순서가 있는 목록

 

ul (Unordered List) : 순서가 없는 목록

 

li (List Item) : ol, ul 내부에 작성하는 목록 내용 태그

 

코드 실행 결과

<ol type="I", start="5" reversed>
  <li>Java</li>
  <li>DB(Oracle)</li>
  <li>JDBC</li>
  <li>HTML5</li>
</ol>

<ul>
  <li>Java</li>
  <li>DB(Oracle)</li>
  <li>JDBC</li>
  <li>HTML5</li>
</ul>

5. Java
6. DB(Oracle)
7. JDBC
8. HTML5

• Java
• DB(Oracle)
• JDBC
• HTML5

 

type 속성 : 순서를 나타내는 형식을 변경

      "a" : 영어 소문자

      "A" : 영어 대문자

      "i" : 로마 소문자

      "I" : 로마 소문자

      "1" : 숫자

 

      start 속성 : 순서 시작을 지정하는 속성

 

      reversed 속성 : 역순

 

 

표 관련 태그

 

table 태그 (영역)

- 웹 문서에서 자료 정리를 위해 주로 사용하는 태그

- 행과 열로 이루어져 있고, 행과 열이 교차하는 지점을 셀이라고함.

 

tr (table row)

-  테이블의 행 (영역)

 

td (table data)

- 테이블의 셀

 

th (table header)

- 행이나 열의 제목을 나타내는 태그 (영역 or 내용)

 

caption

- 테이블의 제목이나 설명을 추가하는 태그

 

* table 관련 속성

1. td, th 에서 사용 가능한 속성

- rowspan : 행 병합

- colspan : 열 병합

- width : 폭 지정

- height : 높이 지정

 

2. table에서 사용 가능 속성

- border : table, td, th에 테두리 추가

 

 

* table 구조 설정 태그

 

thead

- 테이블의 상단 부분 영역 (컬럼명)

 

tbody

- 테이블의 중단 부분 영역 (값, 내용) 

 

tfoot

- 테이블의 하단 부분 영역 (합계, 누적)

<table border="1">
    <thead>
      <tr>
        <th>이름</th>
        <th>나이</th>
        <th>주소</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>가나다</td>
        <td>30</td>
        <td>서울시 구로구</td>
      </tr>
      <tr>
        <td>홍길동</td>
        <td>20</td>
        <td>서울시 종로구</td>
      </tr>
      <tr>
        <td>김개똥</td>
        <td>25</td>
        <td>서울시 동작구</td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td colspan="2">총 인원</td>
        <td>3명</td>
      </tr>
    </tfoot>
  </table>

이름	나이	주소
가나다	30	서울시 구로구
홍길동	20	서울시 종로구
김개똥	25	서울시 동작구
총 인원		3명