course 2021/HTML\CSS\JS
day07 - list, table
코딩하는토끼
2021. 10. 28. 16:47
> list
1. ordered list (순서 있는 리스트)
<ol> tag: ordered list - 순서 있는 리스트 정의
<li> tag: list item - 리스트 항목 작성
<body>
<ol>
<li>this</li>
<li>is</li>
<li>the</li>
<li>ordered</li>
<li>list</li>
</ol>
</body>숫자 (1234...)로 표시되는 것이 기본, 다른 스타일로 표시하고 싶다면 (CSS property) list-style-type 작성 ↓
<head>
<style>
#list1{
list-style-type:upper-alpha;
}
#list2{
list-style-type:upper-roman;
}
#list3{
list-style-type:hiragana;
}
#list4{
list-style-type:korean-hangul-formal;
}
#list5{
list-style-type:lower-greek;
}
</style>
</head>
<body>
<ol id="list1">
<li>this</li>
<li>is</li>
<li>the</li>
<li>ordered</li>
<li>list</li>
</ol>
<ol id="list2">
<li>this</li>
<li>is</li>
<li>the</li>
<li>ordered</li>
<li>list</li>
</ol>
<ol id="list3">
<li>this</li>
<li>is</li>
<li>the</li>
<li>ordered</li>
<li>list</li>
</ol>
<ol id="list4">
<li>this</li>
<li>is</li>
<li>the</li>
<li>ordered</li>
<li>list</li>
</ol>
<ol id="list5">
<li>this</li>
<li>is</li>
<li>the</li>
<li>ordered</li>
<li>list</li>
</ol>
</body>
2. unordered list (순서 없는 리스트)
<ul> tag: unordered list - 순서 없는 리스트 정의
<li> tag: list item - 리스트 항목 작성
<body>
<ul>
<li>this</li>
<li>is</li>
<li>the</li>
<li>unordered</li>
<li>list</li>
</ul>
</body>disc (˙) 로 표시되는 것이 기본, 다른 스타일로 표시하고 싶다면 (CSS property) list-style-type 작성 ↓
<head>
<style>
#list1{
list-style-type:square;
}
#list2{
list-style-type:circle;
}
#list3{
list-style-type:none;
}
#list4{
list-style-type:"\1F44D";
}
#list5{
list-style-type:"\1F601";
}
</style>
</head>
<body>
<ul id="list1">
<li>this</li>
<li>is</li>
<li>the</li>
<li>unordered</li>
<li>list</li>
</ul>
<ul id="list2">
<li>this</li>
<li>is</li>
<li>the</li>
<li>unordered</li>
<li>list</li>
</ul>
<ul id="list3">
<li>this</li>
<li>is</li>
<li>the</li>
<li>unordered</li>
<li>list</li>
</ul>
<ul id="list4">
<li>this</li>
<li>is</li>
<li>the</li>
<li>unordered</li>
<li>list</li>
</ul>
<ul id="list5">
<li>this</li>
<li>is</li>
<li>the</li>
<li>unordered</li>
<li>list</li>
</ul>
</body>> table
table 안에 tr 로 행을, th(제목) 혹은 td(내용) 로 열을 작성
<table> tag: defines a table
<th> tag: defines a header cell in a table
<td> tag: defines a cell in a table
<tr> tag: defines a row in a table
css property 를 이용하여 표의 style 설정
<head>
<style>
table, tr, td, th{
border:1px solid black;
}
table{
border-collapse:collapse;
width:100%;
}
</style>
</head>
<body>
<table>
<tr>
<th>first</th>
<th>second</th>
<th>third</th>
</tr>
<tr>
<td>this</td>
<td>is</td>
<td>table</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>hello</td>
<td>hi</td>
<td>welcome</td>
</tr>
<tr>
<td>morning</td>
<td>afternoon</td>
<td>night</td>
</tr>
</table>
</body>
* bootstrap
Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
home - get started - CSS copy → head 에 링크 붙여넣기
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
</style>
</head>
<body>
<table class="table table-dark table-hover">
<thead>
<tr>
<th>first</th>
<th>second</th>
<th>third</th>
</tr>
</thead>
<tbody>
<tr>
<td>this</td>
<td>is</td>
<td>table</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
<tr>
<td>hello</td>
<td>hi</td>
<td>welcome</td>
</tr>
<tr>
<td>morning</td>
<td>afternoon</td>
<td>night</td>
</tr>
</tbody>
</table>
</body>
< colspan & rowspan attribute >
1. column 병합
colspan attribute 사용
→ <tag colspan="병합할 셀 개수">
셀이 병합되면서 내용은 밀려나기 때문에 병합되는 셀은 내용을 지워줘야 함
<head>
<style>
table, td{
border:1px solid black;
}
table{
border-collapse:collapse;
width:100%;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="2">first</td>
<!-- <td>second</td> -->
<td>third</td>
<td>fourth</td>
<td>fifth</td>
</tr>
<tr>
<td>this</td>
<td>is</td>
<td>the</td>
<td>table</td>
<td>example</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
<td>jkl</td>
<td>mno</td>
</tr>
<tr>
<td>hello</td>
<td>hi</td>
<td>how</td>
<td>are</td>
<td>you</td>
</tr>
<tr>
<td>morning</td>
<td>afternoon</td>
<td>night</td>
<td>evening</td>
<td>dawn</td>
</tr>
</table>
</body>
2. row 병합
rowspan attribute 사용
→ <tag rowspan="병합할 셀 개수">
셀이 병합되면서 내용은 밀려나기 때문에 병합되는 셀은 내용을 지워줘야 함
<head>
<style>
table, td{
border:1px solid black;
}
table{
border-collapse:collapse;
width:100%;
}
.span{
background-color:green;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="2" class="span">first</td>
<td>second</td>
<td>third</td>
<td>fourth</td>
<td>fifth</td>
</tr>
<tr>
<!-- <td>this</td> --!>
<td>is</td>
<td>the</td>
<td>table</td>
<td>example</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
<td>jkl</td>
<td>mno</td>
</tr>
<tr>
<td>hello</td>
<td>hi</td>
<td>how</td>
<td>are</td>
<td>you</td>
</tr>
<tr>
<td>morning</td>
<td>afternoon</td>
<td>night</td>
<td>evening</td>
<td>dawn</td>
</tr>
</table>
</body>
예제)
<head>
<style>
table, td{
border:1px solid black;
}
table{
border-collapse:collapse;
width:100%;
}
.span{
background-color:green;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="2" rowspan="2" class="span">first</td>
<!-- <td>second</td> --!>
<td>third</td>
<td>fourth</td>
<td>fifth</td>
</tr>
<tr>
<!-- <td>this</td> --!>
<!-- <td>is</td> --!>
<td>the</td>
<td>table</td>
<td>example</td>
</tr>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
<td>jkl</td>
<td>mno</td>
</tr>
<tr>
<td>hello</td>
<td>hi</td>
<td>how</td>
<td>are</td>
<td>you</td>
</tr>
<tr>
<td>morning</td>
<td>afternoon</td>
<td>night</td>
<td>evening</td>
<td>dawn</td>
</tr>
</table>
</body>