블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 올라온 글

최근에 달린 댓글

'CSS 표 샘플'에 해당되는 글 1건

  1. 2009.04.28 CSS로 Table 디자인 하기 15


그룹웨어형식의 웹애플리케이션을 퍼블리싱하다가 보면 테이블들을 많이 사용하는데
코딩할때 마다 테이블들의 스타일시트들을 생성해줘야 할때가 있다.
귀찮아서 만들어놓은 CSS를 사용하고는 하는데 혹시나 괜찮은 CSS를 찾아보다가 CSS TABLE GALLERY를 찾았다.

CSS하나 하나 다운로드 받아 처리하기 귀찮아서 정리해서 올려본다.

[마크업]

<table summary="This table lists all the flights by XYZ Air leaving London today.">
  <caption>Flight Schedule</caption>
  <thead>
    <tr>
       <th id="fn" scope="col">Flight Number:</th>
      <th id="fr" scope="col">From:</th>
      <th id="to" scope="col">To:</th>
      <th id="dp" scope="col">Departure:</th>
      <th id="ar" scope="col">Arrival:</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="5">Total: 3 flights</td>
    </tr>
  </tfoot>
  <tbody>
  <tr>
    <th scope="row">BA 3451</th>
    <td>Heathrow</td>
    <td>Nuremberg</td>
    <td>19:20</td>
    <td>19:50</td>
  </tr>
  <tr class="odd">
    <th scope="row">BA 1254</th>
    <td>Luton</td>
    <td>Alicante</td>
    <td>19:40</td>
    <td>20:50</td>
  </tr>
  <tr>
    <th scope="row">LH 331</th>
    <td>Heathrow</td>
    <td>Hamburg</td>
    <td>20:00</td>
    <td>20:20</td>
  </tr>
  </tbody>
</table>




[CSS]

