[Html] 테이블(Table)
페이지 정보
본문
<table> 테이블을 만드는 태그
<th> 테이블의 헤더부분을 만드는 태그
<tr> 테이블의 행을 만드는 태그
<td> 테이블의 열을 만드는 태그
테이블을 만드는 순서는 제일 바깥쪽에는 <table></table>태그가 들어가고 가장 위에는 <th>라는 테이블 헤더 태그를 사용한다. Default값은 굵은 글씨체에 가운데 정렬이다. 이 태그는 안쓰는 사람이 훨씬 많다. (대부분 <tr>태그를 활용하여 테이블 헤더를 만든다. 그 다음은 행을 만드는 태그 <tr>태그가 들어간다. 그리고 <tr>태그 안에는 열을 만드는 속성<td>태그가 들어간다.
<!DOCTYPE html PUBLIC>
<html>
<head>
<meta charset="EUC-KR">
<title>초간단 테이블</title>
</head>
<body>
<table border="1">
<th>테이블</th>
<th>만들기</th>
<tr><!-- 첫번째 줄 시작 -->
<td>첫번째 칸</td>
<td>두번째 칸</td>
</tr><!-- 첫번째 줄 끝 -->
<tr><!-- 두번째 줄 시작 -->
<td>첫번째 칸</td>
<td>두번째 칸</td>
</tr><!-- 두번째 줄 끝 -->
</table>
</body>
</html>
테이블 디자인 변경
border 테이블의 테두리
bordercolor 테이블의 테두리 색상
width 테이블 가로 크기
height 테이블 세로 크기
align 정렬
bgcolor 배경색
colspan 가로 합병(열 합병)
rowspan 세로 합병(행 합병)
테이블의 디자인을 바꿀 수 있는 방법
1. border 속성은 테이블의 테두리를 설정해주는 속성입니다. ex (border="1") 숫자가 높을수록 테두리가 두꺼워집니다.
2. bordercolor는 테두리의 색상을 지정하는 속성입니다. ex(bordercolor="blue") default값은 검정색입니다.
3. width와 height는 테이블의 크기를 결정해주는 속성입니다. ex(width=50px width=100%)픽셀단위로 크기,비율로 줄 수 있습니다.
4. align은 테이블안에있는 값들을 정렬시키는 기능을 합니다.
5. bgcolor속성으로 원하는 태그의 배경색을 지정해줄 수 있습니다.
6. colspan, rowspan은 셀을 합병(행/열)시키는 기능을 합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<table border="1" bordercolor="blue" width ="500" height="300" align = "center" >
<tr bgcolor="blue" align ="center">
<p><td colspan = "3" span style="color:white">오늘의 수입/지출</td></p>
</tr>
<tr align = "center" bgcolor="skybule">
<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>
<tr>
<td rowspan="3" align = "center" bgcolor="skyblue">총계</td>
<td>수입</td>
<td>지출</td>
</tr>
<tr>
<td>1,000,000</td>
<td>35,000</td>
</tr>
<tr>
<td>남은돈</td>
<td>965,000</td>
</tr>
</table>
</body>
</html>
<th> 테이블의 헤더부분을 만드는 태그
<tr> 테이블의 행을 만드는 태그
<td> 테이블의 열을 만드는 태그
테이블을 만드는 순서는 제일 바깥쪽에는 <table></table>태그가 들어가고 가장 위에는 <th>라는 테이블 헤더 태그를 사용한다. Default값은 굵은 글씨체에 가운데 정렬이다. 이 태그는 안쓰는 사람이 훨씬 많다. (대부분 <tr>태그를 활용하여 테이블 헤더를 만든다. 그 다음은 행을 만드는 태그 <tr>태그가 들어간다. 그리고 <tr>태그 안에는 열을 만드는 속성<td>태그가 들어간다.
<!DOCTYPE html PUBLIC>
<html>
<head>
<meta charset="EUC-KR">
<title>초간단 테이블</title>
</head>
<body>
<table border="1">
<th>테이블</th>
<th>만들기</th>
<tr><!-- 첫번째 줄 시작 -->
<td>첫번째 칸</td>
<td>두번째 칸</td>
</tr><!-- 첫번째 줄 끝 -->
<tr><!-- 두번째 줄 시작 -->
<td>첫번째 칸</td>
<td>두번째 칸</td>
</tr><!-- 두번째 줄 끝 -->
</table>
</body>
</html>
테이블 디자인 변경
border 테이블의 테두리
bordercolor 테이블의 테두리 색상
width 테이블 가로 크기
height 테이블 세로 크기
align 정렬
bgcolor 배경색
colspan 가로 합병(열 합병)
rowspan 세로 합병(행 합병)
테이블의 디자인을 바꿀 수 있는 방법
1. border 속성은 테이블의 테두리를 설정해주는 속성입니다. ex (border="1") 숫자가 높을수록 테두리가 두꺼워집니다.
2. bordercolor는 테두리의 색상을 지정하는 속성입니다. ex(bordercolor="blue") default값은 검정색입니다.
3. width와 height는 테이블의 크기를 결정해주는 속성입니다. ex(width=50px width=100%)픽셀단위로 크기,비율로 줄 수 있습니다.
4. align은 테이블안에있는 값들을 정렬시키는 기능을 합니다.
5. bgcolor속성으로 원하는 태그의 배경색을 지정해줄 수 있습니다.
6. colspan, rowspan은 셀을 합병(행/열)시키는 기능을 합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<table border="1" bordercolor="blue" width ="500" height="300" align = "center" >
<tr bgcolor="blue" align ="center">
<p><td colspan = "3" span style="color:white">오늘의 수입/지출</td></p>
</tr>
<tr align = "center" bgcolor="skybule">
<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>
<tr>
<td rowspan="3" align = "center" bgcolor="skyblue">총계</td>
<td>수입</td>
<td>지출</td>
</tr>
<tr>
<td>1,000,000</td>
<td>35,000</td>
</tr>
<tr>
<td>남은돈</td>
<td>965,000</td>
</tr>
</table>
</body>
</html>
- 이전글div 태그 사용법 & 예제 24.02.27
- 다음글[Html] Span 태그 사용법 & 예제 24.02.27
댓글목록
등록된 댓글이 없습니다.
