ABOUT ME

    -
    • HTML - 테이블(table) 태그
      프로그래밍/HTML & CSS 2021. 9. 14.
      반응형

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h3>table 태그</h3>

<p>tr:행수, td:열수를 나타내며 tr 태그 안의 td수는 동일해야 함</p>
<table>
	<tr>
		<td>A</td>
		<td>B</td>
	</tr>
	<tr>
		<td>C</td>
		<td>D</td>
	</tr>
	<tr>
		<td>E</td>
		<td>F</td>
	</tr>
</table>
<hr>

<table border="1" style="width: 300px;">
	<tr>
		<td>A</td>
		<td>B</td>
		<td>C</td>
	</tr>
	<tr>
		<td>D</td>
		<td>E</td>
		<td>F</td>
	</tr>
</table>
<hr>

<table border="1" style="width: 300px;">
	<tr>
		<td width="80">A</td>
		<td width="80">B</td>
		<td>C</td>
	</tr>
	<tr>
		<td>D</td>
		<td>E</td>
		<td>F</td>
	</tr>
</table>
<hr>

<table border="1" style="width: 300px; border-collapse: collapse; margin: 20px auto;">
	<tr>
		<td width="100">A</td>
		<td width="100">B</td>
		<td width="100">C</td>
	</tr>
	<tr>
		<td>D</td>
		<td>E</td>
		<td>F</td>
	</tr>
</table>
<hr>

<table style="width:400px;" border="1">
<tr>
	<td>A</td>
	<td>B</td>
	<td>C</td>
	<td>D</td>
</tr>
<tr>
	<td>E</td>
	<td colspan="2">F</td>
	<td>G</td>
</tr>
<tr>
	<td>H</td>
	<td colspan="3">I</td>
</tr>
</table>
<hr>

<table border="1" style="width: 400px;">
<tr>
	<td>A</td>
	<td>B</td>
	<td>C</td>
	<td>D</td>
</tr>
<tr>
	<td>E</td>
	<td rowspan="2">F</td>
	<td>G</td>
	<td>H</td>
</tr>
<tr>
	<td>I</td>
	<td colspan="2">J</td>
</tr>
</table>

</body>
</html>

       

      - table 태그 = 말 그대로 테이블 표를 만드는 태그

      - tr = 행 한줄 두줄 세줄 이런식으로 줄이 점점 늘어남

      - td = 열 행에 따라서 열이 가로로 죽 늘어남

      - tr이 있어야 td를 만들 수 있음

      tr 3개 만들면 3행 td 2개면 2열

      3행 2열

       

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<table style="width: 500px; margin: 10px auto; border-collapse: collapse;" border="1">
<thead>
	<tr height="30" bgcolor="#e4e4e4">
		<th width="100">이름</th>
		<th>생년월일</th>
		<th width="90">국어</th>
		<th width="90">영어</th>
		<th width="90">수학</th>
	</tr>
</thead>
<tbody>
	<tr height="30" align="center">
		<td>홍길동</td>
		<td>2000-10-10</td>
		<td>90</td>		
		<td>90</td>		
		<td>90</td>		
	</tr>
	<tr height="30" align="center">
		<td>김자바</td>
		<td>2000-10-10</td>
		<td>90</td>		
		<td>90</td>		
		<td>90</td>		
	</tr>
	<tr height="30" align="center">
		<td>스프링</td>
		<td>2000-10-10</td>
		<td>90</td>		
		<td>90</td>		
		<td>90</td>		
	</tr>
</tbody>
<tfoot>
	<tr height="30" align="center">
		<td colspan="2">평균</td>
		<td>90</td>
		<td>90</td>
		<td>90</td>
	</tr>
</tfoot>
</table>
<hr>

<table border="1"
  style="width: 500px; margin: 10px auto; border-collapse: collapse;">
	<caption>계산서</caption>
  	
	<tr height="30" align="center" bgcolor="#e4e4e4">
		<td rowspan="2">책이름</td>
		<td rowspan="2">수량</td>
		<td colspan="2">단가</td>
		<td rowspan="2">가격</td>
	</tr>
	<tr height="30" align="center" bgcolor="#e4e4e4">
		<td>정가</td>
		<td>세일가</td>
	</tr>
	
	<tr height="30" align="center">
		<td>HTML</td>
		<td>10</td>
		<td>10,000</td>
		<td>8,000</td>
		<td>80,000</td>
	</tr>
	<tr height="30" align="center">
		<td>CSS</td>
		<td>5</td>
		<td>9,000</td>
		<td>-</td>
		<td>45,000</td>
	</tr>
	<tr height="30" align="center" bgcolor="#e4e4e4">
		<td>합계</td>
		<td colspan="4">125,000</td>
	</tr>
</table>
<hr>

<table border="1"
  style="width: 500px; margin: 10px auto; border-collapse: collapse;">
	<tr height="30" align="center">
		<td rowspan="2">A</td>
		<td colspan="3">B</td>
		<td>C</td>
	</tr>
	<tr height="30" align="center">
		<td>D</td>
		<td>E</td>
		<td>F</td>
		<td>G</td>
	</tr>
	<tr height="30" align="center">
		<td>H</td>
		<td>I</td>
		<td>J</td>
		<td rowspan="3">K</td>
		<td>L</td>
	</tr>
	<tr height="30" align="center">
		<td>M</td>
		<td>N</td>
		<td>O</td>
		<td>P</td>
	</tr>
	<tr height="30" align="center">
		<td rowspan="2" colspan="2">Q</td>
		<td>R</td>
		<td>S</td>
	</tr>
	<tr height="30" align="center">
		<td>T</td>
		<td>U</td>
		<td>V</td>
	</tr>
