[HTML] table
2024. 10. 4. 20:31ㆍHTML
html의 가장 기본이라고 할 수 있는 table에 대해 알아보자.
여러가지 표를 만들어보면서 각각의 태그들 사용법을 익혀볼 것이다.
아, 참고로 html의 IDE는 vscode를 사용해주었다.
<style>
table {
border-collapse: collapse;
border: 2px solid black;
}
thead tr {
background-color: black;
color: white;
}
tbody tr {
background-color: #f5f6f7;
color: black;
}
table td,
table th {
padding: 5px 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>테이블 태그 (표 만들기)</h1>
<hr>
<table align="center" width="600">
<thead>
<tr>
<th>태그</th>
<th>설명</th>
</tr>
</thead>
<tbody>
<tr>
<td>table</td>
<td>표의 시작과 끝을 나타낸다</td>
</tr>
<tr>
<td>tr</td>
<td>table 내부에 한 줄을 생성 (table row)</td>
</tr>
<tr>
<td>table</td>
<td>표의 시작과 끝을 나타낸다</td>
</tr>
<tr>
<td>td</td>
<td>tr 내부에 한 칸을 생성 (table data, cell)</td>
</tr>
<tr>
<td>th</td>
<td>td 처럼 칸을 생성. 강조되면서 가운데 정렬 (table headline)</td>
</tr>
<tr>
<td>thead</td>
<td>표를 상 중 하로 나누고 싶을 때 사용</td>
</tr>
<tr>
<td>tbody</td>
<td>표를 상 중 하로 나누고 싶을 때 내용을 나타내기 위해 사용</td>
</tr>
<tr>
<td>tfoot</td>
<td>표를 상 중 하로 나누고 싶을 때 하단을 나타내기 위해 사용</td>
</tr>
</tbody>
</table>
</body>
</html>
>> 결과
| 태그 | 설명 |
| table | 표의 시작과 끝을 나타낸다 |
| tr | table 내부에 한 줄을 생성 (table row) |
| table | 표의 시작과 끝을 나타낸다 |
| td | tr 내부에 한 칸을 생성 (table data, cell) |
| th | td 처럼 칸을 생성. 강조되면서 가운데 정렬(table headline) |
| thead | 표를 상 중 하로 나누고 싶을 때 사용 |
| tbody | 표를 상 중 하로 나누고 싶을때 내용을 나타내기 위해 사용 |
| tfoot | 표를 상 중 하로 나누고 싶을 때 하단을 나타내기 위해 사용 |
테이블 태그 내부에도 스타일이 적용 된다.
<body>
<h1>표 만들기 연습</h1>
<br>
<h4>테이블 태그는 레이아웃을 사용할때 쓰면 안된다</h4>
<h4>테이블 태그는 다수의 데이터를 정리하는 용도로 쓰기</h4>
<hr>
<table border="1" cellpadding="10" cellspacing="0" align="center">
<tr bgcolor="#eee">
<th>기업명</th>
<th>설립일</th>
<th>시가총액(원)</th>
<th>매출(원)</th>
<th>업종</th>
</tr>
<tr>
<td>네이버</td>
<td>1996.06.02</td>
<td>34.6조</td>
<td>8.2조</td>
<td>검색 포털</td>
</tr>
<tr>
<td>카카오</td>
<td>1995.02.16</td>
<td>25조</td>
<td>7.1조</td>
<td>메신저</td>
</tr>
<tr>
<td>라인</td>
<td>2011.06.23</td>
<td>27.1조</td>
<td>15.6조</td>
<td>메신저, 검색 포털</td>
</tr>
<tr>
<td>쿠팡</td>
<td>2010.07.01</td>
<td>42조</td>
<td>37.9조</td>
<td>이커머스</td>
</tr>
<tr>
<td>배달의 민족</td>
<td>2011.03.10</td>
<td>7.6조</td>
<td>2.9조</td>
<td>배달 플랫폼</td>
</tr>
</table>
</body>
</html>
>>결과
| 기업명 | 설립일 | 시가총액(원) | 매출(원) | 업종 |
| 네이버 | 1996.06.02 | 34.6조 | 8.2조 | 검색포털 |
| 카카오 | 1995.02.16 | 25조 | 7.1조 | 메신저 |
| 라인 | 2011.06.23 | 27.1조 | 15.6조 | 메신저, 검색 포털 |
| 쿠팡 | 2010.07.01 | 42조 | 37.9조 | 이커머스 |
| 배달의 민족 | 2011.03.10 | 7.6조 | 2.9조 | 배달 플랫폼 |
테이블 태그는 레이아웃을 사용할 때 쓰면 안되고,
다수의 데이터를 정리하는 용도 등으로 사용해야 한다.
테이블 줄과 칸 합치기
<h1>ex04.html - 줄, 칸 합치기</h1>
<hr />
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th colspan="2">team and player</th>
<th>kill</th>
<th>death</th>
<th>assist</th>
</tr>
<tr>
<td rowspan="5">T1</td>
<td>Faker</td>
</tr>
<tr>
<td>Gumayusi</td>
</tr>
<tr>
<td>Keria</td>
</tr>
<tr>
<td>Zeus</td>
</tr>
<tr>
<td>Oner</td>
</tr>
</table>
</body>
</html>>>결과
| team and player | kill | death | assist | |
| T1 | Faker | |||
| Gumayusi | ||||
| Keria | ||||
| Zeus | ||||
| Oner | ||||
확실히 눈에 보여지는 결과가 있으니까 더 성취감이 느껴진다.
비슷한 형식의 많은 데이터를 다루기 위해서는 테이블을 활용하는 것이 깔끔하다.
'HTML' 카테고리의 다른 글
| [HTML] 농협 사이트 만들어 보기 (0) | 2024.10.05 |
|---|---|
| [HTML] display (0) | 2024.10.05 |
| [HTML] a / input Tag (0) | 2024.10.04 |
| [HTML] img 태그 (1) | 2024.10.04 |