10. table 관련 속성 -바닥부터 시작하는 CSS-

2017. 1. 9. 00:05 from COMPUTER/CSS


10. table 관련 속성 -바닥부터 시작하는 CSS-

 

1. Table Borders

이미 배운 border 속성을 사용한다.

<table>, <th>, <td> 태그에 줄 수 있다. ( <tr>에는 주지 않는다.)

아래의 예에서는 <table>에 border와 <td>또는 <tr>에 border가 생기므로 이중 border가 만들어 진다.

예 10-1

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       table,
  5.       td,
  6.       th {
  7.         border: 1px solid black;
  8.       }
  9.     </style>
  10.   </head>
  11.   <body>
  12.     <h4>table 내부에 border 만들기</h4>
  13.     <table>
  14.       <tr>
  15.         <th>fruits</th>
  16.         <th>foods</th>
  17.       </tr>
  18.       <tr>
  19.         <td>apple</td>
  20.         <td>beef</td>
  21.       </tr>
  22.       <tr>
  23.         <td>banana</td>
  24.         <td>pork</td>
  25.       </tr>
  26.       <tr>
  27.         <td>orange</td>
  28.         <td>chicken</td>
  29.       </tr>
  30.     </table>
  31.   </body>
  32. </html>



2. Collapse Table Borders

border-collapse 속성도 이미 공부했듯이 table border를 한 겹으로 만든다.

<table>태그에 넣는다.

separate(기본값), collapse(single border)

예 10-2

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       table {
  5.         border-collapse: collapse;
  6.       }
  8.       table, td, th {
  9.         border: 1px solid black;
  10.       }
  11.     </style>
  12.   </head>
  13.   <body>
  15.     <h4>border-collapse를 사용한 결과:</h4>
  17.     <table>
  18.       <tr>
  19.         <th>fruits</th>
  20.         <th>foods</th>
  21.       </tr>
  22.       <tr>
  23.         <td>apple</td>
  24.         <td>beef</td>
  25.       </tr>
  26.       <tr>
  27.         <td>banana</td>
  28.         <td>pork</td>
  29.       </tr>
  30.       <tr>
  31.         <td>orange</td>
  32.         <td>chicken</td>
  33.       </tr>
  34.     </table>
  36.     <p>
  37.       <b>알림:</b>IE8과 그 이전 버전에서는 !DOCTYPE을 선언하지 않으면 이상 결과를 초래한다.</p>
  38.   </body>
  39. </html>

 

table에만 border가 필요하다면 <table>태그에만 border 속성을 적용 시킨다.

예 10-3

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       table {
  5.         border-collapse: collapse;
  6.         border: 1px solid black;
  7.       }
  8.     </style>
  9.   </head>
  10.   <body>
  12.     <h4>Table의 Single border.</h4>
  14.     <table>
  15.       <tr>
  16.         <th>fruits</th>
  17.         <th>foods</th>
  18.       </tr>
  19.       <tr>
  20.         <td>apple</td>
  21.         <td>beef</td>
  22.       </tr>
  23.       <tr>
  24.         <td>banana</td>
  25.         <td>pork</td>
  26.       </tr>
  27.       <tr>
  28.         <td>orange</td>
  29.         <td>chicken</td>
  30.       </tr>
  31.     </table>
  33.   </body>
  34. </html>

 

 

3. Table Width and Height

이미 배운 width와 height 속성을 사용한다.

예 10-4

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       table,
  5.       td,
  6.       th {
  7.         border: 1px solid black;
  8.       }
  10.       table {
  11.         border-collapse: collapse;
  12.         width: 100%;
  13.       }
  15.       th {
  16.         height: 50px;
  17.       }
  18.     </style>
  19.   </head>
  20.   <body>
  22.     <h4>width와 height 속성을 적용</h4>
  23.     <table>
  24.       <tr>
  25.         <th>fruits</th>
  26.         <th>foods</th>
  27.       </tr>
  28.       <tr>
  29.         <td>apple</td>
  30.         <td>beef</td>
  31.       </tr>
  32.       <tr>
  33.         <td>banana</td>
  34.         <td>pork</td>
  35.       </tr>
  36.       <tr>
  37.         <td>orange</td>
  38.         <td>chicken</td>
  39.       </tr>
  40.     </table>
  42.   </body>
  43. </html>

 


4. 가로 정렬

text-align 속성을 사용해서 <tr>, <td>안의 내용을 가로 정렬 한다.

