어디에서나 바로가기 기능을 사용하실 수 있습니다. 주메뉴 이동은 알트 키 플러스 1 키이고, 부메뉴 이동은 알트 키 플러스 2 키이고, 본문 이동은 알트 키 플러스 3 키입니다. 알트 키 플러스 J 키는 일반모드와 텍스트모드로 전환합니다.
본문 바로가기주메뉴 바로가기부메뉴 바로가기
현재위치
- HOME
- >배우기
- > 스타일시트(CSS)
본문 영역
테이블(표) 상세보기
<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>
표 제목
| 구분 |
단위 |
금액 |
구매여부 |
기타 |
| 사무실 임대 |
전월세 |
30,000,000 |
임대완료 |
자기투자금 |
| 책상/의자 등 각종가구 |
|
3,200,000 |
구매완료 |
자기투자금 |
| 컴퓨터 3대 |
|
2,400,000 |
구매완료 |
자기투자금 |
| 간판 |
|
1,000,000 |
미구입 |
부족투자금 |
| 초기 홍보비(3~4월) |
6만원*22일*1명 |
1,320,000 |
미구입 |
부족투자금 |
<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 left">사무실 임대</th>
<td class="center">전월세</td>
<td class="right">30,000,000</td>
<td class="center">임대완료</td>
<td class="center">자기투자금</td>
</tr>
<tr>
<th scope="row" class="featured left">책상/의자 등 각종가구</th>
<td class="center"></td>
<td class="right">3,200,000</td>
<td class="center">구매완료</td>
<td class="center">자기투자금</td>
</tr>
<tr>
<th scope="row" class="featured left">컴퓨터 3대</th>
<td class="center"></td>
<td class="right">2,400,000</td>
<td class="center">구매완료</td>
<td class="center">자기투자금</td>
</tr>
<tr>
<th scope="row" class="featured left">간판</th>
<td class="center"></td>
<td class="right">1,000,000</td>
<td class="center">미구입</td>
<td class="center">부족투자금</td>
</tr>
<tr>
<th scope="row" class="featured left">초기 홍보비(3~4월)</th>
<td class="center">6만원*22일*1명</td>
<td class="right">1,320,000</td>
<td class="center">미구입</td>
<td class="center">부족투자금</td>
</tr>
</tbody>
<tfoot>
<tr class="foot">
<th scope="row"></th>
<td></td>
<td class="right">37,920,000</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 |
미구입 |
부족투자금 |
<table summary="표 요약글입니다." class="table-2">
<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 left">사무실 임대</th>
<td class="center">전월세</td>
<td class="right">30,000,000</td>
<td class="center">임대완료</td>
<td class="center">자기투자금</td>
</tr>
<tr>
<th scope="row" class="featured left">책상/의자 등 각종가구</th>
<td class="center"></td>
<td class="right">3,200,000</td>
<td class="center">구매완료</td>
<td class="center">자기투자금</td>
</tr>
<tr>
<th scope="row" class="featured left">컴퓨터 3대</th>
<td class="center"></td>
<td class="right">2,400,000</td>
<td class="center">구매완료</td>
<td class="center">자기투자금</td>
</tr>
<tr>
<th scope="row" class="featured left">간판</th>
<td class="center"></td>
<td class="right">1,000,000</td>
<td class="center">미구입</td>
<td class="center">부족투자금</td>
</tr>
<tr>
<th scope="row" class="featured left">초기 홍보비(3~4월)</th>
<td class="center">6만원*22일*1명</td>
<td class="right">1,320,000</td>
<td class="center">미구입</td>
<td class="center">부족투자금</td>
</tr>
</tbody>
<tfoot>
<tr class="foot">
<th scope="row"></th>
<td></td>
<td class="right">37,920,000</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
[클래스명 table-2 테이블] 예제소스보기
표 제목
| 구분 |
단위 |
금액 |
구매여부 |
기타 |
| 사무실 임대 |
전월세 |
30,000,000 |
임대완료 |
자기투자금 |
| 책상/의자 등 각종가구 |
|
3,200,000 |
구매완료 |
자기투자금 |
| 컴퓨터 3대 |
|
2,400,000 |
구매완료 |
자기투자금 |
| 간판 |
|
1,000,000 |
미구입 |
부족투자금 |
| 초기 홍보비(3~4월) |
6만원*22일*1명 |
1,320,000 |
미구입 |
부족투자금 |
<table summary="표 요약글입니다." class="table-3">
<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 left">사무실 임대</th>
<td class="center">전월세</td>
<td class="right">30,000,000</td>
<td class="center">임대완료</td>
<td class="center">자기투자금</td>
</tr>
<tr>
<th scope="row" class="featured left">책상/의자 등 각종가구</th>
<td class="center"></td>
<td class="right">3,200,000</td>
<td class="center">구매완료</td>
<td class="center">자기투자금</td>
</tr>
<tr>
<th scope="row" class="featured left">컴퓨터 3대</th>
<td class="center"></td>
<td class="right">2,400,000</td>
<td class="center">구매완료</td>
<td class="center">자기투자금</td>
</tr>
<tr>
<th scope="row" class="featured left">간판</th>
<td class="center"></td>
<td class="right">1,000,000</td>
<td class="center">미구입</td>
<td class="center">부족투자금</td>
</tr>
<tr>
<th scope="row" class="featured left">초기 홍보비(3~4월)</th>
<td class="center">6만원*22일*1명</td>
<td class="right">1,320,000</td>
<td class="center">미구입</td>
<td class="center">부족투자금</td>
</tr>
</tbody>
<tfoot>
<tr class="foot">
<th scope="row"></th>
<td></td>
<td class="right">37,920,000</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
[클래스명 table-3 테이블] 예제소스보기
표 제목
| 구분 |
단위 |
금액 |
구매여부 |
기타 |
| 사무실 임대 |
전월세 |
30,000,000 |
임대완료 |
자기투자금 |
| 책상/의자 등 각종가구 |
|
3,200,000 |
구매완료 |
자기투자금 |
| 컴퓨터 3대 |
|
2,400,000 |
구매완료 |
자기투자금 |
| 간판 |
|
1,000,000 |
미구입 |
부족투자금 |
| 초기 홍보비(3~4월) |
6만원*22일*1명 |
1,320,000 |
미구입 |
부족투자금 |
<table summary="표 요약글입니다." class="table-4">
<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 left">사무실 임대</th>
<td class="center">전월세</td>
<td class="right">30,000,000</td>
<td class="center">임대완료</td>
<td class="center">자기투자금</td>
</tr>
<tr>
<th scope="row" class="featured left">책상/의자 등 각종가구</th>
<td class="center"></td>
<td class="right">3,200,000</td>
<td class="center">구매완료</td>
<td class="center">자기투자금</td>
</tr>
<tr>
<th scope="row" class="featured left">컴퓨터 3대</th>
<td class="center"></td>
<td class="right">2,400,000</td>
<td class="center">구매완료</td>
<td class="center">자기투자금</td>
</tr>
<tr>
<th scope="row" class="featured left">간판</th>
<td class="center"></td>
<td class="right">1,000,000</td>
<td class="center">미구입</td>
<td class="center">부족투자금</td>
</tr>
<tr>
<th scope="row" class="featured left">초기 홍보비(3~4월)</th>
<td class="center">6만원*22일*1명</td>
<td class="right">1,320,000</td>
<td class="center">미구입</td>
<td class="center">부족투자금</td>
</tr>
</tbody>
<tfoot>
<tr class="foot">
<th scope="row"></th>
<td></td>
<td class="right">37,920,000</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
[클래스명 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 |
미구입 |
부족투자금 |
<table summary="표 요약글입니다." class="table-4 table-border-color1">
<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 left">사무실 임대</th>
<td class="center">전월세</td>
<td class="right">30,000,000</td>
<td class="center">임대완료</td>
<td class="center">자기투자금</td>
</tr>
<tr>
<th scope="row" class="featured left">책상/의자 등 각종가구</th>
<td class="center"></td>
<td class="right">3,200,000</td>
<td class="center">구매완료</td>
<td class="center">자기투자금</td>
</tr>
<tr>
<th scope="row" class="featured left">컴퓨터 3대</th>
<td class="center"></td>
<td class="right">2,400,000</td>
<td class="center">구매완료</td>
<td class="center">자기투자금</td>
</tr>
<tr>
<th scope="row" class="featured left">간판</th>
<td class="center"></td>
<td class="right">1,000,000</td>
<td class="center">미구입</td>
<td class="center">부족투자금</td>
</tr>
<tr>
<th scope="row" class="featured left">초기 홍보비(3~4월)</th>
<td class="center">6만원*22일*1명</td>
<td class="right">1,320,000</td>
<td class="center">미구입</td>
<td class="center">부족투자금</td>
</tr>
</tbody>
<tfoot>
<tr class="foot">
<th scope="row"></th>
<td></td>
<td class="right">37,920,000</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
[테이블 테두리 색상 변경] 예제소스보기
참고: 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 |
미구입 |
부족투자금 |
<table summary="표 요약글입니다." class="table-4">
<caption>표 제목</caption>
<thead>
<tr class="head">
<th scope="col" class="green">구분</th>
<th scope="col" class="green">단위</th>
<th scope="col" class="green">금액</th>
<th scope="col" class="green">구매여부</th>
<th scope="col" class="green">기타</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="olive-green left">사무실 임대</th>
<td class="center">전월세</td>
<td class="right">30,000,000</td>
<td class="blue center">임대완료</td>
<td class="center">자기투자금</td>
</tr>
<tr>
<th scope="row" class="olive-green left">책상/의자 등 각종가구</th>
<td class="center"></td>
<td class="right">3,200,000</td>
<td class="light-blue center">구매완료</td>
<td class="center">자기투자금</td>
</tr>
<tr>
<th scope="row" class="olive-green left">컴퓨터 3대</th>
<td class="center"></td>
<td class="right">2,400,000</td>
<td class="light-blue center">구매완료</td>
<td class="center">자기투자금</td>
</tr>
<tr>
<th scope="row" class="olive-green left">간판</th>
<td class="center"></td>
<td class="right">1,000,000</td>
<td class="yellow center">미구입</td>
<td class="hotpink center">부족투자금</td>
</tr>
<tr>
<th scope="row" class="olive-green left">초기 홍보비(3~4월)</th>
<td class="center">6만원*22일*1명</td>
<td class="right">1,320,000</td>
<td class="yellow center">미구입</td>
<td class="hotpink center">부족투자금</td>
</tr>
</tbody>
<tfoot>
<tr class="foot">
<th scope="row"></th>
<td></td>
<td class="crimson right">37,920,000</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
[색상표를 이용한 색상 변경] 예제소스보기
<table summary="이 표는 총 2열로 구성되었으며 1열은 **을, 2열은 **을 나타낸다." class="table-1">
<caption>표 제목</caption>
<thead>
<tr class="head">
<th scope="col">타이틀</th>
<th scope="col">타이틀</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="featured">내용</th>
<td>내용</td>
</tr>
<tr>
<th scope="row" class="featured">내용</th>
<td>내용</td>
</tr>
</tbody>
<tfoot>
<tr class="foot">
<th scope="row">내용</th>
<td>내용</td>
</tr>
</tfoot>
</table>
[바로복사해서 쓰는 2열형 테이블] 예제소스보기
표 제목
| 타이틀 |
타이틀 |
타이틀 |
| 내용 |
내용 |
내용 |
| 내용 |
내용 |
내용 |
<table summary="이 표는 총 3열로 구성되었으며 1열은 **을, 2열은 **을, 3열은 **을 나타낸다." class="table-1">
<caption>표 제목</caption>
<thead>
<tr class="head">
<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>
</tr>
<tr>
<th scope="row" class="featured">내용</th>
<td>내용</td>
<td>내용</td>
</tr>
</tbody>
<tfoot>
<tr class="foot">
<th scope="row">내용</th>
<td>내용</td>
<td>내용</td>
</tr>
</tfoot>
</table>
[바로복사해서 쓰는 3열형 테이블] 예제소스보기
표 제목
| 타이틀 |
타이틀 |
타이틀 |
타이틀 |
| 내용 |
내용 |
내용 |
내용 |
| 내용 |
내용 |
내용 |
내용 |
<table summary="이 표는 총 4열로 구성되었으며 1열은 **을, 2열은 **을, 3열은 **을, 4열은 **을 나타낸다." 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>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="featured">내용</th>
<td>내용</td>
<td>내용</td>
<td>내용</td>
</tr>
<tr>
<th scope="row" class="featured">내용</th>
<td>내용</td>
<td>내용</td>
<td>내용</td>
</tr>
</tbody>
<tfoot>
<tr class="foot">
<th scope="row">내용</th>
<td>내용</td>
<td>내용</td>
<td>내용</td>
</tr>
</tfoot>
</table>
[바로복사해서 쓰는 4열형 테이블] 예제소스보기
표 제목
| 타이틀 |
타이틀 |
타이틀 |
타이틀 |
타이틀 |
| 내용 |
내용 |
내용 |
내용 |
내용 |
| 내용 |
내용 |
내용 |
내용 |
내용 |
<table summary="이 표는 총 5열로 구성되었으며 1열은 **을, 2열은 **을, 3열은 **을, 4열은 **을, 5열은 **을 나타낸다." 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>
[바로복사해서 쓰는 5열형 테이블] 예제소스보기
표 제목
| 타이틀 |
타이틀 |
타이틀 |
타이틀 |
타이틀 |
타이틀 |
| 내용 |
내용 |
내용 |
내용 |
내용 |
내용 |
| 내용 |
내용 |
내용 |
내용 |
내용 |
내용 |
<table summary="이 표는 총 6열로 구성되었으며 1열은 **을, 2열은 **을, 3열은 **을, 4열은 **을, 5열은 **을, 6열은 **을 나타낸다." 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>
<th scope="col">타이틀</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="featured">내용</th>
<td>내용</td>
<td>내용</td>
<td>내용</td>
<td>내용</td>
<td>내용</td>
</tr>
<tr>
<th scope="row" class="featured">내용</th>
<td>내용</td>
<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>
<td>내용</td>
</tr>
</tfoot>
</table>
[바로복사해서 쓰는 6열형 테이블] 예제소스보기
TOP
등록일:
마지막 수정일:
스타일시트(CSS)
스타일시트(CSS) 목록 : 이표는 글순서,첨부파일,제목,추천수,조회수,작성일을 확인할 수 있습니다
| 글순서NO |
*(첨부파일) |
제목 |
추천 |
조회 |
작성일↑ |
| 12 |
없음 |
레이아웃 구조 |
추천:0 |
조회:5586 |
|
| 11 |
없음 |
색상표 |
추천:0 |
조회:5318 |
|
| 10 |
없음 |
버튼 |
추천:0 |
조회:8861 |
|
| 9 |
없음 |
하이라이트 |
추천:0 |
조회:4709 |
|
| 8 |
없음 |
인용구 |
추천:0 |
조회:3413 |
|
| 7 |
없음 |
현재글:테이블(표) |
추천:0 |
조회:3603 |
|
| 6 |
없음 |
박스 리스트 |
추천:0 |
조회:3969 |
|
| 5 |
없음 |
텝박스 |
추천:0 |
조회:4180 |
|
| 4 |
없음 |
아이콘 |
추천:0 |
조회:6515 |
|
| 3 |
없음 |
반응형 기타 |
추천:0 |
조회:3483 |
|
