테이블을 구현해보자.
<th> 칼럼명
<tr> 행
<td> 열
<caption> 표 제목
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 만들기</title>
</head>
<body>
<table border="1">
<caption>
<string>표만들기 예제</string>
<p>표의 구조는 제목, 행, 열로 표시된다.</p>
</caption>
<tr>
<th>제목1</th>
<th>제목2</th>
<th>제목3</th>
</tr>
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
</table>
</body>
</html>
colsapn과 rowspan을 이용하여 칸을 합칠 수 있다.
rowspan 열 합치기
colspan 행 합치기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" style="text-align: center;">
<tr>
<td rowspan="2">성명</td>
<td colspan="2">성취평가</td>
</tr>
<tr>
<td>컴퓨터 일반</td>
<td>웹 프로그래밍</td>
</tr>
<tr>
<td>이순신</td>
<td>98</td>
<td>100</td>
</tr>
</table>
</body>
</html>
728x90
반응형
'HTML > HTML 기초' 카테고리의 다른 글
| [HTML] table에서 thead, tbody, tfoot 사용해 보기 - 1 (0) | 2020.07.27 |
|---|---|
| [HTML] <table> 태그 사용해보기 - 2(colgroup) (0) | 2020.07.27 |
| [HTML] <map>태그를 이용해서 링크로 이동하기 (0) | 2020.07.27 |
| [HTML] <a>태그를 활용하여 페이지 이동하기 (0) | 2020.07.27 |
| [HTML] 링크삽입 태그 (<a> 태그) (0) | 2020.07.27 |
