웹문서에 다양한 내용 입력하기(3)
2022. 8. 17. 11:56ㆍ개인활동/HTML+CSS+JS
반응형
Do it! 한권으로 끝내는 웹 기본 교과서
HTML+CSS+JS 웹표준의 정석
으로 웹개발 공부 시작함.
표 만들기
<table>, <caption>
- <table> : 표의 시작과 끝을 알려주는 태그, 이 안에 표와 관련된 태그를 모두 넣음
- <caption> : 표에 제목을 붙이고 싶을 때 이용, 표의 위쪽 중앙에 제목이 표시됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Table 만들기</title>
</head>
<body>
<table>
<caption>표 제목</caption>
</table>
</body>
</html>
<tr>, <td>, <th>
- <tr> : 행을 만듬
- <td> : 행 안의 셀을 만듬
- <th> : 제목 셀을 만들 때 <td> 대신 이용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Table 만들기</title>
</head>
<body>
<table>
<caption>표 제목</caption>
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
</body>
</html>
<thead>, <tbody>, <tfoot>
- <thead> : 테이블의 제목
- <tbody> : 테이블의 본문
- <tfoot> : 테이블의 요약
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Table 만들기</title>
</head>
<body>
<table>
<caption>표 제목</caption>
<thead>
<tr>
<td>1열</td>
<td>2열</td>
</tr>
</thead>
<tbody>
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</tbody>
</table>
</body>
</html>
rowspan, colspan
- <td>나 <th> 태그에 이용하는 속성
- rowspan="합칠 셀의 개수" : 행을 합치는 속성
- colspan="합칠 셀의 개수" : 열을 합치는 속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Table 만들기</title>
</head>
<body>
<table>
<caption>표 제목</caption>
<thead>
<tr>
<td lowspan="3">열</td>
</tr>
</thead>
<tbody>
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
<td>1행 4열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
<td>2행 3열</td>
<td>2행 4열</td>
</tr>
<tr>
<td>3행 1열</td>
<td>3행 2열</td>
<td>3행 3열</td>
<td>3행 4열</td>
</tr>
</tbody>
</table>
</body>
</html>
<col>, <colgroup>
- <colgroup> : 태그 안에 <col>태그를 두개 이상 묶어서 사용
- <col> : 스타일이 없어도 명시해야 하며, 스타일이 있는 경우 스타일 속성을 이용해 설정
- <caption> 태그 다음에 써야 함
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Table 만들기</title>
</head>
<body>
<table>
<caption>표 제목</caption>
<colgroup>
<col>
<col style="width:150px">
<col style="width:200px">
<col>
</colgroup>
<thead>
<tr>
<td lowspan="3">열</td>
</tr>
</thead>
<tbody>
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
<td>1행 4열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
<td>2행 3열</td>
<td>2행 4열</td>
</tr>
</tbody>
</table>
</body>
</html>
반응형
'개인활동 > HTML+CSS+JS' 카테고리의 다른 글
| 웹문서에서 다양한 내용 입력하기(5) (0) | 2022.08.17 |
|---|---|
| 웹문서에서 다양한 내용 입력하기(4) (0) | 2022.08.17 |
| 웹문서에 다양한 내용 입력하기(2) (0) | 2022.08.11 |
| 웹문서에 다양한 내용 입력하기(1) (0) | 2022.08.10 |
| 시맨틱 태그 (0) | 2022.08.09 |