<th>의 기본은 중앙 정렬이고, <td>의 기본은 왼쪽 정렬이다.

예 10-5

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       table,
  5.       td,
  6.       th {
  7.         border: 1px solid black;
  8.       }
  10.       table {
  11.         border-collapse: collapse;
  12.         width: 100%;
  13.       }
  15.       th {
  16.         text-align: left;
  17.       }
  18.     </style>
  19.   </head>
  20.   <body>
  22.     <h4>text-align에 의한 가로 정렬</h4>
  23.     <table>
  24.       <tr>
  25.         <th>fruits</th>
  26.         <th>foods</th>
  27.         <th>beverage</th>
  28.       </tr>
  29.       <tr>
  30.         <td>apple</td>
  31.         <td>beef</td>
  32.         <td>water</td>
  33.       </tr>
  34.       <tr>
  35.         <td>banana</td>
  36.         <td>pork</td>
  37.         <td>coke</td>
  38.       </tr>
  39.       <tr>
  40.         <td>orange</td>
  41.         <td>chicken</td>
  42.         <td>beer</td>
  43.       </tr>
  44.     </table>
  45.   </body>
  46. </html>

 

5. 세로 정렬

vertical-align 속성에 top, bottom, middle 등의 속성 값을 사용해서 <th> 또는 <td>의 내용을 세로 정렬한다.

 

<th>, <td>의 기본 vertical-align값은 둘 다 middle이다.

