c07. CSS 테이블 및 목록

CSS 테이블 및 목록

<style>
#vegetable {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
/* 기본적으로 테이블의 <th> 및 <td> 태그는 각각 테두리를 갖기 때문에 이중선으로 보이게 됩니다.
그러나 border-collapse 프로퍼티로 한 개의 실선으로 보이게 하였습니다. */
width: 100%;
}

#vegetable td, #vegetable th {
border: 1px solid #ddd;
/* CSS 에서 테이블의 테두리는 border 프로퍼티를 사용합니다. #ddd 색의 실선을 id="vegetable" 인 <table> 태그에 적용하였습니다. */
border-bottom: 1px solid #ddd;
/* border-bottom 프로퍼티를 <th> 와 <td> 에 적용하여 수평 구분선을 바닥에만 넣을 수 있습니다. */
text-align: left;
/* 기본값으로 텍스트-정렬은 <th> 태그는 center-align 이고 <td> 태그는 left-align 입니다.
위에서는 <th> 태그도 left-align 으로 정렬하였습니다. */
padding: 8px;
/* 테이블의 내용과 테두리 사이의 패딩 간격은 <td> 와 <th> 태그에 padding 프로퍼티로 지정합니다. */
}

#vegetable tr:nth-child(even){background-color: #eee}
/* 얼룩말-줄무니 테이블을 만들었습니다. nth-child() 선택자와 함께 배경-색상(background-color)을 짝수(even) 혹은 홀수(odd) 열에 지정할 수 있습니다. */

#vegetable tr:hover {background-color: #ddd;}
/* hover 선택자를 <tr> 태그에 적용하여, 마우스가 올라갔을 때 해당 열이 하이라이트 되게 하였습니다. */

#vegetable th {
padding-top: 12px;
padding-bottom: 12px;
background-color: PowderBlue;
color: white;
/* <th> 태그의 배경-색상(background-color) 와 텍스트 color 를 지정하였습니다. */
}

ul.a {list-style-type: square;}
ol.b {list-style-type: upper-roman;}
ol.c {list-style-type: lower-alpha;}
</style>

<div style="overflow-x:auto;">
<!-- 반응형 테이블(Responsive Table) 이란 화면이 전체 내용을 표시하기에 너무 작으면 수평 스크롤 바를 자동으로 생성하는 기능인데,
<div> 태그와 같은 컨테이너 태그에 overflow-x:auto 스타일을 지정하여 <table> 태그를 감싸게 하면 됩니다. -->
<table id="vegetable">
<tbody><tr>
<th>채소 또는 과일</th>
<th>영문</th>
<th>기타</th>
</tr>
<tr>
<td>딸기</td>
<td>Strawberry</td>
<td>
<ul class="a">
<li>산딸기</li>
<li>뱀딸기</li>
</ul></td>
</tr>
<tr>
<td>수박</td>
<td>Watermelon</td>
<td><ol class="b">
<li>무등산 수박</li>
<li>돌 수박</li>
</ol></td>
</tr>
<tr>
<td>파인애플</td>
<td>Pineapple</td>
<td><ol class="c">
<li>Pine = 소나무</li>
<li>Apple = 사과</li>
</ol></td>
</tr>
</tbody></table>
</div>

---

채소 또는 과일	영문	기타
딸기	Strawberry	산딸기 뱀딸기
수박	Watermelon	무등산 수박 돌 수박
파인애플	Pineapple	Pine = 소나무 Apple = 사과

---

<p>Table Generator 사이트 같은 곳에서 CSS 테이블 코드를 복사해서 쓸 수 있습니다.</p>
<a href="http://www.csstablegenerator.com/" target="_blank">Table Generator 사이트를 새창에 띄우기</a>
<br />
<br />

Table Generator 사이트 같은 곳에서 CSS 테이블 코드를 복사해서 쓸 수 있습니다.

Table Generator 사이트를 새창에 띄우기

<style>
.CSSTableGenerator {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #000000;

-moz-border-radius-bottomleft:14px;
-webkit-border-bottom-left-radius:14px;
border-bottom-left-radius:14px;

-moz-border-radius-bottomright:14px;
-webkit-border-bottom-right-radius:14px;
border-bottom-right-radius:14px;

-moz-border-radius-topright:14px;
-webkit-border-top-right-radius:14px;
border-top-right-radius:14px;

-moz-border-radius-topleft:14px;
-webkit-border-top-left-radius:14px;
border-top-left-radius:14px;
}.CSSTableGenerator table{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:14px;
-webkit-border-bottom-right-radius:14px;
border-bottom-right-radius:14px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:14px;
-webkit-border-top-left-radius:14px;
border-top-left-radius:14px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:14px;
-webkit-border-top-right-radius:14px;
border-top-right-radius:14px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:14px;
-webkit-border-bottom-left-radius:14px;
border-bottom-left-radius:14px;
}.CSSTableGenerator tr:hover td{
background-color:#ffffff;

}
.CSSTableGenerator td{
vertical-align:middle;

background-color:#e5e5e5;

border:1px solid #000000;
border-width:0px 1px 1px 0px;
text-align:left;
padding:7px;
/*font-size:10px;*/
font-family:Arial;
font-weight:normal;
color:#666666;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );
background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2"); background: -o-linear-gradient(top,#cccccc,b2b2b2);

background-color:#cccccc;
border:0px solid #000000;
text-align:center;
border-width:0px 0px 1px 1px;
/*font-size:14px;*/
font-family:Arial;
font-weight:normal;
color:#666666;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );
background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2"); background: -o-linear-gradient(top,#cccccc,b2b2b2);

background-color:#cccccc;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
</style>

<div class="CSSTableGenerator" >
<table >
<tr>
<td>
Title 1
</td>
<td >
Title 2
</td>
<td>
Title 3
</td>
</tr>
<tr>
<td >
Row 1
</td>
<td>
Row 1
</td>
<td>
Row 1
</td>
</tr>
<tr>
<td >
Row 2
</td>
<td>
Row 2
</td>
<td>
Row 2
</td>
</tr>
<tr>
<td >
Row 3
</td>
<td>
Row 3
</td>
<td>
Row 3
</td>
</tr>
</table>
</div>

Title 1	Title 2	Title 3
Row 1	Row 1	Row 1
Row 2	Row 2	Row 2
Row 3	Row 3	Row 3

---

[광고] Udemy 동영상 강의로 보기