html 테이블만들기
- 웹/html
- 2020. 8. 23.
Table
html에서 굉장히 많이 쓰이는 태그중에 하나다.
표,갤러리,웹 사이트의 레이아웃 공간을 배치할때 주로 사용하고 다양한 응용이 가능하다.
표만들기
| 태그 | 설명 |
| <table></table> | html문서에 표를 삽입 |
| <th></th> | 테이블의 헤더 부분을 만드는 태그 |
| <tr></tr> | <table>안에서 사용하고 한줄표시 |
| <td></td> | <tr>태그내에서 사용하고 한 칸을 표시 |
| <ht></ht> | 테이블 내에 제목줄 표시 |
| <caption></caption> | 테이블 위에 테이블 제목표시 |
테이블을 이용해서 간단한 표를 만들어보자.
<html>
<head>
<title> 테이블로 간단한 표만들기! </title>
</head>
<body >
//모든 텍스트 가운데정렬 ; border = 선표시
<table style="text-align:center;"border>
//bgcoler="색상코드"//텍스트 가운데정렬//td칸 3개 합친다.
<tr bgcolor="#2EFEC8" align="center"><td colspan="3" >오늘의 수입/지출</td></tr>
//<tr>은 행나누기 <td>는 열 나누기 기능을 갖고있다
<tr>
<td>내용</td>
<td>수입</td>
<td>지출</td>
</tr>
<tr>
<td>월급!</td>
<td>1,000,000</td>
<td></td>
</tr>
<tr>
<td>점심값</td>
<td></td>
<td>5,000</td>
</tr>
<tr>
<td>부모님 선물</td>
<td></td>
<td>30,000</td>
</tr>
<td rowspan="3">총계</td>
<td>수입</td>
<td>지출</td>
<tr><td>1,000,000</td>
<td>35,000</td>
<tr><td>남은 돈</td><td>965,000</td></tr></tr>
</table>
</body>
</html>
다음 글에서 html의 다양한 기능들을 설명한후 좀 더 그럴싸한 모양으로 만들어 보겠다.
'웹 > html' 카테고리의 다른 글
| [html]기초 마무리 문제(회원가입창 모양새만들기) (0) | 2020.08.23 |
|---|---|
| html 기초 마무리 (0) | 2020.08.23 |
| html 기초 (0) | 2020.08.23 |