728x90
반응형
SMALL
table을 이용한 실습 html이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--<table> : 표구성-->
<!--테이블에서 border=(0)이 기본값으로 표시 안됨-->
<!--<table border=0>-->
<table border="1">
<!--<tr></tr> : 행 추가-->
<tr>
<!--<td></td> : 열 추가-->
<!--<th></th> : 제목 셀 굵게 표시-->
<th>제목셀</th>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<!--<td></td> : 열 추가-->
<!--<th></th> : 제목 셀 굵게 표시-->
<th>제목셀</th>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
<tr>
<!--<td></td> : 열 추가-->
<!--<th></th> : 제목 셀 굵게 표시-->
<th>제목셀</th>
<td>3행 2열</td>
<td>3행 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>Document</title>
</head>
<body>
<table border="1">
<tr>
<th>이름</th>
<!--style=width~px : 스타일을 줘서 열 너비를 늘림-->
<td style="width: 120px;"></td>
<th>연락처</th>
<td style="width: 120px;"></td>
</tr>
<tr>
<th>주소</th>
<!--colspan : 열을 병합함-->
<td colspan="3"></td>
</tr>
<tr>
<th>자기소개</th>
<td colspan="10"></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>Document</title>
</head>
<body>
<table border="1">
<!--caption : 표의 제목으로 가운데 정렬-->
<caption>
<p>
국내에서 자주 사용하는 모던 브라우저
</p>
</caption>
<tr>
<th>브라우저</th>
<th>제조업체</th>
<th>다운로드</th>
</tr>
<tr>
<th>크롬(Chrome)</th>
<th>Google</th>
</tr>
<tr>
<th>파이어폭스(Firefox)</th>
<th>Mozila</th>
</tr>
<tr>
<th>엣지(Edge)</th>
<th>Microsoft</th>
</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>Document</title>
</head>
<body>
<!--figure, figcaption 으로 표의 제목-->
<figure>
<figcaption>
<p>
<!-- <p></p>:강조해서 진하게 표시 -->
국내에서 자주 사용하는 모던 브라우저
</p>
</figcaption>
<table border="1">
<!--caption : 표의 제목으로 가운데 정렬-->
<!-- <caption>
<p>
국내에서 자주 사용하는 모던 브라우저
</p>
</caption> -->
<tr>
<th>브라우저</th>
<th>제조업체</th>
<th>다운로드</th>
</tr>
<tr>
<th>크롬(Chrome)</th>
<th>Google</th>
</tr>
<tr>
<th>파이어폭스(Firefox)</th>
<th>Mozila</th>
</tr>
<tr>
<th>엣지(Edge)</th>
<th>Microsoft</th>
</tr>
<tr>
<!--caption ㅌ애그는 아래에 코딩해도 위에 표시됨-->
<caption>
<p>
국내에서 자주 사용하는 모던 브라우저
</p>
</caption>
</tr>
</table>
<figcaption>
<p>
<!-- <p></p>:강조해서 진하게 표시 -->
국내에서 자주 사용하는 모던 브라우저
</p>
</figcaption>
</figure>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<colgroup>
<!--span=2 ->영역을 2개의 열로 지정-->
<col span="2" style="background-color: blue;">
<col>
<col style="background-color: yellow;">
</colgroup>
<caption>
colgroup 연습
</caption>
<tr>
<td style="width: 100px; height: 30px;;"></td>
<td style="width: 100px; height: 30px;;"></td>
<td style="width: 100px; height: 30px;;"></td>
<td style="width: 100px; height: 30px;;"></td>
</tr>
<tr>
<td style="width: 100px; height: 30px;;"></td>
<td style="width: 100px; height: 30px;;"></td>
<td style="width: 100px; height: 30px;;"></td>
<td style="width: 100px; height: 30px;;"></td>
</tr>
</table>
</body>
</html>
728x90
반응형
SMALL
'HTML + CSS' 카테고리의 다른 글
| 이미지와 하이퍼링크 실습 (0) | 2024.04.12 |
|---|---|
| 이미지와 하이퍼링크 (0) | 2024.04.12 |
| ol , ul 테스트 (1) | 2024.04.12 |
| HTML 텍스트 관련 태그들! (0) | 2024.04.12 |
| HTML (1) | 2024.04.12 |