728x90
목록 태그를 복습하고, table 태그에 대해서 배워보았다.
<코드>
<!doctupe html>
<html>
<head>
<title>web Programming</title>
</head>
<body>
<h1>COFFEE</h2>
<img src="coffee.jpeg">
<p>하우스 로스팅 원두의 신선한 커피를 맛보고 싶다면 <em>공인 1급 바리스타</em>가 최고급 원두만을 직접엄선하여 사용합니다.</p>
<h2>메뉴</h2>
<ol>
<li>아메리카노</li>
<li>카푸치노</li>
<li>카페라떼</li>
<li>카페모카</li>
</ol>
</body>
</html><실행 결과>
<코드>
<!--
table 표 만들기
구성요소
<table> 테이블을 만드는 태그
<th> 테이블의 헤더부분을 만드는 태그(제목? 강조)
<tr> 테이블의 행을 만드는 태그
<td> 테이블의 열을 만드는 태그
<caption> 테이블 캡션 태그
Default 값은 굵은 글씨체 가운데 정렬이 기본값
테이블 디자인
border 테이블의 테두리
bordercolor 테이블의 테두리 색상
width 테이블의 가로 크기
height 테이블의 세로 크기
align 정렬
bgcolor 배경색
colspan 가로 합병(열 합병)
rowspan 세로 합병(행 합병)
-->
<html>
<body>
<table border="1" align="center">
<caption> 표제목 </caption>
<tr>
<p><th colspan="3">오늘의 수입/지출</th></p>
</tr>
<tr>
<th>내용</th>
<th>수입</th>
<th>지출</th>
</tr>
<tr align="center">
<td>월급1</td>
<td>1,000,000</td>
<td></td>
</tr>
<tr align="center">
<td>점심값</td>
<td></td>
<td>5,000</td>
</tr>
<tr align="center">
<td>부모님 선물</td>
<td></td>
<td>5,000</td>
</tr>
<tr align="center">
<td>총계</td>
<td>수입</td>
<td rowspan="2">지출</td>
</tr>
<tr align="center">
<td>1,000,000</td>
<td>10,000</td>
</tr>
</table>
</body>
</html><실행 결과>
728x90
'Experience > 스터디 활동 기록' 카테고리의 다른 글
| [코딩 멘토링] html 다양한 input 태그 - 2020.11.20.금 (0) | 2021.12.29 |
|---|---|
| [코딩 멘토링] html input 태그 - 2020.11.16.월 (0) | 2021.12.29 |
| [코딩 멘토링] html 텍스트 강조, 목록, 이미지, 링크 - 2020.11.02.월 (0) | 2021.12.29 |
| [코딩 멘토링] 웹 프로그래밍 기본 태그(html) - 2020.10.16.금 (0) | 2021.12.29 |
| [코딩 멘토링] 오리엔테이션 - 2020.10.05.월 (0) | 2021.12.29 |