어디에서나 바로가기 기능을 사용하실 수 있습니다. 주메뉴 이동은 알트 키 플러스 1 키이고, 부메뉴 이동은 알트 키 플러스 2 키이고, 본문 이동은 알트 키 플러스 3 키입니다. 알트 키 플러스 J 키는 일반모드와 텍스트모드로 전환합니다.

현재위치
  1. HOME
  2. >배우기
  3. > 스타일시트(CSS)

본문 영역

테이블(표) 상세보기

작성자: 관리자 추천: 0  조회: 3595

테이블


테이블 구조


<table summary="표 요약글입니다." class="table-1"> <caption>표 제목</caption> <thead> <tr class="head"> <th scope="col">타이틀</th> <th scope="col">타이틀</th> <th scope="col">타이틀</th> <th scope="col">타이틀</th> <th scope="col">타이틀</th> </tr> </thead> <tbody> <tr> <th scope="row" class="featured">내용</th> <td>내용</td> <td>내용</td> <td>내용</td> <td>내용</td> </tr> <tr> <th scope="row" class="featured">내용</th> <td>내용</td> <td>내용</td> <td>내용</td> <td>내용</td> </tr> </tbody> <tfoot> <tr class="foot"> <th scope="row">내용</th> <td>내용</td> <td>내용</td> <td>내용</td> <td>내용</td> </tr> </tfoot> </table>

table-1


표 제목
구분 단위 금액 구매여부 기타
사무실 임대 전월세 30,000,000 임대완료 자기투자금
책상/의자 등 각종가구 3,200,000 구매완료 자기투자금
컴퓨터 3대 2,400,000 구매완료 자기투자금
간판 1,000,000 미구입 부족투자금
초기 홍보비(3~4월) 6만원*22일*1명 1,320,000 미구입 부족투자금
37,920,000

[클래스명 table-1 테이블] 예제소스보기


table-2


표 제목
구분 단위 금액 구매여부 기타
사무실 임대 전월세 30,000,000 임대완료 자기투자금
책상/의자 등 각종가구 3,200,000 구매완료 자기투자금
컴퓨터 3대 2,400,000 구매완료 자기투자금
간판 1,000,000 미구입 부족투자금
초기 홍보비(3~4월) 6만원*22일*1명 1,320,000 미구입 부족투자금
37,920,000

[클래스명 table-2 테이블] 예제소스보기


table-3


표 제목
구분 단위 금액 구매여부 기타
사무실 임대 전월세 30,000,000 임대완료 자기투자금
책상/의자 등 각종가구 3,200,000 구매완료 자기투자금
컴퓨터 3대 2,400,000 구매완료 자기투자금
간판 1,000,000 미구입 부족투자금
초기 홍보비(3~4월) 6만원*22일*1명 1,320,000 미구입 부족투자금
37,920,000

[클래스명 table-3 테이블] 예제소스보기


table-4


표 제목
구분 단위 금액 구매여부 기타
사무실 임대 전월세 30,000,000 임대완료 자기투자금
책상/의자 등 각종가구 3,200,000 구매완료 자기투자금
컴퓨터 3대 2,400,000 구매완료 자기투자금
간판 1,000,000 미구입 부족투자금
초기 홍보비(3~4월) 6만원*22일*1명 1,320,000 미구입 부족투자금
37,920,000

[클래스명 table-4 테이블] 예제소스보기


테이블 테두리 색상 변경하기


.table-border-color1 table tr th, .table-border-color1 table tr td{border-color:#303030} .table-border-color2 table tr th, .table-border-color2 table tr td{border-color:#333} .table-border-color3 table tr th, .table-border-color3 table tr td{border-color:#999} .table-border-color4 table tr th, .table-border-color4 table tr td{border-color:#ddd}

표 제목
구분 단위 금액 구매여부 기타
사무실 임대 전월세 30,000,000 임대완료 자기투자금
책상/의자 등 각종가구 3,200,000 구매완료 자기투자금
컴퓨터 3대 2,400,000 구매완료 자기투자금
간판 1,000,000 미구입 부족투자금
초기 홍보비(3~4월) 6만원*22일*1명 1,320,000 미구입 부족투자금
37,920,000

[테이블 테두리 색상 변경] 예제소스보기


참고: table-3, table-4는 테두리 두께(border-width)를 변경하실 수 없습니다.

테이블 색상 입히기


표 제목
구분 단위 금액 구매여부 기타
사무실 임대 전월세 30,000,000 임대완료 자기투자금
책상/의자 등 각종가구 3,200,000 구매완료 자기투자금
컴퓨터 3대 2,400,000 구매완료 자기투자금
간판 1,000,000 미구입 부족투자금
초기 홍보비(3~4월) 6만원*22일*1명 1,320,000 미구입 부족투자금
37,920,000

[색상표를 이용한 색상 변경] 예제소스보기


바로쓰는 소스


2열형


표 제목
타이틀 타이틀
내용 내용
내용 내용
내용 내용

[바로복사해서 쓰는 2열형 테이블] 예제소스보기


3열형


표 제목
타이틀 타이틀 타이틀
내용 내용 내용
내용 내용 내용
내용 내용 내용

[바로복사해서 쓰는 3열형 테이블] 예제소스보기


4열형


표 제목
타이틀 타이틀 타이틀 타이틀
내용 내용 내용 내용
내용 내용 내용 내용
내용 내용 내용 내용

[바로복사해서 쓰는 4열형 테이블] 예제소스보기


5열형


표 제목
타이틀 타이틀 타이틀 타이틀 타이틀
내용 내용 내용 내용 내용
내용 내용 내용 내용 내용
내용 내용 내용 내용 내용

[바로복사해서 쓰는 5열형 테이블] 예제소스보기


6열형


표 제목
타이틀 타이틀 타이틀 타이틀 타이틀 타이틀
내용 내용 내용 내용 내용 내용
내용 내용 내용 내용 내용 내용
내용 내용 내용 내용 내용 내용

[바로복사해서 쓰는 6열형 테이블] 예제소스보기

TOP

등록일:
마지막 수정일:
답변
목록

스타일시트(CSS)

총글수: 12
스타일시트(CSS) 목록 : 이표는 글순서,첨부파일,제목,추천수,조회수,작성일을 확인할 수 있습니다
글순서NO *(첨부파일) 제목 추천 조회 작성일↑
12 없음 레이아웃 구조 추천:0 조회:5574
11 없음 색상표 추천:0 조회:5307
10 없음 버튼 추천:0 조회:8845
9 없음 하이라이트 추천:0 조회:4700
8 없음 인용구 추천:0 조회:3405
7 없음 현재글:테이블(표) 추천:0 조회:3595
6 없음 박스 리스트 추천:0 조회:3959
5 없음 텝박스 추천:0 조회:4168
4 없음 아이콘 추천:0 조회:6502
3 없음 반응형 기타 추천:0 조회:3473
초기화 
스타일시트(CSS) 검색