웹 서버/웹 기초 (HTML, CSS)
HTML #3 나열을 의미하는 태그, 테이블
코다람쥐
2022. 4. 21. 18:03
1. Ordered List
<ol> ... </ol>
집어넣은 순서대로 번호가 붙여짐.
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
50번부터 시작하게 설정가능
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
2. Unordered List
<ul> ... </ul>
정렬되지 않고 리스트 생성
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
3. 테이블
엑셀의 표 형식으로 테이블을 만듬
<table><tr><th>...</th> or <td> ... </td></tr></table>
<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>
table로 표를 생성하고
tr은 테이블의 행을 의미한다
th로 테이블의 헤더(컬럼)을 의미한다.
td는 셀을 선택하고 td안의 값으로 표를 채워넣는다.
분석을해보면 tr로 한 개의 행을 생성하고 th로 헤더성격의 데이터를 채워넣는다.
tr로 한 개의 행을 더 생성하고 td로 일반적인 데이터를 채워넣는다.
데이터를 채워넣기 전에 헤더, 바디, 끝을 구분하기 위해서 영역을 설정할 수도 있다.
<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>
1번째 행은 테이블의 속성을 나타내는 컬럼부분이고
2~3번째 행은 데이터 값들이다.
마지막 4번째 행은 합계를 표시하는 용도로 사용하였다.
굳이 영역을 구분해두는 이유는 영역을 활용하여 CSS를 적용시킬 수 있기 때문이다.