HTML 리스트(List)
리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미한다.
1. 순서가 없는 리스트(unordered list)
2. 순서가 있는 리스트(ordered list)
3. 정의 리스트(definition list)
순서가 없는 리스트(unordered list)
<ul>태그로 시작, 포함되는 각각의 리스트 요소는 <li>태그로 시작.
각각의 리스트 요소 앞에는 기본 마커로 검정색의 작은 원이 위치
|
1
2
3
4
5
6
7
8
9
|
<ul>
<li>사과</li>
<li>멜론</li>
<li>바나나</li>
</ul>
|
cs |
순서가 있는 리스트(ordered list)
<ol>태그로 시작, 포함되는 각각의 리스트 요소는 <li>태그로 시작.
각각의 리스트 요소 앞에는 기본 마커로 아라비아 숫자가 위치
|
1
2
3
4
5
6
7
8
9
|
<ol>
<li>사과</li>
<li>멜론</li>
<li>바나나</li>
</ol>
|
cs |
정의 리스트(description list)
용어와 그에 대한 정의를 모아놓은 리스트.
<dl>태그로 시작. <dt>태그에는 용어의 이름이 들어가고, <dd>태그에는 해당 용어에 대한 정의가 들어감.
|
1
2
3
4
5
6
7
8
9
10
11
|
<dl>
<dt>호박</dt>
<dd>- 박과의 한해살이 덩굴성 채소</dd>
<dt>상추</dt>
<dd>- 국화과의 한해살이 또는 두해살이풀</dd>
</dl>
|
cs |
HTML 테이블(Table)
테이블(Table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 의미
<table>태그를 이용하여 테이블을 작성
<table>태그
1.<th>태그는 각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이다.
2.<tr>태그는 열을 구분
3.<td>태그는 열을 각각의 셀(cell)로 나누어 준다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<table style="width:100%">
<tr style="background-color:lightgrey">
<th>참치</th>
<th>고래</th>
<th>날치</th>
</tr>
<tr>
<td>상어</td>
<td>문어</td>
<td>꽁치</td>
</tr>
<tr>
<td>오징어</td>
<td>고등어</td>
<td>돌고래</td>
</tr>
</table>
|
cs |
CSS의 border속성을 이용하여 테이블에 테두리를 표현할 수 있다.
border 속성값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리를 가지게 됨.
|
1
2
3
4
5
|
<style>
table, th, td { border: 1px solid black }
</style>
|
cs |
위 예제는 테이블의 테두리가 두 줄씩 나타남.
->모든 태그가 자신만의 테두리를 가지고 있기 때문.
테두리를 한 줄로 설정하려면 border-collapse 속성을 사용해야 한다.
|
1
2
3
4
5
|
<style>
table, th, td { border: 1px solid black; border-collapse: collapse }
</style>
|
cs |
테이블의 열 합치기
colspan 속성을 사용하면 테이블의 열(column)을 합칠 수 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<table style="width:100%">
<tr>
<td>참치</td>
<td colspan="2">고래</td>
</tr>
<tr>
<td>상어</td>
<td>문어</td>
<td>꽁치</td>
</tr>
</table>
|
cs |
테이블의 행 합치기
rowspan속성을 사용하면 테이블의 행(row)을 합칠 수 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<table style="width:100%">
<tr>
<td rowspan="2">상어</td>
<td>문어</td>
<td>꽁치</td>
</tr>
<tr>
<td>고등어</td>
<td>돌고래</td>
</tr>
</table>
|
cs |
테이블의 열과 행 합치기
colspan 속성과 rowspan속성을 함께 사용
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<head>
<meta charset="UTF-8">
<title>HTML Tables</title>
<style>
table, th, td { border: 1px solid black; border-collapse: collapse }
</style>
</head>
<body>
<table style="width:100%">
<tr>
<td colspan="6">1</td>
</tr>
<tr>
<td colspan="6">2</td>
</tr>
<tr>
<td rowspan="3">3</td>
<td rowspan="3">4</td>
<td colspan="2">5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td colspan="3">8</td>
<td>9</td>
</tr>
<tr>
<td colspan="4">10</td>
</tr>
</table>
</body>
|
cs |
테이블의 캡션(caption)설정
<caption>태그를 설정하면 테이블 상단에 제목이나 짧은 설명을 붙일 수 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<head>
<meta charset="UTF-8">
<title>HTML Tables</title>
<style>
table, th, td { border: 1px solid black; border-collapse: collapse }
</style>
</head>
<body>
<table style="width:100%">
<caption>해양 생물</caption>
<tr>
<td>참치</td>
<td>고래</td>
<td>날치</td>
</tr>
<tr>
<td>상어</td>
<td>문어</td>
<td>꽁치</td>
</tr>
<tr>
<td>오징어</td>
<td>고등어</td>
<td>돌고래</td>
</tr>
</table>
</body>
|
cs |
'HTML' 카테고리의 다른 글
| HTML iframe요소 (0) | 2020.04.05 |
|---|---|
| HTML 블록과 인라인 (0) | 2020.04.05 |
| HTML 링크 , 이미지 (0) | 2020.04.04 |
| HTML 스타일(색,글꼴,배경) (0) | 2020.04.03 |
| HTML텍스트 요소 (0) | 2020.04.03 |
