[HTML] List & Table

List

<ol>, <li> 태그

• 각 항목을 순서대로 나열 (순서 있는 목록은 기본적으로 숫자 1, 2, 3... 으로 번호가 붙는다)
• <ol> : ordered list
• <li> : list

<ol> 태그의 type 속성

• 목록의 순서를 나타내는 숫자(1, 2, 3...)를 다른 형태로 나타내는 속성

종류	설명
type = “1”	숫자(기본값)
type = “a”	영문(소문자)
type = “A”	영문(대문자)
type = “i”	로마 숫자 소문자
type = “I”	로마 숫자 대문자

 

<ol> 태그의 start속성

• 순서 목록의 시작 번호를 지정하는 속성
• 여러 개의 순서 있는 목록을 연결하여 번호를 붙여야 하는 경우 사용한다. (원하는 번호부터 시작)

<ul>, <li> 태그

• 순서가 없는 목록 (항목의 순서가 중요하지 않을 때 사용)
• <ul> : unordered list
• <li> : list
• 순서 없는 목록의 항목 앞에 작은 원(불릿;bullet)이나 사각형을 붙여서 구분

<dl>, <dt>,<dd> 태그

• 이름(name)과 값(value)형태로 된 목록
• <dt> 태그 (Definition Title) : 이름(단어명) 부분 지정
• <dd> 태그 (Definition Data) : 값(설명) 부분 지정
• <dl> 태그 (Definition List) : 한 쌍의 <dt> 태그와 <dd> 태그 입력

Table

테이블(표)의 구성요소

: 테이블은 행(row), 열(column) 그리고 셀(cell)로 이루어짐

 -> 셀(cell) : 표의 내용이 들어가는 한 칸을 의미한다.

 

<table>, <caption> 태그

: 표를 만드는 태그

• <table></table> 태그 : 표를 생성
• <caption></caption> 태그 : 표의 제목을 삽입
• → 제목이 표의 위쪽 중앙에 표시

<tr>, <td>, <th> 태그

: 행과 셀을 만드는 태그

• <tr> 태그 : 행 생성
• <td>, <th> 태그 : 셀 생성

<thead>, <tbody>, <tfoot> 태그

: 표의 구조를 지정하는 태그

• ‘table’의 ‘t’와 제목(head), 본문(body), 요약(foot)을 각각 합친 단어 → CSS 사용하여 각각 다른 스타일 적용 가능
• → 표의 구조를 지정할 경우 시각 장애인도 화면 낭독기를 통해 표를 쉽게 이해

rowspan, colspan 속성

: 행이나 열을 합치는 속성

• rowspan : 행을 합치는 속성
• colspan : 열을 합치는 속성