"table"코드 샘플

테이블이란 정보의 가독성을 목적으로 한 것이므로, 극히 간단한 디자인이되기 쉽다 네요. 게다가 장식 할 수있는 부품도 선과 배경색과 글자 색에 제한되기 때문에 각종 사이트마다 테이블의 디자인이 유사한 (색상 차이 라든지) 일이 될 경우가 많습니다. 그래서 나는 기본이되는 자작 코드를 일부 스톡있어서, 안건에 따라 그 코드에서 사용자 지정하도록하고 있습니다. 여기에서는 그 중에서 극히 간단하고 범용성이 높은 것을 소개합니다.

table의 샘플 코드

선만

간단한 실선 만의 디자인입니다. 일반 디자인이 가장 정의하기 쉽습니다.

<table class="type01">

<tr>

<th scope="row">과일</th>

<td>바나나</td>

</tr>

<tr>

<th scope="row">과일</th>

<td>사과</td>

</tr>

<tr>

<th scope="row">과일</th>

<td>수박</td>

</tr>

</table>

-css-

table.type01 {

border-collapse: collapse;

text-align: left;

line-height: 1.5;

}

table.type01 th {

width: 150px;

padding: 10px;

font-weight: bold;

vertical-align: top;

border: 1px solid #ccc;

}

table.type01 td {

width: 350px;

padding: 10px;

vertical-align: top;

border: 1px solid #ccc;

}

제목 배경색 및 입체형

제목에 배경색을 지정하고 회색과 흰색의 두 가지 선에서 셀을 약간 입체 느낌에 보이고 있습니다. 색상은 심플하지만 밋밋하고 평탄한 표면의 것보다 조금 화려한 느낌으로 자주 사용되는 유형입니다.

table.type02 {

border-collapse: separate;

border-spacing: 0;

text-align: left;

line-height: 1.5;

border-top: 1px solid #ccc;

border-left: 1px solid #ccc;

}

table.type02 th {

width: 150px;

padding: 10px;

font-weight: bold;

vertical-align: top;

border-right: 1px solid #ccc;

border-bottom: 1px solid #ccc;

border-top: 1px solid #fff;

border-left: 1px solid #fff;

background: #eee;

}

table.type02 td {

width: 350px;

padding: 10px;

vertical-align: top;

border-right: 1px solid #ccc;

border-bottom: 1px solid #ccc;

}

테이블 왼쪽에 굵은 선

단조로운 색조에 약간의 악센트를 붙이는 때문에 테이블 왼쪽에 굵은 선으로 라인 넣습니다. 같은 계열 색상으로 제목 글자 색을 맞추면 제목이 강조되고 의미도 가독성도 올리겠습니다.

table.type02 {

border-collapse: separate;

border-spacing: 0;

text-align: left;

line-height: 1.5;

border-top: 1px solid #ccc;

border-left: 1px solid #ccc;

}

table.type02 th {

width: 150px;

padding: 10px;

font-weight: bold;

vertical-align: top;

border-right: 1px solid #ccc;

border-bottom: 1px solid #ccc;

border-top: 1px solid #fff;

border-left: 1px solid #fff;

background: #eee;

}

table.type02 td {

width: 350px;

padding: 10px;

vertical-align: top;

border-right: 1px solid #ccc;

border-bottom: 1px solid #ccc;

}

상하 선 만

정말 간단한 상하 구분선 만의 타입. 이 유형의 테이블은 디자인도 상당히 많습니다.

table.type04 {

border-collapse: separate;

border-spacing: 1px;

text-align: left;

line-height: 1.5;

border-top: 1px solid #ccc;

}

table.type04 th {

width: 150px;

padding: 10px;

font-weight: bold;

vertical-align: top;

border-bottom: 1px solid #ccc;

}

table.type04 td {

width: 350px;

padding: 10px;

vertical-align: top;

border-bottom: 1px solid #ccc;

}

상하 선 & 제목 배경색

위의 디자인에 제목의 배경색을 입체적으로 붙인 타입. 이것도 자주 사용하는 디자인의 테이블 배열입니다.

table.type05 {

border-collapse: separate;

border-spacing: 1px;

text-align: left;

line-height: 1.5;

border-top: 1px solid #ccc;

}

table.type05 th {

width: 150px;

padding: 10px;

font-weight: bold;

vertical-align: top;

border-bottom: 1px solid #ccc;

background: #efefef;

}

table.type05 td {

width: 350px;

padding: 10px;

vertical-align: top;

border-bottom: 1px solid #ccc;

}

짝수 행의 배경색

선은 테이블 상하 2 개소 만, 나머지는 짝수 줄은 배경색 만 가진 타입. 세련된 디자인에 맞게 가독성이 뛰어난 테이블 디자인입니다.

table.type06 {

border-collapse: collapse;

text-align: left;

line-height: 1.5;

border-top: 1px solid #ccc;

border-bottom: 1px solid #ccc;

}

table.type06 th {

width: 150px;

padding: 10px;

font-weight: bold;

vertical-align: top;

}

table.type06 td {

width: 350px;

padding: 10px;

vertical-align: top;

}

table.type06 .even {

background: #efefef;

}

2way 헤더 기본형

1 행에 테이블 헤더가 들어 각 행 왼쪽에 제목이 오는 타입의 기본형입니다.

<table class="type07">

<thead>

<tr>

