VScode/HTML
[HTML] Table
hvoon
2022. 9. 8. 13:34
Table tag : 테이블의 시작과 끝을 표시
-border: 테이블의 외곽선 굵기
-align: 브라우저 상에 표시할 표의 좌우 정렬
-cellpadding: 한칸(셀)의 안쪽 여백(글자와 셀 경계선과의 간격)
-cellspacing: 셀과 셀 사이의 간격
-bgcolor: 표의 배경색(테이블 관련 모든 태그는 최초 투명색임. bgcolor가 지정되면 그 색으로 변경됨)
Tr tag : 테이블 내 행의 시작과 끝을 표시
-height: 한 행의 세로 크기
-bgcolor: 행의 배경색, 각 행마다 다른 배경색을 지정할 수 있음. 지정하지 않으면 투명색
-align: 한 행에 적용할 각 열의 표시내용 정렬 방식
Td tag: tr tag 내부에서 각행의 칸(열)들의 시작과 끝을 표시함
-width: 한 열의 가로 크기, 각 열마다 별도 지정이 가능하지만 다른 행에 똑같이 적용됨
-bgcolor: 1열(1칸 1셀)의 배경색, 각 칸마다 다른 배경색을 지정할 수 있음. 지정하지 않으면 투명색
-align: 1열(1칸, 1셀)에 적용할 각 열의 표시내용 정렬 방식
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>15_Table.html</title>
</head>
<body>
<table width="500" align="center" cellpadding="5" cellspacing="1" bgcolor="blue">
<tr bgcolor="white" align="center" height="100">
<td width="100">1행 1열</td>
<td width="100">1행 2열</td>
<td width="100">1행 3열</td>
<td width="100">1행 4열</td>
<td width="100" align="right" bgcolor="yellow">1행 5열</td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td>2행 1열</td>
<td>2행 2열</td>
<td>2행 3열</td>
<td>2행 4열</td>
<td>2행 5열</td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td>3행 1열</td>
<td>3행 2열</td>
<td>3행 3열</td>
<td>3행 4열</td>
<td>3행 5열</td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td>4행 1열</td>
<td>4행 2열</td>
<td>4행 3열</td>
<td>4행 4열</td>
<td>4행 5열</td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td>5행 1열</td>
<td>5행 2열</td>
<td>5행 3열</td>
<td>5행 4열</td>
<td>5행 5열</td>
</tr>
</table>
</body>
</html>
셀을 합치는 방법
1. 합치고자 하는 셀들의 td 태그를 골라낸다.
2. 골라낸 셀 들중 가장 왼쪽, 가장 위에 있는 셀의 td 만 남기고 나머지 td를 삭제
3. 행으로 몇 개가 삭제되고, 열로 봤을 때 몇개의 열이 삭제 됐는지 파악한 후
4. 삭제된 행의 갯수+1만큼 남아 있는 셀의 속성으로 rowspan 값을 설정한다
5. 또한 삭제된 열의 갯수+1 만큼 남아 있는셀의 속성으로 colspan 값을 설정한다.
6. 삭제되지 않고 남아 있는 셀이 없어진 셀의 역할까지 한다는 의미의 속성값
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>16_Table02.html</title>
</head>
<body>
<table width="500" align="center" cellspacing="1" bgcolor="blue">
<tr bgcolor="white" align="center" height="100">
<td width="100" colspan="2" >1행 1열</td>
<td width="100">1행 3열</td>
<td width="100">1행 4열</td>
<td width="100">1행 5열</td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td colspan="3">2행 1열</td>
<td>2행 4열</td>
<td>2행 5열</td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td rowspan="3" >3행 1열</td>
<td>3행 2열</td>
<td>3행 3열</td>
<td>3행 4열</td>
<td>3행 5열</td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td>4행 2열</td>
<td>4행 3열</td>
<td colspan="2" rowspan="2">4행 4열</td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td>5행 2열</td>
<td>5행 3열</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table width="500" align="center" cellpadding="5" cellspacing="1"
bgcolor="blue">
<tr bgcolor="white" align="center" height="100">
<td width="100" colspan="2">1행 1열</td>
<td width="100">1행 3열</td>
<td width="100">1행 4열</td>
<td width="100" rowspan="2">1행 5열</td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td>2행 1열</td>
<td colspan="3" rowspan="3">2행 2열</td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td>3행 1열</td>
<td>3행 5열</td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td rowspan="2">4행 1열</td>
<td>4행 5열</td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td>5행 2열</td>
<td>5행 3열</td>
<td colspan="2">5행 4열</td>
</tr>
</table>
<br /><br />
<table width="500" align="center" cellpadding="5" cellspacing="1"
bgcolor="blue">
<tr bgcolor="white" align="center" height="100">
<td width="100">1행 1열</td>
<td width="100">1행 2열</td>
<td width="100">1행 3열</td>
<td width="100">1행 4열</td>
<td width="100" rowspan="5">1행 5열</td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td>2행 1열</td>
<td>2행 2열</td>
<td>2행 3열</td>
<td rowspan="4">2행 4열</td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td>3행 1열</td>
<td>3행 2열</td>
<td rowspan="3">3행 3열</td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td>4행 1열</td>
<td rowspan="2">4행 2열</td>
</tr>
<tr bgcolor="white" align="center" height="100">
<td>5행 1열</td>
</tr>
</table>
</body>
</html>