개념.log/Publishing
[HTML] 04.표를 만드는 태그
_2J
2020. 6. 12. 01:07
Index
더보기
2. colspan , rowspan 속성 - 행 또는 열 합치기
3. <caption>, <figcaption> - 표에 제목 붙이기
4. <thead> , <tbody> , <tfoot> - 표 구조 정의하기
1. <table> , <tr> , <td> , <th> - 기본적인 표 만들기
1-1 ) <table> 태그로 표 자리를 생성
1-2 ) <tr> 태그로 행 생성
1-3 ) <td> 태그로 각 행마다 셀 생성
기본적으로 표는 테두리 없이 표시되기 때문에
셀 구분을 쉽게 할 수 있도록 css를 사용하여 테두리를 추가했습니다.
<th> 태그는 표에 제목 셀을 설정 가능 -> 다른 글자들 보다 굵게 표시되고 셀의 중앙에 표시된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 만들기</title>
<style>
table, th, td {
border:1px solid #ccc;
}
td {
padding:5px; /* 셀 테두리와 내용 사이의 간격(패딩) */
}
</style>
</head>
<body>
<table>
<tr>
<th> 제목 셀 </th>
<td> 1행 2열 </td>
<td> 1행 3열 </td>
</tr>
<tr>
<th> 제목 셀 </th>
<td> 2행 2열 </td>
<td> 2행 3열 </td>
</tr>
</table>
</body>
</html>
2. colspan , rowspan 속성 - 행 또는 열 합치기
<!-- 기본형 -->
<td colspan="합칠 행의 개수"> 내용 </td>
<tr rowspan="합칠 열의 개수"> 내용 </td>
3. <caption>, <figcaption> - 표에 제목 붙이기
3-1 ) <caption> 표의 위쪽 중앙에 표 제목 표시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 만들기</title>
<style>
table, th, td {
border:1px solid #ccc;
}
td, th {
padding:10px; /* 셀 테두리와 내용 사이의 간격(패딩) */
}
</style>
</head>
<body>
<table>
<caption>
<strong>Modern Browser</strong>
<p>국내에서 자주 사용하는 모던 브라우저</p>
</caption>
<tr>
<th>브라우저</th>
<th>제조업체</th>
<th>다운로드</th>
</tr>
<tr>
<th>크롬(Chrome)</th>
<td>Google</td>
<td>https://www.google.com/chrome/ </td>
</tr>
<tr>
<th>파이어폭스(Firfox)</th>
<td>Mozilla</td>
<td>https://www.mozilla.org/ko/firefox/</td>
</tr>
<tr>
<th> 엣지(Edge) </th>
<td> Microsoft </td>
<td>https://www.microsoft.com/ko-kr/windows/microsoft-edge</td>
</tr>
</table>
</body>
</html>
3-2 ) <figcaption> 표의 위쪽이나 아래쪽 제목 표시
- <figure> 태그로 감싼 후 <figcaption> 태그 삽입
<table>태그 보다 앞쪽에 사용하면 표제목이 위에 표시되고
</table>태그 뒤쪽에 사용하면 표 제목이 아래에 표시됨.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 만들기</title>
<style>
table, th, td {
border:1px solid #ccc;
}
td, th {
padding:10px; /* 셀 테두리와 내용 사이의 간격(패딩) */
}
</style>
</head>
<body>
<figure>
<figcaption>
<p>국내에서 자주 사용하는 <b>모던 브라우저</b></p>
</figcaption>
<table>
<tr>
<th>브라우저</th>
<th>제조업체</th>
<th>다운로드</th>
</tr>
<tr>
<th>크롬(Chrome)</th>
<td>Google</td>
<td>https://www.google.com/chrome/ </td>
</tr>
<tr>
<th>파이어폭스(Firfox)</th>
<td>Mozilla</td>
<td>https://www.mozilla.org/ko/firefox/</td>
</tr>
<tr>
<th> 엣지(Edge) </th>
<td> Microsoft </td>
<td>https://www.microsoft.com/ko-kr/windows/microsoft-edge</td>
</tr>
</table>
</figure>
</body>
</html>
4. <thead> , <tbody> , <tfoot> - 표 구조 정의하기
제목부분 ( head ) , 본문 ( body) , 요약부분 ( foot )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 만들기</title>
<style>
table, th, td {
border:1px solid #ccc;
}
th, td {
width:80px; /* 셀의 너비 */
padding:10px; /* 셀 테두리와 내용 사이의 간격(패딩) */
}
thead, tfoot {
background : #eeeeee; /* thead와 tfoot의 배경 색 */
}
</style>
</head>
<body>
<table>
<caption>제주특별자치도 학교현황(2015.4.1 기준)</caption>
<thead>
<tr>
<th>구분</th>
<th>학교수</th>
<th>학급수</th>
<th>학생수</th>
<th>교원수</th>
</tr>
</thead>
<tbody>
<tr>
<th>유치원</th>
<td>117</td>
<td>252</td>
<td>5,547</td>
<td>474</td>
</tr>
<tr>
<th>초등학교</th>
<td>111</td>
<td>1,720</td>
<td>37,686</td>
<td>2,632</td>
</tr>
<tr>
<th>중학교</th>
<td>44</td>
<td>699</td>
<td>21,274</td>
<td>1,412</td>
</tr>
<tr>
<th>고등학교</th>
<td>29</td>
<td>676</td>
<td>22,019</td>
<td>1,433</td>
</tr>
<tr>
<th>특수학교</th>
<td>3</td>
<td>90</td>
<td>428</td>
<td>160</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>합계</th>
<td>300</td>
<td>3,437</td>
<td>86,954</td>
<td>6,111</td>
</tr>
</tfoot>
</table>
</body>
</html>
