html 테이블태그<table> 연습[test10]
페이지 정보
작성자 관리자 댓글 0건 조회 429회 작성일 21-08-10 21:22본문
1.html 테이블 태그(table tag) 연습(첨부파일 test10_easy.html)
○ 실행화면
○ 소스코드 설명
<html> <!-- hyper text markup language의 약자로 웹에서 사용하는언어 -->
<body> <!-- html태그의 본문을 여는 태그 -->
<table border="1"> <!-- 태이블(표) 태그,테두리 두께는1로 함 -->
<tr> <!-- table row의 약자 -->
<td>날짜</td> <!-- table data의 약자 -->
<td>종가</td>
<td>전일비</td>
<td>시가</td>
<td>고가</td>
<td>저가</td>
</tr> <!-- tr태그를 닫음 -->
<tr>
<td>2021.08.09</td>
<td>81,500</td>
<td>0</td>
<td>81,500</td>
<td>82,300</td>
<td>80,900</td>
</tr>
<tr>
<td>2021.08.06</td>
<td>81,500 </td>
<td>-600</td>
<td>81,900</td>
<td>82,500</td>
<td>81,300</td>
</tr>
<tr>
<td>2021.08.05</td>
<td>82,100</td>
<td>-800</td>
<td>83,300</td>
<td>83,300</td>
<td>82,000</td>
</tr>
</table> <!-- 테이블 태그를 닫아줌 -->
</body> <!-- html본문태그를 닫아줌 -->
</html> <!-- html태그를 종료함 -->
2.html5 테이블 태그 연습(첨부파일 test10.html)
○ 실행화면
○ 소스코드 설명
<!doctype html> <!-- html5 태그를 사용하겠다고 정의해줌 -->
<html>
<head> <!-- head태그에는 자바스크립트(java script)나 css등을 기록함 -->
<meta charset="utf-8">
<!-- 브라우저 등 환경에 따라 한글이 깨진는 것을 방지하기 위한 인코딩으로 euc-kr아니 utf-8을 사용
css 부분의 주석을 달때는 /* 태그설명1 */ 이렇게 사용한다
html을 메모장에서 저장할때에는 인코딩부분을 utf-8로 저장해야 한글이 안깨짐
-->
<title>html 테이블 연습</title> <!-- html페이지의 제목부분> -->
<!-- css(cascading style sheet)에는 글자색상이나 테이블(표)의 색상등을 정의해줌 -->
<style type="text/css"> /* css(cascading style sheet)에는 글자색상이나 테이블(표)의 색상등을정의해줌 */
thead{ background-color: yellow; } /* thead태그의 배경부분색상은 노란색으로 함 */
tbody{ background-color: aquamarine; } /* tbody는 바다색으로함 */
</style>
</head>
<body>
<table border="1" width="500" height="300"> <!-- 표의 폭은 500px,높이는 300px 픽셀로 함 -->
<caption>주식코드별 일별시세(html 테이블태그 예제</caption>
<!-- caption태그는 표의 제목을 기재 -->
<thead> <!-- 테이블(표)의 상단 항목은 thead로 감싸줌 -->
<tr>
<th>날짜</th>
<th>종가</th>
<th>전일비</th>
<th>시가</th>
<th>고가</th>
<th>저가</th>
</tr>
</thead>
<tbody> <!-- 표의데이터 부분은 tbody태그로 감싸줌 -->
<tr>
<td>2021.08.09</td>
<td>81,500</td>
<td>0</td>
<td>81,500</td>
<td>82,300</td>
<td>80,900</td>
</tr>
<tr>
<td>2021.08.06</td>
<td>81,500 </td>
<td>-600</td>
<td>81,900</td>
<td>82,500</td>
<td>81,300</td>
</tr>
<tr>
<td>2021.08.05</td>
<td>82,100</td>
<td>-800</td>
<td>83,300</td>
<td>83,300</td>
<td>82,000</td>
</tr>
</tbody>
</table>
<br> <!-- break의 약자로 키보드의 엔터처럼 다음줄로 내림 -->
테이블 태크연습
</body>
</html>
첨부파일
- test10_easy.html (1.1K) 3회 다운로드 | DATE : 2021-08-10 21:22:43
- test10.html (1.8K) 6회 다운로드 | DATE : 2021-08-10 21:22:43
댓글목록
등록된 댓글이 없습니다.
