웹 문서 내용 입력(3)
2025. 9. 3. 01:12ㆍ웹 기초/html
표 작성하기
- <table> : 표의 시작과 끝을 표시
- <caption> : <table> 태그 사이에 작성하여서 표의 제목을 표시
<table>
<caption>ssjjss</caption>
</table>- <tr> : 태그의 행을 순서대로 생성
- <td> : 행에서 셀을 순서대로 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ssjjss</title>
</head>
<body>
<table>
<caption>ssjjss</caption>
<tr>
<td>1s</td>
<td>2s</td>
</tr>
<tr>
<td>3s</td>
<td>4s</td>
</tr>
</table>
</body>
</html>
- <th> : 제목 행에 셀을 만들 때는 <th>를 시용.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ssjjss</title>
</head>
<body>
<table>
<caption>ssjjss</caption>
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td>1s</td>
<td>2s</td>
</tr>
<tr>
<td>3s</td>
<td>4s</td>
</tr>
</table>
</body>
</html>
<thead>, <tbody>, <tfoot>
- <thead> : 표의 머리글 영역. 열 제목을 표시
- <tbody> : 실제 데이터가 들어가는 영역.
- <tfoot> : 표의 바닥글. 보통 데이터의 합계나 평균 등의 정보가 들어감.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ssjjss</title>
</head>
<body>
<table>
<caption>peolpe with JS</caption>
<thead>
<tr>
<th>name</th>
<th>gender</th>
<th>living</th>
</tr>
</thead>
<tbody>
<tr>
<td>ssjjss</td>
<td>male</td>
<td>suwon</td>
</tr>
<tr>
<td>sjs</td>
<td>male</td>
<td>changwon</td>
</tr>
<tr>
<td>JSJS</td>
<td>woman</td>
<td>Gwangju</td>
</tr>
</tbody>
</table>
</body>
</html>
rowspan, colspan 속성
- <td rowspan="합칠 셀의 개수"> : 행의 개수 만큼 합치는 속성
- <td colspan="합칠 셀의 개수"> : 열의 개수 만큼 합치는 속성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ssjjss</title>
</head>
<body>
<table>
<caption>peolpe with JS</caption>
<thead>
<tr>
<th>name</th>
<th>gender</th>
<th>living</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">ssjjss</td>
<td rowspan="2">male</td>
<td>suwon</td>
</tr>
<tr>
<td>changwon</td>
</tr>
<tr>
<td>JSJS</td>
<td>woman</td>
<td>Gwangju</td>
</tr>
</tbody>
</table>
</body>
</html>
<col>, <colgroup>
- 표의 너비나 색성을 수정하기 위해서 <col>, <colgroup>을 활용
- <colgroup> 태그 사이에 <col>을 열의 개수만큼 사용해서 적용해 줌
- 만약 열에 아무것도 적용하지 않는 경우에는 <col>만 작성해 두면 됨
- <col style="width: 150px; background-color:aquamarine;"> :처럼 style속성을 활용하여서 width를 150px, 배경색을 지정가능.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ssjjss</title>
</head>
<body>
<table>
<caption>peolpe with JS</caption>
<colgroup>
<col style="background-color: aqua;">
<col style="width: 150px; background-color:aquamarine;">
<col style="width: 150px;">
</colgroup>
<thead>
<tr>
<th>name</th>
<th>gender</th>
<th>living</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">ssjjss</td>
<td rowspan="2">male</td>
<td>suwon</td>
</tr>
<tr>
<td>changwon</td>
</tr>
<tr>
<td>JSJS</td>
<td>woman</td>
<td>Gwangju</td>
</tr>
</tbody>
</table>
</body>
</html>