비주얼스튜디오 코드(Visual Studio Code)의 TABLE :: 개발자첫걸음 |
您所在的位置：网站首页 › tr、td、th › 비주얼스튜디오 코드(Visual Studio Code)의 TABLE :: 개발자첫걸음 |
비주얼스튜디오 코드(Visual Studio Code)의 TABLE :: 개발자첫걸음
|
※ 태그는 데이터를 포함하는 셀(cell)들의 행과 열로 구성된 2차원 테이블을 정의합니다. 테이블은 요소와 자식 요소인 하나 이상의 , , 요소들로 구성됩니다. 요소는 테이블의 각 행(row), 요소는 각 열의 제목, 요소는 하나의 테이블 셀(cell)을 정의합니다. 또한, , , , , , 과 같은 요소들을 사용하여 좀 더 복잡한 테이블을 정의할 수도 있습니다. 목차1. 속성 2. 기본 구조 1. 속성@속성명 속성값설명 table table전체를 감싸는 태그 caption table의 제목이나 설명을 작성하는 태그. 테이블 가로폭의 가운데 오는 것이 기본 tr 테이블의 행을 의미하는 태그. 자손으로 th나 td가 반드시 있어야 한다. th 테이블의 제목 셀(칸)을 의미하는 태그. 부모인 tr안에 있어야 한다.css기본값은 글자가 굵게 처리되고 셀에서 가로 가운데 정렬. td 테이블의 일반 셀(칸)을 의미하는 태그. 부모인 tr안에 있어야 한다.css기본값: 왼쪽정렬align leftcenterright 주변 텍스트에 따른 테이블의 정렬 방법을 명시함. background-colorbgcolor rgb(x,x,x)#xxxxxx색상명 테이블의 배경색을 명시함. border 10 테이블의 레이아웃 용도로 사용되는 테두리를 사용할지 않을지를 명시함. cellpadding 픽셀 셀(cell)에서 콘텐츠와 셀 경계 사이의 공간을 명시함. cellspacing 픽셀 셀(cell)과 셀 사이의 공간을 명시함. frame voidabovebelowhsideslhsrhsvsidesboxborder 테이블에서 보이는 바깥쪽 테두리 부분을 명시함. rules nonegroupsrowscolsall 테이블에서 보이는 안쪽 테두리 부분을 명시함. summary 텍스트 테이블 콘텐츠의 개요를 명시함. width 픽셀% 테이블의 너비를 명시함. colspan 같은 행의 칸들을 병합할 때 사용. ex) rowspan 다른 행의 칸들을 병합할 때 사용. ex) colgroup 열을 그룹으로 묶을 수 있도록 해주는 태그 col colgroup의 자손으로 열단위를 나눌 수 있다.span속성을 사용하여 몇 열을 그룹으로 묶을지 설정ex) => 3열을 그룹으로 묶음 2. 기본 구조 @코드로 보기 DOCTYPE html> board table { border: 1px solid black;/* 표 테두리 (1px의 굵기 / 실선 / 검정색 )*/ border-collapse: collapse;/*테두리 1줄만 표시*/ } th, td { border: 1px solid black; padding: 10px;/*셀 안쪽의 여백(패딩)*/ text-align: center;/*가운데 정렬*/ font-size: 10px;/*폰트 사이즈*/ } th { background-color: gray;/*th 열만 배경색 지정*/ } 테이블 만들기 제목1 제목2 제목3 내용1 내용2 내용3 내용4 내용5 내용6
@결과
위에 같이 기본적으로는 탭 내에 테이블에 대한 기본 속성 값을 지정하여 주고 , 탭에서는 테이블의 구조와 내용만 작성하는 형식을 주로 사용하며 '내용 6' 셀과 같이 인라인 스타일로 직접 속성값을 지정하여 주는 방식도 있습니다. CSS파일로 속성 값들을 따로 관리하는 방법은 나중에 따로 정리하도록 하겠습니다. 탭의 속성값들은 '1. 속성'에 정리해 놓은 속성 값 외에도 폰트사이즈나 컬러 등 기본적인 속성 값들도 지정하고 셀 내용은 텍스트뿐만 아니라 이미지나 링크 등도 삽입하여 사용할 수 있습니다. |
【本文地址】
今日新闻 |
推荐新闻 |