ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [HTML] Table
      VScode/HTML 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>

      'VScode > HTML' 카테고리의 다른 글

      [HTML] Semantec  (0) 2022.09.08
      [HTML] div, span, 특수기호  (0) 2022.09.08
      [HTML] List  (0) 2022.09.08
      [HTML] Marquee  (0) 2022.09.08
      [HTML] Anchor  (0) 2022.09.08

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바