행과 열의 방향이 헷갈려 쉽게 파악하고자 이미지화 시켰다.
기본 태그
| 01 |
<table> |
<table>~</table> |
표 전체 윤곽 잡기 - table 태그 내에서 표 만들기가 작성됨 |
| 02 |
<tr> |
<tr>~</tr> |
행(row) 만들기 |
| 03 |
<td> |
<td>~</td> |
각 행에 따른 셀(cell) 만들기 |
| 04 |
<th> |
<th>~</th> |
볼드체로 된 셀 만들기 - 제목으로 사용 할, 볼드체로 강조된 셀 만들기 |
▶04. <Th>
· 중앙정렬이 기본
· <td>, <tr>의 경우, align을 이용해 따로 지정하지 않는 이상 왼쪽정렬이 기본
표 전체에 대한 제목 만들기(어떤 표인지 나타내는 제목 만들기)
| 01 |
<caption> |
<caption>~</caption> |
|
| 02 |
<figcation> |
<figcation>~</figcation> |
|
▶예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자기소개표1</title>
</head>
<body>
<table border="3" bordercolor="green"
width="300" height="150" align=center>
<caption>
<strong>자기소개표</strong>
</caption>
<tr bgcolor="purple" align=center>
<td colspan="4" span style="color:white">자기소개</td>
</tr>
<tr>
<th>이름</th>
<td align=center>홍길동</td>
<th>메일</th>
<td></td>
</tr>
<tr>
<th>주소</th>
<td colspan="3" align=center>땡땡시 땡땡동</td>
</tr>
<tr>
<th rowspan="2" bgcolor="skyblue">메모</th>
<td colspan="3">개발자가 되자</td>
</tr>
<tr>
<td colspan="3">열심히 합시다</td>
</tr>
</table>
</body>
</html>
▶예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자기소개표2</title>
<style>
table {
border: 1px solid #222;
border-collapse: collapse;
width: 70%;
}
thead {
background: #eee;
}
th, td{
border: 1px solid #ccc;
padding: 5px;
font-size: 0.7em;
}
</style>
</head>
<body>
<table align=center>
<caption>
<strong>자기소개표</strong>
</caption>
<colgroup>
<col>
<col span="2" style="background-color:yellow;">
<col spna="3" style="background-color: gray;">
</colgroup>
<tr style="background-color: olive;" align=center>
<td colspan="4" span style="color:white">자기소개</td>
</tr>
<tr>
<th>이름</th>
<td align=center>홍길동</td>
<th>메일</th>
<td>gil@dong.com</td>
</tr>
<tr>
<th>주소</th>
<td colspan="3" align=center>땡땡시 땡땡동</td>
</tr>
<tr>
<th rowspan="2" style="background-color:darksalmon">메모</th>
<td colspan="3">개발자가 되자</td>
</tr>
<tr>
<td colspan="3">열심히 합시다</td>
</tr>
</table>
</body>
</html>
'gil@dong.com'이 들어간 부분은, 원래 공백으로 남기고자
<td></td>
를 적용시켰었다.
해당 칸에 적당한 여유가 있는 빈 공간을 나타내는 게 목적이었는데,
띄어쓰기가 어중간하게 적용된 것 같은 좁은 공간이 결과물로 나왔다.
원래 넉넉한 공백이 생겨야 하는 거 아닌가?
결과로 나온 모양새가 이상해 일단 'gil@dong.com'을 대신 넣었다.
나중에 다시 시도해봐야겠음.
위, 아래 예시의 차는 색상 적용, 테두리 굵기 같은 꾸미기에 있는데 아래쪽이 작업하기 더 편했다.
style을 이용하면 색상 리스트를 볼 수 있는데,
이를 통해 훨씬 더 풍부하고 쉽게 색을 적용시킬 수 있었음.
위쪽의 첫번째 예시의 경우, 색상 리스트가 따로 뜨지 않아 일일이 입력하느라 번거로웠다.
이 html태그들이 자바스크립트와 함께 달력 만들기에 쓰인다던데...
달마다 테이블 태그를 각각 작성해야 하는 건지,
아니면 자바스크립트를 이용해 움직일 것이므로 테이블 태그는 하나만 있어도 괜찮은 지는 아직 모르겠다.
+) 반드시 테이블 태그들을 이용해야만 하는 것은 아님!
배열을 이용할 수도 있고 다양한 방법으로 만들 수 있다.
