728x90
이렇게 생긴 표를 만들어보려고 한다
먼저 전체 코드~
<!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 black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>날짜</th>
<th>항목</th>
<th>금액</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">0801</td>
<td>햄버거</td>
<td>10000</td>
</tr>
<tr>
<td>카페</td>
<td>5000</td>
</tr>
<tr>
<td>0802</td>
<td>다이소</td>
<td>3000</td>
</tr>
<tr>
<td colspan="2"> 총합</td>
<td>18000</td>
</tr>
</tbody>
</table>
</body>
</html>
1. table 기본
table은 <table>
태그를 이용한다.<thead>
: 머리글의 집합, <tbody>
: 표의 본문, <tfoot>
바닥글의 집합을 의미한다.
내용을 담을 때 필요한<tr>
은 행을 <th>
는 머리글을, <td>
는 데이터 값을 의미한다.
2. 셀 합치기
셀 합치기는 rowspan
과 colspan
을 사용하면 된다.rowspan
은 row를 차지하는 위치, 즉 열을 몇 칸 합칠지를 의미한다.
rowspan이 2라면 세로로 두 줄을 차지하는 칸을 의미한다.
반대로 colspan
은 col을 차지하는 위치, 즉 몇 행을 합칠지를 의미한다.
colspan이 2라면 가로로 두 줄을 차지하는 칸을 의미한다.
사진에서 0801은 두 행을 차지하기 때문에 rowspan을, 총합은 두 열을 차지하기 때문에 colspan을 사용하면 된다.
3. 표 경계선 넣기 (CSS)
표에 경계선을 넣는 것은 CSS에서 <style>
태그를 이용한다.
table, th, td {
border: 1px solid black;
}
속성값에 border: {너비} | {스타일} | {색}
순서로 값을 넣을 수 있다.
다른 값은 생략 가능하지만 스타일은 생략할 수 없다.
만약 table에만 경계를 넣는다면 표의 바깥쪽에 경계가 생긴다. th와 td에 모두 경계를 넣어줘야 각 셀에 경계선이 생길 수 있다.
728x90