예 10-6

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       table,
  5.       td,
  6.       th {
  7.         border: 1px solid black;
  8.       }
  10.       table {
  11.         border-collapse: collapse;
  12.         width: 100%;
  13.       }
  15.       td {
  16.         height: 50px;
  17.         vertical-align: bottom;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  23.     <h4>The vertical-align을 이용한 세로 정렬</h4>
  24.     <table>
  25.       <tr>
  26.         <th>fruits</th>
  27.         <th>foods</th>
  28.         <th>beverage</th>
  29.       </tr>
  30.       <tr>
  31.         <td>apple</td>
  32.         <td>beef</td>
  33.         <td>water</td>
  34.       </tr>
  35.       <tr>
  36.         <td>banana</td>
  37.         <td>pork</td>
  38.         <td>coke</td>
  39.       </tr>
  40.       <tr>
  41.         <td>orange</td>
  42.         <td>chicken</td>
  43.         <td>beer</td>
  44.       </tr>
  45.     </table>
  47.   </body>
  48. </html>

 

6. Table Padding

<td>와 <th>에 padding 속성을 사용해서 내용과 border사이에 있는 여백을 조절한다.

예 10-7

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       table,
  5.       td,
  6.       th {
  7.         border: 1px solid #ddd;
  8.         text-align: left;
  9.       }
  11.       table {
  12.         border-collapse: collapse;
  13.         width: 100%;
  14.       }
  16.       td,
  17.       th {
  18.         padding: 15px;
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  24.     <h4>padding 속성 사용하기</h4>
  25.     <table>
  26.       <tr>
  27.         <th>fruits</th>
  28.         <th>foods</th>
  29.         <th>beverage</th>
  30.       </tr>
  31.       <tr>
  32.         <td>apple</td>
  33.         <td>beef</td>
  34.         <td>water</td>
  35.       </tr>
  36.       <tr>
  37.         <td>banana</td>
  38.         <td>pork</td>
  39.         <td>coke</td>
  40.       </tr>
  41.       <tr>
  42.         <td>orange</td>
  43.         <td>chicken</td>
  44.         <td>beer</td>
  45.       </table>
  46.     </body>
  47.   </html>

 

7. 수평 분리선(Horizontal Dividers)

border-bottom 속성을 <th>와 <td>에 적용하여 수평 분리선을 만든다.

예 10-8

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       table {
  5.         border-collapse: collapse;
  6.         width: 100%;
  7.       }
  9.       td,
  10.       th {
  11.         padding: 8px;
  12.         text-align: left;
  13.         border-bottom: 1px solid #ddd;
  14.       }
  15.     </style>
  16.   </head>
  17.   <body>
  19.     <h4>수평 분리선 만들기</h4>
  21.     <table>
  22.       <tr>
  23.         <th>fruits</th>
  24.         <th>foods</th>
  25.         <th>beverage</th>
  26.       </tr>
  27.       <tr>
  28.         <td>apple</td>
  29.         <td>beef</td>
  30.         <td>water</td>
  31.       </tr>
  32.       <tr>
  33.         <td>banana</td>
  34.         <td>pork</td>
  35.         <td>coke</td>
  36.       </tr>
  37.       <tr>
  38.         <td>orange</td>
  39.         <td>chicken</td>
  40.         <td>beer</td>
  41.       </tr>
  42.     </table>
  44.   </body>
  45. </html>

 

8. 수직 분리선 만들기

좌측 <td>의 border-right 에만 빨간 선을 지정해서 양쪽을 나눈다.

예 10-9

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       .td1 {
  5.         width: 190px;
  6.         border-right: 1px solid red;
  7.         padding-right: 12px;
  8.         text-align: justify;
  9.         vertical-align: top;
  10.       }
  11.       .td2 {
  12.         width: 190px;
  13.         padding-left: 10px;
  14.         vertical-align: top;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <table>
  20.       <tr>
  21.         <td class="td1">
  22.           그대는 한줄기 햇살처럼 흩어지는 나뭇잎사이로 내 품에 잠시 머물은 보라 빛 노을이었나 사랑한단 말도 모르는데 울먹이는 저녁 아이처럼 내 품에
  23.           잠시 머물은 한줄기 햇살이었나 그 마음을 알 수 없어 흐르던 눈물은 흐르질 않지만 그저 지난 추억이 아름다워 다시 또 생각나는가</td>
  24.         <td class="td2">얼마나 많은 생각이 그대를 찾으려 꿈길만 헤맸는지 그대 저 산 멀리 점되어 날으는 새들같이 떠났지
  25.         </td>
  26.       </tr>
  27.     </table>
  28.   </body>
  29. </html>

 

 

8. Hoverable Table

:hover 선택자를 이용해 마우스를 <tr>에 올리면 해당 줄에 highlight가 생기게 한다.

예 10-10

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       table {
  5.         border-collapse: collapse;
  6.         width: 100%;
  7.       }
  9.       td,
  10.       th {
  11.         padding: 8px;
  12.         text-align: left;
  13.         border-bottom: 1px solid #ddd;
  14.       }
  15.       tr:hover {
  16.         background-color: #f5f5f5;
  17.       }
  18.     </style>
  19.   </head>
  20.   <body>
  22.     <h4>Hoverable Table</h4>
  23.     <p>mouse를
  24.       <tr>위에 올리면 해당 줄에 highlight가 생긴다.</p>
  26.       <table>
  27.         <tr>
  28.           <th>fruits</th>
  29.           <th>foods</th>
  30.           <th>beverage</th>
  31.         </tr>
  32.         <tr>
  33.           <td>apple</td>
  34.           <td>beef</td>
  35.           <td>water</td>
  36.         </tr>
  37.         <tr>
  38.           <td>banana</td>
  39.           <td>pork</td>
  40.           <td>coke</td>
  41.         </tr>
  42.         <tr>
  43.           <td>orange</td>
  44.           <td>chicken</td>
  45.           <td>beer</td>
  46.         </tr>
  47.       </table>
  48.     </body>
  49.   </html>

 

 

9. Striped Tables

얼룩말 무늬의 table을 만들기 위한 방법으로, nth-child() 선택자를 사용해서 짝수 또는 홀수 줄에 다른 배경색을 지정한다.

tr:nth-child(even), tr:nth-child(odd)

예 10-11

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       table {
  5.         border-collapse: collapse;
  6.         width: 100%;
  7.       }
  9.       td,
  10.       th {
  11.         text-align: left;
  12.         padding: 8px;
  13.       }
  14.       tr:nth-child(even) {
  15.         background-color: #f2f2f2;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  21.     <h4>Striped Table</h4>
  22.     <table>
  23.       <tr>
  24.         <th>fruits</th>
  25.         <th>foods</th>
  26.         <th>beverage</th>
  27.       </tr>
  28.       <tr>
  29.         <td>apple</td>
  30.         <td>beef</td>
  31.         <td>water</td>
  32.       </tr>
  33.       <tr>
  34.         <td>banana</td>
  35.         <td>pork</td>
  36.         <td>coke</td>
  37.       </tr>
  38.       <tr>
  39.         <td>orange</td>
  40.         <td>chicken</td>
  41.         <td>beer</td>
  42.       </tr>
  43.     </table>
  44.   </body>
  45. </html>

 

 

10. Table Color

배경색이나 글자색을 지정한다.

예 10-12

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       table {
  5.         border-collapse: collapse;
  6.         width: 100%;
  7.       }
  9.       td,
  10.       th {
  11.         text-align: left;
  12.         padding: 8px;
  13.       }
  14.       tr:nth-child(even) {
  15.         background-color: #f2f2f2;
  16.       }
  18.       th {
  19.         background-color: #4CAF50;
  20.         color: white;
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  26.     <h4>Table에 배경색 적용</h4>
  28.     <table>
  29.       <tr>
  30.         <th>fruits</th>
  31.         <th>foods</th>
  32.         <th>beverage</th>
  33.       </tr>
  34.       <tr>
  35.         <td>apple</td>
  36.         <td>beef</td>
  37.         <td>water</td>
  38.       </tr>
  39.       <tr>
  40.         <td>banana</td>
  41.         <td>pork</td>
  42.         <td>coke</td>
  43.       </tr>
  44.       <tr>
  45.         <td>orange</td>
  46.         <td>chicken</td>
  47.         <td>beer</td>
  48.       </tr>
  49.     </table>
  51.   </body>
  52. </html>

 

 

12. Responsive Table

<div>와 같은 부모 요소에 overflow-x:auto; 속성 값을 주면, 안에 있는 <table> 요소는 자료가 그 폭을 넘칠 경우 가로 스크롤을 생성해서 대응(responsive)한다.

예 10-13

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       table {
  5.         border-collapse: collapse;
  6.         width: 100%;
  7.       }
  9.       td,
  10.       th {
  11.         text-align: left;
  12.         padding: 8px;
  13.       }
  14.       tr:nth-child(even) {
  15.         background-color: #f2f2f2;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  21.     <h4>
  22.       대응 형(Responsive) Table</h4>
  23.     <div style="overflow-x:auto;">
  24.       <table>
  25.         <tr>
  26.           <th>Company</th>
  27.           <th>country</th>
  28.           <th>Points</th>
  29.           <th>Points</th>
  30.           <th>Points</th>
  31.           <th>Points</th>
  32.           <th>Points</th>
  33.           <th>Points</th>
  34.           <th>Points</th>
  35.           <th>Points</th>
  36.           <th>Points</th>
  37.           <th>Points</th>
  38.         </tr>
  39.         <tr>
  40.           <td>Samsung</td>
  41.           <td>Korea</td>
  42.           <td>50</td>
  43.           <td>50</td>
  44.           <td>50</td>
  45.           <td>50</td>
  46.           <td>50</td>
  47.           <td>50</td>
  48.           <td>50</td>
  49.           <td>50</td>
  50.           <td>50</td>
  51.           <td>50</td>
  52.         </tr>
  53.         <tr>
  54.           <td>Apple</td>
  55.           <td>USA</td>
  56.           <td>50</td>
  57.           <td>50</td>
  58.           <td>50</td>
  59.           <td>50</td>
  60.           <td>50</td>
  61.           <td>50</td>
  62.           <td>50</td>
  63.           <td>50</td>
  64.           <td>50</td>
  65.           <td>50</td>
  66.         </tr>
  67.       </table>
  68.     </div>
  69.   </body>
  70. </html>


 

13. 테이블 설명 붙이기(table caption)

caption-side 속성을 이용해 테이블에 설명 또는 제목의 위치를 정할 수 있다.

top(테이블 위), bottom(테이블 아래)

예 10-14

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       table,
  5.       td,
  6.       th {
  7.         border: 1px solid black;
  8.       }
  10.       caption {
  11.         caption-side: bottom;
  12.       }
  13.     </style>
  14.   </head>
  15.   <body>
  17.     <table>
  18.       <caption>Table 1.1 Customers</caption>
  19.       <tr>
  20.         <th>Company</th>
  21.         <th>Contact</th>
  22.         <th>Country</th>
  23.       </tr>
  24.       <tr>
  25.         <td>Alfreds Futterkiste</td>
  26.         <td>Maria Anders</td>
  27.         <td>Germany</td>
  28.       </tr>
  29.       <tr class="alt">
  30.         <td>Berglunds snabbköp</td>
  31.         <td>Christina Berglund</td>
  32.         <td>Sweden</td>
  33.       </tr>
  34.       <tr>
  35.         <td>Centro comercial Moctezuma</td>
  36.         <td>Francisco Chang</td>
  37.         <td>Mexico</td>
  38.       </tr>
  39.     </table>
  41.     <p>
  42.       <b>알림:</b>IE8에서는 !DOCTYPE을 선언해야 caption-side 속성이 적용된다.</p>
  43.   </body>
  44. </html>

 

 

14. table-layout

table-layout 속성은 cell안의 내용이 길면 cell의 길이가 늘어나는 문제를 해결하기 위해서 <table>요소에 사용된다.

auto : 연속되어 있는 내용의 길이만큼 cell의 길이가 늘어난다. (기본 값)

내용에 공백이 있다면 줄 바꿈이 일어나지만 공백이 없는 긴 영문은 cell의 길이를 늘어나게 한다.

fixed : cell의 길이는 고정이 되어 공백없는 긴 내용은 cell을 벗어나게 된다.

적정 위치에서 줄 바꿈이 일어나게 하려면 word-break:break-all; 속성을 <table>요소에 추가적으로 지정해 주면 된다.

예 10-15

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       table {
  5.         border-collapse: separate;
  6.         width: 100%;
  7.         border: 1px solid black;
  8.       }
  10.       td {
  11.         border: 1px solid black;
  12.       }
  14.       table.ex1 {
  15.         table-layout: auto;
  16.       }
  18.       table.ex2 {
  19.         table-layout: fixed;
  20.       }
  21.       table.ex3 {
  22.         table-layout: fixed;
  23.         word-break: break-all;
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  29.     <p>table-layout: auto:</p>
  30.     <table class="ex1">
  31.       <tr>
  32.         <td width="10%">1000000000000000000000000000</td>
  33.         <td width="90%">10000000</td>
  34.       </tr>
  35.     </table>
  37.     <p>table-layout: fixed:</p>
  38.     <table class="ex2">
  39.       <tr>
  40.         <td width="10%">1000000000000000000000000000</td>
  41.         <td width="90%">10000000</td>
  42.       </tr>
  43.     </table>
  45.     <p>table-layout: fixed 와 word-break: break-all:
  46.     </p>
  47.     <table class="ex3">
  48.       <tr>
  49.         <td width="10%">1000000000000000000000000000</td>
  50.         <td width="90%">10000000</td>
  51.       </tr>
  52.     </table>
  53.   </body>
  54. </html>

 

15. empty-cells 속성

테이블에서 빈 셀에 대해 그 셀의 테두리나 배경을 브라우저에 보여줄지 보여주지 않을지를 지정하며 border-collapse 속성 값이 separate일 때만 해당된다.

show : 보여준다.(기본 값)

hide : 감춘다.

IE8에서는 !DOCTYPE의 선언이 필요하다.

예 10-16

pop-uptext
  1. <html>
  2.   <head>
  3.     <style>
  4.       table {
  5.         border-collapse: separate;
  6.         empty-cells: hide;
  7.       }
  8.     </style>
  9.   </head>
  11.   <body>
  12.     <table border="1">
  13.       <th>fruits</th>
  14.       <th>foods</th>
  15.       <th>beverage</th>
  16.     </tr>
  17.     <tr>
  18.       <td>apple</td>
  19.       <td></td>
  20.       <td>water</td>
  21.     </tr>
  22.     <tr>
  23.       <td>banana</td>
  24.       <td>pork</td>
  25.       <td>coke</td>
  26.     </table>
  27.   </body>
  28. </html>


저작자표시 비영리 변경금지

'COMPUTER > CSS' 카테고리의 다른 글

9. 중앙 정렬 -바닥부터 시작하는 CSS-  (0) 2017.01.07
8. font 관련 속성들 -바닥부터 시작하는 CSS-  (0) 2017.01.07
7. text에 관련된 속성들 -바닥부터 시작하는 CSS-  (0) 2017.01.05
6. margin, padding, border 속성 -바닥부터 시작하는 CSS-  (0) 2016.12.30
5. position 속성 -바닥부터 시작하는 CSS-  (0) 2016.12.24
Posted by star story :

티스토리툴바

Snippet :: Code View :: "+location.href+' 
'+b+"

티스토리툴바

");top.consoleRef.document.close()}$(".snippet-container").each(function(b){$(this).find("a.snippet-text").click(function(){var d=$(this).parents(".snippet-wrap").find(".snippet-formatted");var c=$(this).parents(".snippet-wrap").find(".snippet-textonly");d.toggle();c.toggle();if(c.is(":visible")){$(this).html("html")}else{$(this).html("text")}return false});$(this).find("a.snippet-window").click(function(){var c=$(this).parents(".snippet-wrap").find(".snippet-textonly").html();a(c);$(this).blur();return false})});$(".snippet-toggle").each(function(b){$(this).click(function(){$(this).parents(".snippet-container").find(".snippet-wrap").toggle()})})});