<th scope="cols">종류</th>

<th scope="cols">과일종류</th>

</tr>

</thead>

<tbody>

<tr>

<th scope="row">과일</th>

<td>수박</td>

</tr>

<tr>

<th scope="row">과일</th>

<td>바나나</td>

</tr>

<tr>

<th scope="row">과일</th>

<td>사과</td>

</tr>

</tbody>

</table>

table.type07 {

border-collapse: collapse;

text-align: left;

line-height: 1.5;

border: 1px solid #ccc;

}

table.type07 thead {

border-right: 1px solid #ccc;

border-left: 1px solid #ccc;

background: #04162e;

}

table.type07 thead th {

padding: 10px;

font-weight: bold;

vertical-align: top;

color: #fff;

}

table.type07 tbody th {

width: 150px;

padding: 10px;

font-weight: bold;

vertical-align: top;

border-bottom: 1px solid #ccc;

background: #efefef;

}

table.type07 td {

width: 350px;

padding: 10px;

vertical-align: top;

border-bottom: 1px solid #ccc;

}

2way 헤더 및 라인 악센트 A

테이블 헤더를 비롯해 전체적으로 색상이 약할 때 라인 악센트를 헤더 아래에 넣어 헤더와 바디의 경계를 명확하게합니다.

html은 2way 기본 헤더형에서 사용합니다.

table.type08 {

border-collapse: collapse;

text-align: left;

line-height: 1.5;

border-left: 1px solid #ccc;

}

table.type08 thead th {

padding: 10px;

font-weight: bold;

border-top: 1px solid #ccc;

border-right: 1px solid #ccc;

border-bottom: 2px solid #c00;

background: #dcdcd1;

}

table.type08 tbody th {

width: 150px;

padding: 10px;

font-weight: bold;

vertical-align: top;

border-right: 1px solid #ccc;

border-bottom: 1px solid #ccc;

background: #ececec;

}

table.type08 td {

width: 350px;

padding: 10px;

vertical-align: top;

border-right: 1px solid #ccc;

border-bottom: 1px solid #ccc;

}

2way 헤더 및 라인 악센트 B

위의 헤더 무 배경색 타입. 이것도 자주 사용합니다.

table.type09 {

border-collapse: collapse;

text-align: left;

line-height: 1.5;

}

table.type09 thead th {

padding: 10px;

font-weight: bold;

vertical-align: top;

color: #369;

border-bottom: 3px solid #036;

}

table.type09 tbody th {

width: 150px;

padding: 10px;

font-weight: bold;

vertical-align: top;

border-bottom: 1px solid #ccc;

background: #f3f6f7;

}

table.type09 td {

width: 350px;

padding: 10px;

vertical-align: top;

border-bottom: 1px solid #ccc;

}

2way 헤더 및 짝수 행의 배경색

헤더의 배경색은 강하게하여 짝수 행의 배경색은 연한 색상의 사고하는 타입. 이것도 자주 사용합니다.

table.type10 {

border-collapse: collapse;

text-align: left;

line-height: 1.5;

border-top: 1px solid #ccc;

border-bottom: 1px solid #ccc;

}

table.type10 thead th {

width: 150px;

padding: 10px;

font-weight: bold;

vertical-align: top;

color: #fff;

background: #04162e;

}

table.type10 td {

width: 350px;

padding: 10px;

vertical-align: top;

}

table.type10 .even {

background: #f3f6f7;

}

1way 헤더

첫 번째 줄에만 제목이 오는 타입.

<table class="type11">

<thead>

<tr>

<th scope="cols">쥬스</th>

<th scope="cols">소주</th>

<th scope="cols">맥주</th>

</tr>

</thead>

<tbody>

<tr>

<td>사과쥬스</th>

<td>오랜지쥬스</th>

<td>망고쥬스</th>

</tr>

<tr>

<td>참이슬</th>

<td>처음처럼</th>

<td>좋은데이</th>

</tr>

<tr>

<td>하이트</th>

<td>아사히</th>

<td>OB</th>

</tr>

</tbody>

</table>

table.type11 {

border-collapse: separate;

border-spacing: 1px;

text-align: center;

line-height: 1.5;

}

table.type11 th {

width: 155px;

padding: 10px;

font-weight: bold;

vertical-align: top;

color: #fff;

background: #036;

}

table.type11 td {

width: 155px;

padding: 10px;

vertical-align: top;

border-bottom: 1px solid #ccc;

background: #eee;

}

덤

위의 유형을 바둑판 식으로 한 타입 입니다. 그다지 사용 빈도는 높지 않다지만, 일단 만들어 봅시다.

table.type12 {

border-collapse: separate;

border-spacing: 3px;

text-align: center;

line-height: 1.5;

}

table.type12 th {

width: 155px;

padding: 10px;

font-weight: bold;

vertical-align: top;

color: #fff;

background: #666;

}

table.type12 td {

width: 155px;

padding: 30px 10px;

vertical-align: top;

background: #eee;

}

table.type12 th.col01 {background: #060;}

table.type12 td.col01 {background: #cfc;}

table.type12 th.col02 {background: #f60;}

table.type12 td.col02 {background: #fc9;}

table.type12 th.col03 {background: #036;}

table.type12 td.col03 {background: #e2eeff;}

참고해두면 나중에 작업할때 유용하게 쓰일 것으로 보입니다,^^