[ table] <table> 태그를 통해 표를 만들고 border 형식으로 줄 굵기를 지정할수 있다.(추후 css로 구현 가능)
<html>
<head>
<meta charset="utf-8">
<title>테이블태그 연습하기</title>
</head>
<body>
<center>
<table border ="1">
<tr>
<td>자기소개</td>
</tr>
<tr>
<td>이름 : 제리 </td>
</tr>
<tr>
<td>주소:서울 특별시 </td>
</tr>
<tr>
<td>생년월일 1988 1.1</td>
</tr>
</table>
</center>
</body>
</html>
[실행결과]
[ table 심화] <table border = "1"(선 굵기) cellspacing="0"(셀간격) width ="600"(테이블 너비)>
<html>
<head>
<meta charset="utf-8">
<title>테이틀 태그 속성 알아보기</title>
</head>
<body>
<br><br><br>
<center>
<table width="600" border ="1" cellspacing="0">
<tr>
<td>자기소개</td>
</tr>
<tr>
<td>이름 : 제리 </td>
</tr>
<tr>
<td>주소:서울 특별시 </td>
</tr>
<tr>
<td>생년월일 1988 1.1</td>
</tr>
</table>
</center>
</body>
</html>
[실행결과]
[테스트 페이지 만들어보기]
<html>
<head>
<meta charset="utf-8">
<title>상품페이지</title>
</head>
<body>
<br><br>
<center>
<table>
<tr><td>
<table border="1" cellspacing="0" width="400">
<tr>
<td>
<img src="이미지경로.확장자" width="200">
</td>
<td>
<font size="5"><b>관련 상품 추천1</b></font><br>
상품명: a
</td>
</tr>
</table>
</td><td>
<table border="1" cellspacing="0" width="400">
<tr>
<td>
<img src="이미지경로.확장자" width="200">
</td>
<td>
<font size="5"><b>상품 추천2</b></font><br>
상품명: b
</td>
</tr>
</table>
</td></tr>
<tr><td>
<table border="1" cellspacing="0" width="400">
<tr>
<td>
<img src="이미지경로.확장자" width="200">
</td>
<td>
<font size="5"><b>관련 상품 추천3</b></font><br>
상품명: c
</td>
</tr>
</table>
</td><td>
<table border="1" cellspacing="0" width="400">
<tr>
<td>
<img src="이미지경로.확장자" width="200">
</td>
<td>
<font size="5"><b>상품 추천4</b></font><br>
상품명: e
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
엄청 헷갈려서 예제를 보고했다. 태그에대해 설명을 하자면
1.처음 <table>을 만들어 큰틀을 잡고
2.그리고 <tr><td>으로 1행 1열을 만든다. 상품추천1의 이미지,
3.각각의 상품마다 등 <table> 속성을 넣어 작성한다.
4.텍스트를 삽입하고 <td>를 통해 같은행에 상품추천2를 입력한다.
5. <tr><td>를 통해 1행1열을 다시만들어 상품추천1 밑에 행에 상품추천3 을 만든다.마무리후
6.<td>를 통해 상품추천4를 만든다.
7.<table>큰틀을 마무리한다.
출처: IT UP, 코딩이 처음이어도 괜찮아! 진짜 입문자를 위한 웹개발과 IT 기초 지식
https://itup.co.kr/rv1/k-digital/main/lecture/info?course_uid=912417&education_uid=52212
잔재미코딩
반응형
'프론트엔드개발 > HTML,CSS,BS' 카테고리의 다른 글
| [HTML]step.6 table 태그 colspan / rowspan (0) | 2024.06.07 |
|---|---|
| [HTML]step.5 절대 경로 vs 상대경로 (0) | 2024.06.07 |
| [HTML]step.3 인코딩, <br><center><img src><font size> (0) | 2024.06.01 |
| [HTML]step.2 개념과 웹페이지 구조 (0) | 2024.06.01 |
| [HTML]step.1 VScode 환경설정 (live server 설치) (0) | 2024.06.01 |
