brograming
테이블 <table> 본문
<table> </table> : 표를 만드는 태그
표를 만들거나, 홈페이지의 전체 구성(layout)을 만드는 데 사용
홈페이지 전체 구성이나 배치를 위해선 <div>태그를 사용하는 것이 좋다
1. 테이블 만들기
<th></th> : header cell. 표의 제목을 쓰는 역할 (기본값은 굵은 글씨, 중앙 정렬)
<tr></tr> : table row. 가로줄을 만드는 역할(기본값은 보통 글씨체. 왼쪽 정렬)
<td></td> : table data. 셀을 만드는 역할(기본값은 보통 글씨체. 왼쪽 정렬)
<caption></caption> : 테이블에 캡션(테이블이나 사진, 삽화 등에 붙이는 설명)을 추가. 테이블요소는 단 하나의 <caption>을 명시.
<caption>요소는 <table>요소 바로 다음에 위치해야 한다.(테이블 바로 위에 위치. 가운데 정렬)
css의 text-align이나 caption-sid속성을 사용하여 캡션의 위치나 정렬 방법 등을 변경 가능
2. 테이블 디자인 변경
colspan : column span. 셀(가로줄) 합치기
rowspan : row span. 셀(세로줄)합치기
border : 테이블 굵기 설정. 설정하지 않으면 테두리가 보이지 않음
width : 테이블 너비 설정 (px이나 %로 크기, 비율 변경 가능)
height : 테이블 높이 설정 (px이나 %로 크기, 비율 변경 가능)
cellpadding : 셀과 글자 사이의 여백
cellspacing : 셀과 셀 사이의 여백
align : 셀의 내용을 left / center / right 정렬 (align = "right")
valign :셀의 내용을 top / middle / bottom 정렬 (valign = "top")
■ 테이블 만들기
<table border = "1" style = "width:200px; height:100px">
<caption>테이블 예제</caption>
<tr>
<th>번호</th><th>이름</th><th>요일</th>
</tr>
<tr>
<td> 1</td><td>아무개</td><td>금요일</td>
</tr>
<tr>
<td>2</td><td>아무나</td><td>목요일</td><br/>
</tr>
</table>
■ colspan
<table border = "1" style = "width:100px; height:100px;">
<caption>colspan</caption>
<tr><td colspan = "2">1</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td colspan ="3">9</td></tr><br/>
</table>
■ rowspan
<table border = "1" style = "width:100px; height:100px">
<caption>rowspan</caption>
<tr><td rowspan = "2">1</td><td>2</td><td rowspan ="3">3</td></tr>
<tr><td>5</td></tr>
<tr><td>7</td><td>8</td></tr><br/>
</table>
■ cellpadding과 cellspacing비교를 위한 기본 테이블
<table border = "1">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr><br/>
</table>
■ cellpadding
<table border = "1" cellpadding = "20px">
<caption>cellpadding</caption>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr><br/>
</table>
■ cellspacing
<table border = "1" cellspacing = "20px">
<caption>cellspacing</caption>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr><br/>
</table>
■ align, valign
<table border = "1" b = "blue" style = "width:300px; height:300px;">
<caption>align(가로위치), valign(세로위치)</caption>
<tr>
<th>번호</th><th>이름</th><th>요일</th>
</tr>
<tr>
<td> 1</td><td align = "right">아무개</td><td>금요일</td>
</tr>
<tr>
<td>2</td><td>아무나</td><td valign = "top">목요일</td><br/>
</tr>
</table>
■ bgcolor, bordercolor
<table border = "1" bgcolor = "yellow" bordercolor="red" style = "width:100px; height:100px">
<caption>bgcolor, bordercolor</caption>
<tr><td colspan = "2">1</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td colspan ="3">9</td></tr><br/>
</table>
■ 셀 모서리 둥글게
<style>
#a{
border-top-left-radius : 15px;
border-top-right-radius : 15px;
border-bottom-left-radius : 15px;
border-bottom-right-radius : 15px;
}
</style><table border = "1" bgcolor = "yellow" bordercolor="red" style = "width:100px; height:100px">
<caption>모서리둥글게</caption>
<tr><td id = "a" colspan = "2">1</td><td>3</td></tr>
<tr><td>4</td><td id = "a">5</td><td>6</td></tr>
<tr><td id = "a" colspan ="3">9</td></tr><br/>
</table>
■ <style> td{ 설정값(모든 td태그에 설정값을 반영한다) } </style>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type = "text/css">
👉td{width:100px; height:100px; text-align:center;}
</style>
</head>
<body>
<h3>css로 크기설정 / 글씨 정렬</h3>
<table border="1">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
</table>
</body>
</html>
'[HTML, CSS]' 카테고리의 다른 글
| 테이블 테두리 (0) | 2023.03.25 |
|---|
