HTML&CSS/HTML
표(Table)
yunajoe
2023. 1. 8. 12:02
HTML 테이블(Table)
테이블(Table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 의미합니다.
HTML에서는 <table>태그를 사용하여 이러한 테이블을 작성할 수 있습니다.
<table>태그는 다음과 같은 태그들로 구성됩니다.
1. <tr>태그는 테이블에서 열을 구분해 줍니다.즉, 행을 만든다.
2.<td> 태그는 행 안에 있는 셀을 만든다.
3. <th> 태그는 표의 제목 행에 셀을 만들때 사용한다. th태그는 내용은 진하게 표시가 되고 중앙에 배치가 된다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
table, th, td {
border: 1px solid blue;
border-collapse: collapse;
/* border-collapse: seperate가 default값이다; */
}
th, td {
padding: 10px 10px;
}
</style>
<body>
<h2>상품구성</h2>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<tr>
<th>용도</th>
<th>중량</th>
<th>갯수</th>
<th>가격</th>
</tr>
<tr>
<td>선물용</td>
<td>3Kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>선물용</td>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>3Kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</table>
</body>
</html>
<thead>, <tbody>, <tfoot>태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table, th, td {
border:1px solid blue;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>갯수</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>선물용</td>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>총합계</td>
<td>164,000원</td>
</tr>
</tfoot>
</table>
</body>
</html><rowspan>, <colsapn>
- 행을 합치려면 rowspan속성 & 열을 합치려면 colspan 속성사용
<td rowspan="합칠셀의갯수"> 셀의 내용 </td>
<td colspan="합칠셀의갯수"> 셀의 내용 </td>
# 행을 합칠 때 쓰는 rowspan속성
| rowspan="2" | |||
# 열을 합칠때 쓰는 colspan속성
| colspan="2" | |||
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table, tr, td {
border: solid 1px blue;
border-collapse: collapse;
}
</style>
</head>
<body>
<caption>선물용과 가정용 상품 구성</caption>
<table>
<thead>
<th>용도</th>
<th>중량</th>
<th>갯수</th>
<th>가격</th>
</thead>
<tbody>
<tr>
<td rowspan="2">선물용</td>
<td>3</td>
<td>11~16</td>
<td>35,000</td>
</tr>
<tr>
<td>5</td>
<td>18~26</td>
<td>52,000</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3</td>
<td>11~16</td>
<td>30,000</td>
</tr>
<tr>
<td>5</td>
<td>18~26</td>
<td>47,000</td>
</tr>
</tbody>
</table>
</body>
</html>
<col>, <colgroup> 태그
- 특정 열에 배경색을 넣거나 너비를 바꿀때 사용
- col태그는 열울 1개만 지정할때 사용 colgroup태그는 col태그를 2개 이상 묶어서 사용
- colgroup태그는 닫는 태그가 있지만 col태그는 닫는 태그가 없다
- caption태그 다음에 써야 한다. 즉, 표의 내용이 시작되기 전에 열의 상태를 알려주는 것
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table, th, td {
border:1px solid #ccc;
border-collapse: collapse;
}
th, td { padding:10px 20px; }
</style>
</head>
<body>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<colgroup>
<col style="background-color:yellow;">
<col>
<col style="width:150px">
<col style="width:150px">
</colgroup>
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>갯수</t>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>
</table>
</body>
</html>