</table>

</body>
</html>

       

      - 테이블 끼리 행이나 열을 합치기 위해서는 cols를 사용해야함

      - 행을 합칠때(가로로 합침) = colspan="2" 숫자가 2면 2칸을 합친다는 뜻

      - 열을 합칠때(세로로 합침) = rowspan="2" 마찬가지로 숫자가 2면 열 2칸을 합친다

       

      - border-collapse: collapse; 이건 테두리를 한선으로 표시하는건데 사진으로 보면 차이를 알 수 있다.

      collapse 옵션 없음

       

      collapse 옵션 있음

      - align=center는 텍스트 얼리진과 마차간가지 개념인데 이건 지금 tr쪽에 붙어있으니까

      그 밑에 td로 전부 영향을 준다.

       

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h3>table 태그</h3>

<table border="1" style="width: 400px; margin: 20px auto;">
	<caption>성적처리</caption>
	<col style="background: #eee;">
	<col span="3" style="background: palegreen;">
	<tr>
		<td>이름</td>
		<td>국어</td>
		<td>영어</td>
		<td>수학</td>
	</tr>
	<tr>
		<td>홍길동</td>
		<td>100</td>
		<td>100</td>
		<td>100</td>
	</tr>
	<tr>
		<td>김자바</td>
		<td>100</td>
		<td>100</td>
		<td>100</td>
	</tr>
</table>
<hr>

<table border="1" style="width: 400px; margin: 20px auto;">
	<caption>성적처리</caption>
	
	<colgroup>
		<col width="40%">
		<col width="20%">
		<col width="20%">
		<col width="20%">
	</colgroup>
	
	<tr>
		<td>이름</td>
		<td>국어</td>
		<td>영어</td>
		<td>수학</td>
	</tr>
	<tr>
		<td>홍길동</td>
		<td>100</td>
		<td>100</td>
		<td>100</td>
	</tr>
	<tr>
		<td>김자바</td>
		<td>100</td>
		<td>100</td>
		<td>100</td>
	</tr>
</table>
<br>

</body>
</html>

       

      - caption : 테이블 이름 설정

       

      - colgroup 을 사용해서 그룹화가 가능하다.

      지금 보면 colgroup 태그 안에 col이 4개가 있는데 이건 순서 따라간다.

      즉 colgroup 밑으로 있는 tr들 전부 그룹화에 영향을 받는다.

      colgroup의 width 폭이 40%, 20%, 20%, 20% 순서니까 밑에 td들이 이 순서대로 영향을 받는다.

       

      <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
.score {
	width: 400px;
	margin: 20px auto;
	background: blue;
	border-spacing: 10px;
}
.score tr {
	height: 30px;
	text-align: center;
}
.score th, .score td {
	background: #fff;
	border: 1px solid #ccc;
}


.score2 {
	width: 400px;
	border-spacing: 0;
	border-collapse: collapse;  /* tr도 border가 적용됨 */
}
.score2 tr {
	height: 30px;
	text-align: center;
	border-bottom: 1px solid #777; 
}

.score2 tr:first-child {
	border-top: 2px solid #777; 
}

.score2 tr:hover {
	background: yellow;
}

</style>

</head>
<body>

<table class="score">
	<tr>
		<th>이름</th>
		<th>국어</th>
		<th>영어</th>
		<th>수학</th>
	</tr>
	<tr>
		<td>김자바</td>
		<td>100</td>
		<td>100</td>
		<td>100</td>
	</tr>
	<tr>
		<td>다자바</td>
		<td>100</td>
		<td>100</td>
		<td>100</td>
	</tr>
</table>
<hr>

<table class="score2">
	<tr>
		<th>이름</th>
		<th>국어</th>
		<th>영어</th>
		<th>수학</th>
	</tr>
	<tr>
		<td>김자바</td>
		<td>100</td>
		<td>100</td>
		<td>100</td>
	</tr>
	<tr>
		<td>다자바</td>
		<td>100</td>
		<td>100</td>
		<td>100</td>
	</tr>
</table>


</body>
</html>

       

       

       

      - 클래스를 통해서 속성을 줄때 .score tr 이런식으로도 가능하다.

      무슨말이냐면 테이블 태그에 score를 주면 그 테이블 태그에서 사용중인 tr에만 따로 속성을 주는게 가능 하다는 거다.

       

      .score2 tr:hover {
      background: yellow;
      }

       

      이런 문구가 있는데 hover는 간단히 말하자면

      마우스를 올렸을때 나타나는 이벤트 이다.

      지금 백그라운드 색상에 노랑을 줬으니까

       

      이런식으로 tr 영역 어디든 마우스를 올리면 노랗게 배경색이 바뀐다.

       

       

      .score2 tr:first-child {
      border-top: 2px solid #777;
      }

      이 소스의 의미는 여러 tr중에서 첫번째 한테만 적용한다는 뜻

      그리고 보더 탑에 2px정도의 #777색깔의 박스를 주겠다는 의미임

       

      속성 적용 전

       

      속성 적용 후

       

       

      반응형
      저작자표시

      '프로그래밍 > HTML & CSS' 카테고리의 다른 글

      HTML - links 관련 태그 / iframe / 이미지,동영상  (0) 2021.09.16
      HTML - 리스트 관련 태그 (1)  (0) 2021.09.14
      HTML - 레이아웃 / 시멘틱 태그  (0) 2021.09.14
      HTML 선택자 / CSS 개요  (0) 2021.09.13
      HTML 기본 태그  (0) 2021.09.13

      관련글 관련글 더보기

      댓글

    Copyright 2021. qkqajfl007@naver.com. All rights reserved.

    티스토리툴바