투케이2K

102. (html/css/javascript/jquery) table colgroup 태그 사용해 하나 이상의 열 (세로) 그룹 속성 지정 실시 본문

FrontEnd

102. (html/css/javascript/jquery) table colgroup 태그 사용해 하나 이상의 열 (세로) 그룹 속성 지정 실시

투케이2K 2022. 12. 1. 12:53

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : html, css, js, jquery

​

 

[소스 코드]

​

<!DOCTYPE HTML>
<html lang="ko">
<head>
	<title>javaScriptTest</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">



	<!-- 반응형 구조 만들기 -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">



	<!-- 내부 CSS 스타일 지정 -->
	<style>

        /* [테이블 테두리 스타일 속성 설정] */
        table, th, td {
            border: 1px solid black;
        }
        
    </style>





    <!-- [내부 자바스크립트 J쿼리 이벤트 지정] -->
    <script>

        // [html 최초 로드 및 이벤트 상시 대기 실시] 
        window.onload = function() {
            console.log("");
            console.log("=========================================");
            console.log("[window onload] : [start]");
            console.log("=========================================");
            console.log(""); 
        };

    </script>

</head>





<body>

    <!-- 
    -----------------------------------------    
    [요약 설명]
    -----------------------------------------
    1. <colgroup> 태그는 테이블에서 서식 지정을 위해 하나 이상의 열 (세로) 을 그룹으로 묶을 때 사용합니다
    -----------------------------------------
    2. 본 예시 에서는 colgroup span="2" 로 학번 과 이름 (열) 값을 설정 합니다
    -----------------------------------------
     -->
    
    
    <!-- [테이블 생성 실시] -->
    <table>
        <colgroup span="2" style="background-color: lightpink"></colgroup>
        <tr>
            <th>학번</th>
            <th>이름</th>
            <th>학과</th>
        </tr>
        <tr>
            <td>20001</td>
            <td>홍길동</td>
            <td>전자공학과</td>
        </tr>
        <tr>
            <td>20002</td>
            <td>투케이</td>
            <td>컴퓨터공학과</td>
        </tr>
    </table>

</body>

</html>
 

[결과 출력]

​

 
 
 
반응형
저작자표시

'FrontEnd' 카테고리의 다른 글

104. (html/css/javascript/jquery) img 이미지 태그 onerror 사용해 에러 발생 대체 이미지 표시 설정  (0) 2023.08.13
103. (html/css/javascript/jquery) object-fit 사용해 css img 이미지 태그 사이즈 조절 수행  (0) 2023.08.13
101. (html/css/javascript/jquery) em 태그 사용해 강조된 텍스트 표현 실시  (0) 2022.08.22
100. (html/css/javascript/jquery) label 태그 사용해 사용자 인터페이스(UI) 컴포넌트 라벨(label) 정의 실시  (0) 2022.08.21
99. (html/css/javascript/jquery) kbd 태그 사용해 키보드 문구 표시 수행 실시  (0) 2022.08.21
'FrontEnd' Related Articles more
Comments