Frontend
day02_CSS_table
AIHYEONJI
2025. 4. 3. 14:00
1. 테이블
<table> 태그로 만들고 그 안에
<tr> : table row
<td> : table data
<th> : table header , 머리글
위의 태그를 사용해 셀 데이터를 입력한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>테이블</title>
<style>
table,
th,
td {
border: 1px solid black;
/* 라인을 한줄로 */
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>이름</th>
<th>나이</th>
</tr>
<tr>
<td>김사과</td>
<td>20</td>
</tr>
</table>
</body>
</html>
2. <thead> , <tbody>
~ <thead>,<tbody>는 HTML 테이블에서 표의 구조를 논리적으로 구분하기 위해 사용하는 태그이다.
2.1 <thead> : 테이블의 헤더 영역, 즉 제목 행들을 감싸는 용도 + <th>
2.2 <tbody> : 실제 데이터가 들어가는 본문 영역을 감싸며, + <td>이 포함된 여러 <tr>을 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>thead / tbody</title>
<style>
table,
th,
td {
border: 2px solid black;
border-collapse: collapse;
}
th,
td {
padding: 10px;
text-align: center;
}
thead {
background-color: deepskyblue;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>과목</th>
<th>점수</th>
<th>등급</th>
</tr>
</thead>
<tbody>
<tr>
<td>국어</td>
<td>85</td>
<td>B</td>
</tr>
<tr>
<td>수학</td>
<td>90</td>
<td>A</td>
</tr>
</tbody>
</table>
</body>
</html>
3. <colspan> ,<rowspan>
<colspan> : 열끼리 합치는 것
<rowspan> : 행끼리 합치는 것
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>셀합치기</title>
</head>
<style>
table,
th,
td {
border: 2px solid black;
border-collapse: collapse;
}
table {
width: 500px;
}
td {
text-align: center;
}
</style>
<body>
<table>
<tr>
<td colspan="3">1</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>셀합치기</title>
<style>
table,
th,
td {
border: 2px solid black;
border-collapse: collapse;
}
th,
td {
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="2">이름</th>
<th colspan="2">성적</th>
</tr>
<tr>
<th>수학</th>
<th>영어</th>
</tr>
<tr>
<td>김사과</td>
<td>90</td>
<td>85</td>
</tr>
</table>
</body>
</html>
4. Table 응용
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>셀합치기</title>
</head>
<style>
table,
th,
td {
border: 2px solid black;
border-collapse: collapse;
}
table {
width: 500px;
}
td {
text-align: center;
}
</style>
<body>
<table>
<tr>
<td colspan="3">1</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>셀합치기</title>
<style>
table,
th,
td {
border: 2px solid black;
border-collapse: collapse;
}
th,
td {
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="2">이름</th>
<th colspan="2">성적</th>
</tr>
<tr>
<th>수학</th>
<th>영어</th>
</tr>
<tr>
<td>김사과</td>
<td>90</td>
<td>85</td>
</tr>
</table>
</body>
</html>