https://www.w3schools.com/tags/ 를 참고
리스트 표현 <ol> <ul> <li>
1
2
3
4
5
6
7
8
9
10
11
| <ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
|
- Coffee
- Tea
- Milk
<ol> - 순서가 있는 목록(ordered list)
<ul> - 순서가 없는 목록(unordered list)
<li> - 각 항목
표 표현 <table>
기본 요소 <tr> <th> <td>
<table>은 HTML table을 나타낸다.
HTML table은 기본적으로 <\tr>, <th>, <td> 요소로 구성된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
|
| Month | Savings |
|---|
| January | $100 |
| February | $80 |
<tr> - 각 행을 의미(table row)
<th> - 해더 항목을 의미(table header)
<td> - 데이터 항목을 의미(table data)
혹시 표에 테두리가 보이게 하고 싶다면 나중에 CSS를 배울때 알게되겠지만 일단 아래와 같이 <style>를 적용해보면 된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <style>
table, th, td {
border: 1px solid black;
}
</style>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
|
| Month | Savings |
|---|
| January | $100 |
| February | $80 |
각 영역 지정 <thead> <tbody> <tfoot>
HTML table에서는 추가적인 요소도 넣을 수 있는데 <thead>, <tbody>, <tfoot> 등이 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
|
| Month | Savings |
|---|
| January | $100 |
| February | $80 |
| Sum | $180 |
<thead>, <tbody>, <tfoot>은 표에서 각 부분(머리, 본문, 바닥) 영역을 지정해주기 위해 사용되며, 지금은 지정해도 별 차이가 안보일 수 있지만 나중에 각 영역별로 style을 지정해주거나 효과를 넣을 때 사용할 수 있다.
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
| <style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
border: 1px solid black;
}
</style>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
|
| Month | Savings |
|---|
| January | $100 |
| February | $80 |
| Sum | $180 |