table {border-collapse: collapse;border: 1px solid #38160C;font: normal 11px verdana, arial, helvetica, sans-serif;color: #F6ECF0;background: #641B35;}
caption {text-align: left;font: normal 11px verdana, arial, helvetica, sans-serif;background: transparent;}
td, th {border: 1px dashed #B85A7C;padding: .8em;color: #F6ECF0;}
thead th, tfoot th {font: bold 11px verdana, arial, helvetica, sans-serif;border: 1px solid #A85070;;text-align: left;background: #38160C;color: #F6ECF0;padding-top:6px;}
tbody td a {background: transparent;text-decoration: none;color: #F6ECF0;}
tbody td a:hover {background: transparent;color: #FFFFFF;}
tbody th a {font: normal 11px verdana, arial, helvetica, sans-serif;background: transparent;text-decoration: none;font-weight:normal;color: #F6ECF0;}
tbody th a:hover {background: transparent;color: #FFFFFF;}
tbody th, tbody td {vertical-align: top;text-align: left;}
tfoot td {border: 1px solid #38160C;background: #38160C;padding-top:6px;}
.odd {background: #7B2342;}
tbody tr:hover {background: #51152A;}
tbody tr:hover th,
tbody tr.odd:hover th { background: #51152A;}

 

소스다운로드 :




















Table designs
Design Name Author Country Comment Download
Total 98 designs
TagBox TagBox Deutschland Table design based on the fresh TagBox style. Download
Maniac Merchants Marten Willberg Germany A Georgia headline with a green-blue body. Download
Acuity Design Style Acuity Internet Marketing Brazil Black Style, with smooth grey and green elements. Download
Aqua Matthias Richter Germany Have fun! Download
Smooth Taste Thomas Opp Germany Smooth style with my favourite colours. Enjoy! Download
Stainless Steel Stenli Bulagaria Use cellspacing="1" for better feel. Download
Sky is no heaven Michael Schmieding Germany My new Design colors. Download
Foggy Country Straussennest South Africa Foggy Country - Green Trees planted on brown sugared ground. Download
Blue gradient Mihalcea Romeo Romania Nice table design based on a very subtile blue gradient. Download
desert Marc Bodon Germany brown, red, grey and white... simply smooth ;-) Download
orange and grey Christoph Plessner Germany Download
serif my love Frank Schnappenberger Germany A clean and simple table design with serif font Download
REDandBLACK Martin Paffenholz Germany Style like our website. Best viewed in Mozilla Firefox. Download
UV Green Kunimichi Takahashi USA Let me know what you think. Download
BakeSale admin Matti Putkonen Finland Table model used in BakeSale shopping cart admin interface. Download
The OC Rodolfo Marin Chile Table based in the color table from one of my latest design, overclockers.cl Download
blue like ice Erik Ginnerskov Denmark Nice and clean. No fancy stuff. Download
Dark Night Michael Schmieding germany That's my design with my favorite colors. I hope you like it. Download
mediagroove mayumi takami Japan i like this type of design. Download
chives' tables chives Germany Clean and spicy design from chives-team Download
table red-white Jens Germany Inspired by the original 'Assischale' and dedicated to 'Kollesche' ;-) Best wishes to everybody! Download
Candy Stefan Bihl Germany Hi, I hope this CSS File is not to pink ;-) Regards Stefan Download
Simple and Clean Leandro Pessoa Brazil My model! ;) Download
Blue Newton de Góes Horta Brasil Minimalist design in blue Download
Infected Infected-FX Mexico Minimal and clean design for next tutorial, mooflex inspired colors, icons by fam fam fam. ^^ Download
Azulon Joorge Epunan Chile Just playing with the ccode. I like the blue, and how it combines with other elements Looks pretty nice. Download
Casablanca Rodrigo Castilho Galvao Ferreira Brazil Inspired by Casablanca Web Standards Template existing in Template Design Competition, WESTCIV. Download
Salmon Ricardo Aroca Chile Orange colors. Style inspired in salmon, the main product of my city, Puerto Montt. Some advanced selectors (hover, after, before) and properties (content). Best viewed in modern browsers. Download
Clear Blue Robert Hartl Germany It's a clear but individual white-blue design with subdued hover-effects for modern browsers. Download
Blix Theme Newton de G—es Horta Brasil Table design based on Sebastian Schmieg's Blix Theme for Wordpress 2.0. Icons by Kevin Potts Download
iCubed Lar Veale Ireland Nice clean table with small gradient images. Row hover in Firefox gives another gradient effect. Download
Jacob Emiliano ESB Brasil Web Usability useit.com: usable information technology Download
Go Jamaica Hern‡n Argentina Jamaica, A Good place! Download
Poetry For Browser Monika Thon-Soun Austria Code is Poetry. Internet Explorer you can't show us arrows and hover effects. You can't show us correct borders. It looks like that you can't understand poetry. Don't be jealous of browsers. It is simply:Learn to be a browser and everything is going to be alright. Download
Red Body Jarek Karczewski Poland Red Body is my first style. I hope you like it :-) I'll try to do another style, maybe ... Enjoy Download
Like Adwords Cleiton Francisco Brazil A simple style like Google Adwords list. Download
Pretty In Pink Viktor Persson Sweden Smooth, pretty and pink. Best viewed in Mozilla Firefox. Download
Two times table Stu Nicholls England A very basic table for all Internet Explorer users but something VERY different for understanding browsers :o Hope you like it. Download
Brazilian taste DvD Franco Brazil Pleasant design with happy colours, readable data and a bonus: a little effect playing with the caption text and image background. Download
bluish Stefan Herzig Germany Blue style with a hint of Amiga Download
Second Revolution Henrique Costa Pereira Brazil Flexible glass button style. Feel free to resize the font! Download
BluInBlock JuanMa Argentina It is a good blue style that contains block properties with any background images. I hope you like it :) Download
pop.pop.star Timo Wirth Germany Inspired by Andy Warhol, this bold and simple table emphasizes the table rows (rather than the columns). Download
Tabular tables Stu Nicholls England A simple table using a little border art for mouseovers. Download
The Sky Is Blue Eric Pui Malaysia The sky is blue... Download
Sea Glass Stephanie Leary US Subtle and green. Download
Orange Brownie Cody Lindley US Nice idea, the site that is. Download
Blaugrana Choan C. G‡lvez Spain Alternating row and link colors. Enhancements (hover, image replacement) for modern browsers. Download
Soft Table Newton de G—es Horta Brazil A simple table style with the use of the soft brown color Download
Innocent Flowers Christine Kirchmeier Germany Simple, friendly design in blue Download
Shades of Blue Velizar Garvalov Bulgaria Simple blue design with some :hover effects Download
Gmail scrolling Mauricio Samy Silva Brazil A look-alike theme with fixed height for the table container DIV and vertical scroll bar. There is an :hover behavior on caption background image. Download
Shades of Purple Demetrius Francis Bahamas Basic styles with a purple scheme. Download
Turkish Delight Paul Brownsmith UK Raspberry shades with chocolate rollovers for compliant browsers. Clean, clear and choco-sweet. Download
Grayed Out Terence Ordona US A simple look and feel that improves with the quality of your browser's CSS support. Shows possible use of a la Excel styling. Download
Nimbupani Divya Singapore A minimalist style that explores the relative weights of the lines that differentiates one element from the other. The same design elements has also been used on this site http://jflickruploader.blogspot.com Download
Trekkish Violets Patryk Zawadzki Poland Well... a bit trekkish I guess (but not really inspired by holodeck). Blues and violets here and there. Looks best when viewed in Firefox. Download
Golden style Michael Horn Germany Golden coloured style, with hover effects in modern browsers (Firefox, Opera). Download
Oranges In The Sky Krasimir Makaveev Bulgaria Just a simple table design with orange and blue links! Download
Rockstar Jens Wedin Sweden Simple classic design with advanced stuff for standard compliant browsers. Download
Greyscale Two Plus Four UK Minimalist design in black, white and shades of grey. Resizeable text and CCS2 enhancements for those that know. Download
Coffee with milk Roger Johansson Sweden Clean, no-nonsense design with a latte-ish colour palette. Some extra design features in modern browsers. Download
Clean and crisp Mats Lindblad Sweden Clean and Crips table style, with a little MS feel to it. Although it works best in Firefox. Download
classic mitch uk no comment, just some damn good table styling! Download
Winter Blues Gunta Klavina Latvia Blue pastel coloured style. Download
Green Life Vitaly Friedman Germany A Fresh, Warm and Readable Table Download
Breathing Space Kevin Leitch UK Lots of padding on the default design. Contains enhancments for selector-enabled browsers. Download
Warm Fall Mya Leigh USA Warm fall colors with easy to read text. Download
iTunes John Lawrence UK Table design based on Apple's iTunes software. Download
MintGreen Taimar Teetlok Estonia Warm and friendly mint-green presentation. Download
Heaven is Closer Niko Neugebauer Portugal A simple style that improves with the quality of your browser's CSS support Download
Table on a Table C Montoya USA Pastel blue and yellow, and a nifty background. Behaves decently in IE. Images are table_oil2.jpg and table_oil3.jpg. Download
Cygenta Tim Baker Canada Monospaced with a painful palette. Download
Spread Firefox! Thierry Koblentz USA Best experience in Firefox! ;-) Download
Table Sprite Parker Torrence USA This design employs a single graphic for both the caption title and the background effects. Download
Muted Dan Champion Scotland Grey and beige, clean and simple. Minimal use of CSS2 fancy bits like :after and tr:hover. Download
Chocolate Phil Thompson UK A simple table style with a sexy chocolate-inspired colour scheme. Lots of room for the table data to breathe. Download
Smilies AndrŽ Mendona Brasil Green table with alpha transparency, lots of smilies and shadows. Download
Inset cells Mauricio Samy Silva Brazil A table with inset cells and the use of adjacent-sibling selectors and border-spacing propertie for compliants browsers. Download
Shaded Colour Erik A. Drabl¿s Norway Dark table design using alternating link colors. Download
Revolu‹o Etc Henrique Costa Pereira Brazil Nice warm coloured table with small, but resizable, text. Download
Lab Report Louise Dade UK Clear, simple and informative data display for a scientific paper. Includes a background image, download icon and a "faux alpha transparency" rollover effect (a tiny tile with every other pixel transparent). Fully commented CSS file. Download
MSIE hover Mirek Kom‡rek Czech Republic Really simple one with hover in MSIE (using JavaScript via expression()) Download
Kashual Khaki Shane Shepherd USA You'll look great in Kashual Khaki! Be ready for fun when your lookin' snappy in khaki! Download
Orange You Glad Randy Peterman USA There is an image required for standards compliant browsers to get a 'bonus' download arrow for the download links. Download
Matrix? Christian Roque G. Peru using black and green, remove the red and bigger letter. Download
10 minutes Richard Grevers New Zealand Minimalist, using separated borders and spacing with a four-colour pallette. Download
Spearmint tints Ben Boyle AUS Simple coloured style with a minty theme. Download
Table structure Ben Boyle AUS Contrasts headings and cells, displays heading scope and summary (where supported). Download
City Mouse Janie Hadsel USA A tab with image text is placed in the caption background; caption text is hidden, but remains accessible to non-graphical browsers and screen readers. A simple table background image is dressed up by layering a transparent gif placed in the odd table rows. Download
Alpha transparency Mauricio Samy Silva Brazil Simulating alpha transparency with CSS Download
Grey suits you sir Stuart Colville UK Smart grey table with hover effect. Download
Cusco Sky Braulio AndrŽs Soncco Pimentel Perœ Soft blues like Cusco Sky Download
Roll Over from Down Unda Jason M Roehrig AUS A very sophisticated table showing many rollover effects on CSS2-abled browsers Download
Blue On Blue Glenn Slaven AUS A serif font table with a bit of colour to define the cells. Download
Chrome de la chrome Chris Heilmann UK Using gradient backgrounds to create chrome effects Download
Minimalist Chris Heilmann UK As minimal as you can get, only lines around the body cells Download
Plain old table Chris Heilmann UK Tried and true, boring grey table with a one pixel line Download
Post by 넥스트리소프트 데꾸벅(techbug)
, |