CSSデザインテーブル
- A CSS styled table〔CSSテーブル(画像使用)〕
- Creating a table with dynamically highlighted columns like Crazy Egg's pricing table〔選択したテーブルの列を動的にハイライト表示するCrazy Egg's 風のテーブル(画像、JavaScript使用)〕
- CSS Table Gallery〔CSSテーブルのデザーンパターン多数〕
- Top 10 CSS Table Designs〔CSSでテーブルをデザインする10の方法〕
- Using CSS to allow scrolling within a single HTML table〔ヘッダ固定でスクロールするテーブル〕
- 表頭固定でスクロールするテーブル
- ナビゲーションメニュー2(ボーダータイプ)
A CSS styled table
CSSテーブル(画像使用)
unknown
Veerle's blogにて、CSSでテーブルをスタイリングするサンプルが2バージョン掲載されています。
A CSS styled table

設置サンプルサンプルを見る
<p>参照:<a href='http://veerle.duoh.com/blog/comments/a_css_styled_table/'>A CSS styled table</a></p> <style type="text/css"> #mytable { width:700px; margin:0 0 0 1px; padding:0; border:0; border-spacing:0; border-collapse:collapse; } caption { padding:0 0 5px 0; font:italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; text-align:right; } th { font:bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color:#4f6b72; border:1px solid #c1dad7; letter-spacing:2px; text-transform:uppercase; text-align:left; padding:6px 6px 6px 12px; background:#cae8ea url(/content/img/css/bg_header.jpg) no-repeat; } th.nobg { border-top:0; border-left:0; background:none; } td { border:1px solid #c1dad7; background:#fff; padding:6px 6px 6px 12px; color:#4f6b72; } td.alt { background:#F5FAFA; color:#797268; } th.spec { background:#fff url(/content/img/css/bullet1.gif) no-repeat; font:bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; } th.specalt { background:#f5fafa url(/content/img/css/bullet2.gif) no-repeat; font:bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color:#797268; } </style> <table id="mytable"> <caption>Table 1:Power Mac G5 tech specs </caption> <tr> <th scope="col" abbr="Configurations" class="nobg">Configurations</th> <th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th> <th scope="col" abbr="Dual 2">Dual 2GHz</th> <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th> </tr> <tr> <th scope="row" abbr="Model" class="spec">Model</th> <td>M9454LL/A</td> <td>M9455LL/A</td> <td>M9457LL/A</td> </tr> <tr> <th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th> <td class="alt">Dual 1.8GHz PowerPC G5</td> <td class="alt">Dual 2GHz PowerPC G5</td> <td class="alt">Dual 2.5GHz PowerPC G5</td> </tr> <tr> <th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th> <td>900MHz per processor</td> <td>1GHz per processor</td> <td>1.25GHz per processor</td> </tr> <tr> <th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th> <td class="alt">512K per processor</td> <td class="alt">512K per processor</td> <td class="alt">512K per processor</td> </tr> </table>
A CSS styled table version 2

設置サンプルサンプルを見る
<p>参照:<a href='http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/'>A CSS styled table version 2</a></p> <style type="text/css"> table img { border:0; margin:.5em; } table { margin:1em 0 1em 1px; padding:0; border:1px solid #e5eff8; border-spacing:0; border-collapse:collapse; } caption { color: #9ba9b4; font-size:.94em; letter-spacing:.1em; margin:1em 0 0 0; padding:0; caption-side:top; text-align:center; } tr.odd td { background:#f7fbff } tr.odd .column1 { background:#f4f9fe; } .column1 { background:#f9fcfe; } td { color:#678197; border-bottom:1px solid #e5eff8; border-left:1px solid #e5eff8; padding:.3em 1em; text-align:center; } th { font-weight:normal; color: #678197; text-align:left; border-bottom: 1px solid #e5eff8; border-left:1px solid #e5eff8; padding:.3em 1em; } thead th { background:#f4f9fe; text-align:center; font:bold 1.2em/2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; color:#66a3d3 } tfoot th { text-align:center; background:#f4f9fe; } tfoot th strong { font:bold 1.2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; margin:.5em .5em .5em 0; color:#66a3d3; } tfoot th em { color:#f03b58; font-weight: bold; font-size: 1.1em; font-style: normal; } </style> <table summary="Webhosting products overview showing all available packages, what's included and what the monthly cost is with an option to order"> <caption>Company X webhosting products overview</caption> <thead> <tr class="odd"> <td class="column1"></td> <th scope="col" abbr="Home">Webhosting Home</th> <th scope="col" abbr="Home Plus">Webhosting Home Plus</th> <th scope="col" abbr="Business">Webhosting Business</th> <th scope="col" abbr="Business Plus">Webhosting Business Plus</th> </tr> </thead> <tfoot> <tr class="odd"> <td class="column1"> </td> <th scope="col"><strong>Webhosting Home</strong><br><em>€ 4,95</em>/ month<br> <a href="#" title="Bestel Web Hosting Home"><img src="/content/img/css/b-order.gif" alt="order now" width="73" height="21" /></a></th> <th scope="col"><strong>Webhosting Home Plus</strong><br><em>€ 9,95 </em>/ month<br> <a href="#" title="Bestel Web Hosting Home Plus"><img src="/content/img/css/b-order.gif" alt="order now" width="73" height="21" /></a></th> <th scope="col"><strong>Webhosting Business</strong><br><em>€14,95</em> / month<br> <a href="#" title="Bestel Web Hosting Business"><img src="/content/img/css/b-order.gif" alt="order now" width="73" height="21" /></a></th> <th scope="col"><strong>Webhosting Business Plus</strong><br><em>€ 19,95</em> / month<br> <a href="#" title="Bestel Web Hosting Business Plus"><img src="/content/img/css/b-order.gif" alt="order now" width="73" height="21" /></a></th> </tr> </tfoot> <tbody> <tr> <th scope="row" class="column1">Data usage</th> <td>1 GB per month</td> <td>2 GB per month</td> <td>5 GB per month</td> <td>10 GB per month</td> </tr> <tr class="odd"> <th scope="row" class="column1">Opslag Capaciteit</th> <td>100 MB</td> <td>250 MB</td> <td>500 MB</td> <td>1 GB</td> </tr> <tr> <th scope="row" class="column1">MySQL Databases</th> <td>1</td> <td>2</td> <td>5</td> <td>10</td> </tr> <tr class="odd"> <th scope="row" class="column1">Email Boxes</th> <td>5</td> <td>10</td> <td>25</td> <td>50</td> </tr> <tr> <th scope="row" class="column1">Email Addresses</th> <td>Unlimited</td> <td>Unlimited</td> <td>Unlimited</td> <td>Unlimited</td> </tr> <tr class="odd"> <th scope="row" class="column1">Spam and Virus filter</th> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> </tr> <tr> <th scope="row" class="column1">Mailinglists</th> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> </tr> <tr class="odd"> <th scope="row" class="column1">Autoresponders</th> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> </tr> <tr> <th scope="row" class="column1">PHP Supportg</th> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> </tr> <tr class="odd"> <th scope="row" class="column1">CGI Support</th> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> </tr> <tr> <th scope="row" class="column1">SSL Support</th> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> </tr> <tr class="odd"> <th scope="row" class="column1">DNS Management</th> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> </tr> <tr> <th scope="row" class="column1">Error Documents</th> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> </tr> <tr class="odd"> <th scope="row" class="column1">Secure Folders</th> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> </tr> <tr> <th scope="row" class="column1">Statistics</th> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> <td><img src="images/icon-check.gif" alt="included" width="16" height="16" /></td> </tr> </tbody> </table>
Creating a table with dynamically highlighted columns like Crazy Egg's pricing table
選択したテーブルの列を動的にハイライト表示するCrazy Egg's 風のテーブル(画像、JavaScript使用)
unknown
Using CSS to allow scrolling within a single HTML table
Opera 7+、Mozilla 1+、IE 6+、Mac Safari 1+、Konqueror 3+
下図のCrazy Egg'sの価格表のように、CSSとJavaScriptでテーブルの列を動的にハイライト表示する方法が掲載されています。

【CHOOSE】ボタンをクリックすると、クリックしたプランが左にハイライト表示され、右サイドに送信フォームが表示されます。 送信フォームの【CANCEL】ボタンをクリックすると、元の価格表に戻り、クリックしたプランがハイライト表示されます。 フォームの表示、非表示、およびハイライト表示の有無にはJavaScriptを使用しています。

設置サンプルサンプルを見る
<!-- CSS --> <style type="text/css"> a img { border:0; vertical-align:text-bottom; } table { border:0; border-collapse:collapse; border-spacing:0; margin:0; padding:0; } th.side { background:transparent url(/content/img/css/crazyegg/bg_th_side.gif) no-repeat bottom left; } td.side { text-align:right; background:transparent url(/content/img/css/crazyegg/bg_td_side.gif) no-repeat bottom left; width:180px; color:#6e6f37; padding-right:8px; } th { height:64px; border-right:1px solid #fff; vertical-align:bottom; color:#fff; text-align:center; font:normal 21px/34px verdana; letter-spacing:2px; background:transparent url(/content/img/css/crazyegg/bg_th.gif) no-repeat bottom left; } td { text-align:center; background:transparent url(/content/img/css/crazyegg/bg_td.gif) no-repeat bottom left; border-right:1px solid #fff; color:#fff; width:108px; height:40px; font:bold 12px/18px verdana; } td.on { width:150px; background:transparent url(/content/img/css/crazyegg/bg_td_on.gif) no-repeat bottom left; } th.on { width:150px; background:transparent url(/content/img/css/crazyegg/bg_th_on.gif) no-repeat bottom left; padding-bottom:9px; width:148px; } tfoot td { background:transparent url(/content/img/css/crazyegg/bg_foot_td.gif) no-repeat top left; height:64px; vertical-align:top; padding-top:8px; } tfoot td.on { background:transparent url(/content/img/css/crazyegg/bg_foot_td_on.gif) no-repeat top left; padding-top:16px; } tfoot td.side { background:transparent url(/content/img/css/crazyegg/bg_foot_td_side.gif) no-repeat top left; } #formcontainer { width:443px; height:239px; background:transparent url(/content/img/css/crazyegg/bg_form.gif) no-repeat top left; position:absolute; top:24px; left:341px; } #formcontainer form { padding:8px 10px; margin:0; } #formcontainer h2 { margin:0; padding:0 0 14px 0; font:bold 21px/27px arial; color:#fff; background:none; border:0; } #formcontainer fieldset { border:none; padding:0; } #formcontainer label { display:block; float:left; font:bold 12px/18px verdana; color:#fff; padding-bottom:12px; } #formcontainer label.email { width:350px; } #formcontainer label.email input { width:340px; } #formcontainer label.password { clear:left; padding-right:40px; } #formcontainer label.password input, #formcontainer label.retype input { width:150px; } #formcontainer fieldset.buttons { padding-top:10px; clear:left; } #prices { position:relative; } </style> <!-- because ie is a little different with its positioning... --> <!--[if lte IE 8]> <style type="text/css"> #formcontainer { top:34px; } </style> <![endif]--> <!-- JS --> <script type="text/javascript"> /* For functions getElementsByClassName, addClassName, and removeClassName Copyright Robert Nyman, http://www.robertnyman.com Free to use if this text is included */ function getElementsByClassName(className, tag, elm){ var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)"); var tag = tag || "*"; var elm = elm || document; var elements = (tag == "*" && elm.all)? elm.all :elm.getElementsByTagName(tag); var returnElements = []; var current; var length = elements.length; for(var i=0; i<length; i++){ current = elements[i]; if(testClass.test(current.className)){ returnElements.push(current); } } return returnElements; } function addClassName(elm, className){ var currentClass = elm.className; if(!new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i").test(currentClass)){ elm.className = currentClass + ((currentClass.length > 0)? " " :"") + className; } return elm.className; } function removeClassName(elm, className){ var classToRemove = new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i"); elm.className = elm.className.replace(classToRemove, "").replace(/^\s+|\s+$/g, ""); return elm.className; } function hasClass(el, c) { if (!el || !el.className.length) return; var bits = el.className.split(' '), has = false; for (var j = 0; j < bits.length; j++) if (bits[j] === c) has = true; return has; } function activateThisColumn(column) { var table = document.getElementById('pricetable'); var form = document.getElementById('formcontainer'); /* まず、すべての他のth要素からonクラスを削除 */ var ths = table.getElementsByTagName('th'); for (var g=0; g<ths.length; g++) { removeClassName(ths[g], 'on'); if (!hasClass(ths[g],'side')) { ths[g].style.display = 'none'; } } /* 次に、すべての他のtd要素からonクラスを削除 */ var tds = table.getElementsByTagName('td'); for (var m=0; m<tds.length; m++) { removeClassName(tds[m], 'on'); if (!hasClass(tds[m],'side')) { tds[m].style.display = 'none'; } } /* 選択したth要素にonクラスを追加 */ var newths = getElementsByClassName(column, 'th', table); for (var h=0; h<newths.length; h++) { addClassName(newths[h], 'on'); newths[h].style.display = ''; /* not all browsers like display = 'block' for cells */ } /* 選択したtd要素にonクラスを追加 */ var newtds = getElementsByClassName(column, 'td', table); for (var i=0; i<newtds.length; i++) { addClassName(newtds[i], 'on'); newtds[i].style.display = ''; /* not all browsers like display = 'block' for cells */ } /* フォームを表示 */ form.style.display = 'block'; } function hideTheForm() { /* フォームを取得 */ var form = document.getElementById('formcontainer'); /* フォームを隠す */ form.style.display = 'none'; /* 隠されているテーブルのセルを取得し、それらを再び表示 */s var table = document.getElementById('pricetable'); var tds = table.getElementsByTagName('td'); for (var i=0; i<tds.length; i++) { tds[i].style.display = ''; } var ths = table.getElementsByTagName('th'); for (var k=0; k<ths.length; k++) { ths[k].style.display = ''; } } </script> <!-- HTML --> <div id="prices"> <div id="formcontainer" style="display:none;"> <form action="#"> <h2>Get an account!</h2> <fieldset> <label for="email" class="email"> Email<br> <input id="email" type="text" /> </label> <label for="crazypassword" class="password"> Password<br> <input id="crazypassword" type="password" /> </label> <label for="retype" class="retype"> Retype Password<br> <input id="retype" type="password" /> </label> </fieldset> <fieldset class="buttons"> <input type="image" alt="Cancel" src="/content/img/css/crazyegg/button_cancel.gif" onclick="hideTheForm();return false;" /> <input type="image" alt="Submit" src="/content/img/css/crazyegg/button_submit.gif" onclick="return false;" /> </fieldset> </form> </div><!-- #formcontainer --> <table id="pricetable"> <thead> <tr> <th class="side"> </th> <th class="choiceA">$1000</th> <th class="choiceB">$100</th> <th class="choiceC on">$10</th> <th class="choiceD">$1</th> <th class="choiceE">Free</th> </tr> </thead> <tfoot> <tr> <td class="side"> </td> <td class="choiceA"><a href="#" onclick="activateThisColumn('choiceA');return false;"><img src="/content/img/css/crazyegg/choose.gif" alt="Choose" /></a></td> <td class="choiceB"><a href="#" onclick="activateThisColumn('choiceB');return false;"><img src="/content/img/css/crazyegg/choose.gif" alt="Choose" /></a></td> <td class="choiceC on"><a href="#" onclick="activateThisColumn('choiceC');return false;"><img src="/content/img/css/crazyegg/choose.gif" alt="Choose" /></a></td> <td class="choiceD"><a href="#" onclick="activateThisColumn('choiceD');return false;"><img src="/content/img/css/crazyegg/choose.gif" alt="Choose" /></a></td> <td class="choiceE"><a href="#" onclick="activateThisColumn('choiceE');return false;"><img src="/content/img/css/crazyegg/choose.gif" alt="Choose" /></a></td> </tr> </tfoot> <tbody> <tr> <td class="side">Number of quarters</td> <td class="choiceA">4,000</td> <td class="choiceB">400</td> <td class="choiceC on">40</td> <td class="choiceD">4</td> <td class="choiceE">None</td> </tr> <tr> <td class="side">Number of zeros</td> <td class="choiceA">3 zeros</td> <td class="choiceB">2 zeros</td> <td class="choiceC on">1 zero</td> <td class="choiceD">No zeros</td> <td class="choiceE">None</td> </tr> <tr> <td class="side">Checks on this row</td> <td class="choiceA"><img src="/content/img/css/crazyegg/check.png" alt="yes" /></td> <td class="choiceB"><img src="/content/img/css/crazyegg/check.png" alt="yes" /></td> <td class="choiceC on"><img src="/content/img/css/crazyegg/check.png" alt="yes" /></td> <td class="choiceD"><img src="/content/img/css/crazyegg/check.png" alt="yes" /></td> <td class="choiceE"> </td> </tr> <tr> <td class="side">Checks on another row</td> <td class="choiceA"><img src="/content/img/css/crazyegg/check.png" alt="yes" /></td> <td class="choiceB"><img src="/content/img/css/crazyegg/check.png" alt="yes" /></td> <td class="choiceC on"> </td> <td class="choiceD"> </td> <td class="choiceE"> </td> </tr> </tbody> </table><!-- #pricetable --> </div><!-- #price -->
CSS Table Gallery
CSSテーブルのデザーンパターン多数
unknown
CSSテーブルのデザーンパターンが派手なものから、シンプルなものまで多数掲載されています。 デザイン名のリンクをクリックすると、そのデザインのCSSが適用され、デモを見ることができます。
Cusco Sky

設置サンプルサンプルを見る
<p>参照:CSS Table Gallery - <a href='http://icant.co.uk/csstablegallery/index.php?css=73#r73'>Infected</a></p> <!-- CSS --> <style type="text/css"> /* Cusco Sky table styles written by Braulio Soncco http://www.buayacorp.com */ table { border-collapse:collapse; color:#555; width:99%; margin:0 0 0 1px; font-size:12px; } table, th, td { border:1px solid #d4e0ee; color:#555; } caption { font-size:150%; font-weight:bold; margin:5px; } td, th { padding:5px; } thead th { text-align:center; background:#e6edf5; color:#4f76a3; font-size:100% !important; } tbody th { font-weight:bold; } tbody tr { background:#fcfdfe; } tbody tr.odd { background:#f7f9fc; } table a:link { color:#718abe; text-decoration:none; } table a:visited { color:#718abe; text-decoration:none; } table a:hover { color:#718abe; text-decoration:underline !important; } tfoot th, tfoot td { font-size:85%; } </style> <!-- HTML --> <div id="itsthetable"> <table summary="Submitted table designs"> <caption>Table designs</caption> <thead> <tr> <th scope="col">Design Name</th> <th scope="col">Author</th> <th scope="col">Country</th> <th scope="col">Comment</th> <th scope="col">Download</th> </tr> </thead> <tfoot> <tr> <th scope="row">Total</th> <td colspan="4">5 designs</td> </tr> </tfoot> <tbody> <tr> <th scope="row" id="r5"><a href="#">Design Name5</a></th> <td><a href="">Link</a></td> <td>User5</td> <td>Description.</td> <td><a href="#">Link</a></td> </tr> <tr class="odd"> <th scope="row" id="r4"><a href="#">Design Name4</a></th> <td><a href="">Link</a></td> <td>User4</td> <td>Description.</td> <td><a href="#">Link</a></td> </tr> <tr> <th scope="row" id="r3"><a href="#">Design Name3</a></th> <td><a href="">Link</a></td> <td>User3</td> <td>Description.</td> <td><a href="#">Link</a></td> </tr> <tr class="odd"> <th scope="row" id="r2"><a href="#">Design Name2</a></th> <td><a href="">Link</a></td> <td>User2</td> <td>Description.</td> <td><a href="#">Link</a></td> </tr> <tr> <th scope="row" id="r1"><a href="#">Design Name1</a></th> <td><a href="">Link</a></td> <td>User1</td> <td>Description.</td> <td><a href="#">Link</a></td> </tr> </tbody> </table> </div>
Infected

設置サンプルサンプルを見る
<p>参照:CSS Table Gallery - <a href='http://icant.co.uk/csstablegallery/index.php?css=73#r73'>Infected</a></p> <!-- CSS --> <style type="text/css"> /* Theme:inphecthyuz Author:Infected-FX URL:www.infectedfx.net Country:Mexico */ table { border-spacing:1px; font-size:10px; background-color:#e7e7e7; color:#b7b7b7; width:100%; } caption { font-weight:bold; background:#50adea url(/content/img/css/css_table_gallery/corner.gif) no-repeat right top; border-bottom:2px solid #1975d7; color:#fff; text-transform:uppercase; padding:10px; } td, th { padding:5px; line-height:1.5; } thead th { text-align:center; background:#f5f5f5; color:#666; border:1px solid #fff; text-transform:uppercase; } tbody th { font-weight:bold; } tbody tr { background-color:#fff; text-align:left; } tbody tr.odd { background:#f9f9f9; border-top:1px solid #fff; } tbody th a:link, tbody th a:visited{ color:#96d030; background:url(/content/img/css/css_table_gallery/layout.gif) no-repeat left center; padding-left:18px; } tbody th a:hover { color:#ff8601; } tbody tr td { height:40px; background:#fff; border:1px solid #fff; } tbody tr.odd td { background:#f9f9f9; border-top:1px solid #fff; } table td a:link, table td a:visited { color:#1975d7; text-decoration:none; } table td a:hover { color:#50adea; border-bottom:2px solid #8fd5ff; text-decoration:none ; } tbody td a[href="http://www.infectedfx.net"] { margin:0 auto; height:15px; background:url(/content/img/css/css_table_gallery/ok.gif) no-repeat left center; border-bottom:0; padding-left:18px; font-weight:bold; color:#ff8601; } table a[title^="Download"] { background:url(/content/img/css/css_table_gallery/down.gif) no-repeat center; padding:20px 0px 0px 15px; } tfoot th, tfoot td { background-color:#e7e7e7; text-align:center; font-size:1.2em; font-weight:bold; font-style:italic; border-bottom:3px solid #ccc; border-top:1px solid #dfdfdf; } </style> <!-- HTML --> <div id="itsthetable"> <table summary="Submitted table designs"> <caption>Table designs</caption> <thead> <tr> <th scope="col">Design Name</th> <th scope="col">Author</th> <th scope="col">Country</th> <th scope="col">Comment</th> <th scope="col">Download</th> </tr> </thead> <tfoot> <tr> <th scope="row">Total</th> <td colspan="4">5 designs</td> </tr> </tfoot> <tbody> <tr> <th scope="row" id="r5"><a href="#">Design Name5</a></th> <td><a href="">Link</a></td> <td>User5</td> <td>Description.</td> <td><a href="#">Link</a></td> </tr> <tr class="odd"> <th scope="row" id="r4"><a href="#">Design Name4</a></th> <td><a href="">Link</a></td> <td>User4</td> <td>Description.</td> <td><a href="#">Link</a></td> </tr> <tr> <th scope="row" id="r3"><a href="#">Design Name3</a></th> <td><a href="">Link</a></td> <td>User3</td> <td>Description.</td> <td><a href="#">Link</a></td> </tr> <tr class="odd"> <th scope="row" id="r2"><a href="#">Design Name2</a></th> <td><a href="">Link</a></td> <td>User2</td> <td>Description.</td> <td><a href="#">Link</a></td> </tr> <tr> <th scope="row" id="r1"><a href="#">Design Name1</a></th> <td><a href="">Link</a></td> <td>User1</td> <td>Description.</td> <td><a href="#">Link</a></td> </tr> </tbody> </table> </div>
mintgreen

設置サンプルサンプルを見る
<p>参照:CSS Table Gallery - <a href='http://icant.co.uk/csstablegallery/index.php?css=28#r28'>mintgreen</a></p> <!-- CSS --> <style type="text/css"> /************************************************** * Data Tables and Cascading Style Sheets Gallery * * http://icant.co.uk/csstablegallery/index.php * * -------------------------------------------- * * Author: Taimar Teetlok > http://taimar.pri.ee/ * **************************************************/ table { width:100%; color:#212424; margin:0 0 1em 0; font:80%/150% "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Lucida, Helvetica, sans-serif; border-spacing:0; border-collapse:collapse; } th, td { padding:1em 0; } caption { width:100%; height:39px; font-size:0; line-height:0; text-indent:-5000em; background: url(/content/img/css/css_table_gallery/caption.gif) no-repeat 98% 0; } caption:hover { background-position:98% 100%; } /* HEADER */ thead { background:#524123; } thead tr th { text-align:center; color:#faf7d4; border-bottom:3px solid #A5D768; } /* FOOTER */ tfoot { color:#fff; background:#524123; } tfoot tr th, tfoot tr td { padding:.2em .6em; border-top:2px solid #a5d768; } tfoot tr th { } tfoot tr td { text-align:right; } /* BODY */ tbody tr td { background:#ddf0bd url(/content/img/css/css_table_gallery/bg_cell.gif) no-repeat top left; } tbody tr.odd td { background-color:#d0eba6; } tbody tr td:hover, tbody tr.odd td:hover { background:#c5e894; } tbody tr th, tbody tr td { padding:5px; border:1px solid #a6ce39; } tbody tr th { padding-right:1em; text-align:right; font-weight:normal; background:#c5e894 url(/content/img/css/css_table_gallery/bg_cell.gif) no-repeat top left; text-transform:uppercase; } tbody tr th:hover { background:#d0eba6; } table a[href*="taimar.pri.ee"] { float:left; width:64px; height:64px; font-size:0; text-decoration:none; background:transparent url(http://taimar.pri.ee/examples/table-design/taimar.gif) no-repeat 0 0; } table a[title^="Download"] { float:none; width:auto; height:auto; font-size:100%; background:none; } /* LINKS */ table a { color:#854400!important; text-decoration:none; } table a:visited { text-decoration:line-through; } table a:hover { text-decoration:underline; } </style> <!-- HTML --> <div id="itsthetable"> <table summary="Submitted table designs"> <caption>Table designs</caption> <thead> <tr> <th scope="col">Design Name</th> <th scope="col">Author</th> <th scope="col">Country</th> <th scope="col">Comment</th> <th scope="col">Download</th> </tr> </thead> <tfoot> <tr> <th scope="row">Total</th> <td colspan="4">5 designs</td> </tr> </tfoot> <tbody> <tr> <th scope="row" id="r5"><a href="#">Design Name5</a></th> <td><a href="">Link</a></td> <td>User5</td> <td>Description.</td> <td><a href="#">Link</a></td> </tr> <tr class="odd"> <th scope="row" id="r4"><a href="#">Design Name4</a></th> <td><a href="">Link</a></td> <td>User4</td> <td>Description.</td> <td><a href="#">Link</a></td> </tr> <tr> <th scope="row" id="r3"><a href="#">Design Name3</a></th> <td><a href="">Link</a></td> <td>User3</td> <td>Description.</td> <td><a href="#">Link</a></td> </tr> <tr class="odd"> <th scope="row" id="r2"><a href="#">Design Name2</a></th> <td><a href="">Link</a></td> <td>User2</td> <td>Description.</td> <td><a href="#">Link</a></td> </tr> <tr> <th scope="row" id="r1"><a href="#">Design Name1</a></th> <td><a href="">Link</a></td> <td>User1</td> <td>Description.</td> <td><a href="#">Link</a></td> </tr> </tbody> </table> </div>
rockstar

設置サンプルサンプルを見る
<p>参照:CSS Table Gallery - <a href='http://icant.co.uk/csstablegallery/index.php?css=38#r38'>rockstar</a></p> <!-- CSS --> <style type="text/css"> /* Rockstar 0.91 Table design by Jens Wedin, www.jedisthlm.com */ table {font:100%/1.7em "trebuchet ms", "bitstream vera sans", verdana, helvetica, sans-serif; width:100%; border-collapse:separate; border-spacing:0; margin:0 0 1em 0; color:#000;} a {color:#09f; text-decoration:none; border-bottom:1px solid;} a:visited {color:#c3c; font-weight:normal;} a:hover {border-bottom-style:dotted;} thead th, thead td {font-weight:bold; line-height:normal; text-align:left; border-bottom:0.4em solid #09f;} tfoot th, tfoot td {text-align:left; border-top:0.4em solid #09f; font-weight:bold} th, td {padding:0.25em;} tbody th, td {text-align:left; vertical-align:top;} tbody th {font-weight:normal; white-space:nowrap;} tbody th a:link, tbody th a:visited {font-weight:bold;} tbody th + td {white-space:nowrap;} tbody td, tbody th {border:1px solid #fff; border-width:1px 0;} tbody tr.odd th, tbody tr.odd td {border-color:#deded8; background:#f9f9fb;} tbody tr:hover td, tbody tr:hover th {background:#fbfbf8;} caption {font-weight:bold; font-size:1.7em; text-align:left; margin:0; padding:0.5em 0.25em;} td + td + td + td {white-space:nowrap;} td + td + td + td a:before {content:"\2193 ";} a[href^="http://"]:not([href*="http://icant.co.uk"])::after {content:"\2197"; } td + td + td + td a[href^="http://"]:not([href*="http://icant.co.uk"])::after {content:""; } </style> <!-- HTML --> <div id="itsthetable"> <table summary="Submitted table designs"> <caption>Table designs</caption> <thead> <tr> <th scope="col">Design Name</th> <th scope="col">Author</th> <th scope="col">Country</th> <th scope="col">Comment</th> <th scope="col">Download</th> </tr> </thead> <tfoot> <tr> <th scope="row">Total</th> <td colspan="4">5 designs</td> </tr> </tfoot> <tbody> <tr> <th scope="row" id="r5"><a href="#">Design Name5</a></th> <td><a href="">Link</a></td> <td>User5</td> <td>Description.</td> <td><a href="#">Link</a></td> </tr> <tr class="odd"> <th scope="row" id="r4"><a href="#">Design Name4</a></th> <td><a href="">Link</a></td> <td>User4</td> <td>Description.</td> <td><a href="#">Link</a></td> </tr> <tr> <th scope="row" id="r3"><a href="#">Design Name3</a></th> <td><a href="">Link</a></td> <td>User3</td> <td>Description.</td> <td><a href="#">Link</a></td> </tr> <tr class="odd"> <th scope="row" id="r2"><a href="#">Design Name2</a></th> <td><a href="">Link</a></td> <td>User2</td> <td>Description.</td> <td><a href="#">Link</a></td> </tr> <tr> <th scope="row" id="r1"><a href="#">Design Name1</a></th> <td><a href="">Link</a></td> <td>User1</td> <td>Description.</td> <td><a href="#">Link</a></td> </tr> </tbody> </table> </div>
Top 10 CSS Table Designs
CSSでテーブルをデザインする10の方法
unknown
Top 10 CSS Table Designs
CSSでテーブルの見た目をスタイリングする10のサンプルが掲載されています。

設置サンプルサンプルを見る
<p>参照:<a href='http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/'>Top 10 CSS Table Designs</a></p>
<style type="text/css">
/* 共通 */
table { border:0; border-spacing:0; border-collapse:collapse; width:100%; background:#fff; }
th,td { font-size:12px; margin:0; padding:0; line-height:1.5; font-weight:normal; padding:8px; }
th { font-size:14px; }
</style>
<h2>Horizontal Minimalist</h2>
<style type="text/css">
#hor-minimalist-a { }
#hor-minimalist-a th { color:#039; padding:10px 8px; border-bottom:2px solid #6678b1; }
#hor-minimalist-a td { color:#669; padding:9px 8px 0px 8px; }
#hor-minimalist-a tbody tr:hover td { color:#009; }
</style>
<table id="hor-minimalist-a">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Salary</th>
<th scope="col">Bonus</th>
<th scope="col">Supervisor</th>
</tr>
</thead>
<tbody>
<tr><td>Stephen C. Cox</td><td>$300</td><td>$50</td><td>Bob</td></tr>
<tr><td>Josephin Tan</td><td>$150</td><td>-</td><td>Annie</td></tr>
<tr><td>Joyce Ming</td><td>$200</td><td>$35</td><td>Andy</td></tr>
<tr><td>James A. Pentel</td><td>$175</td><td>$25</td><td>Annie</td></tr>
</tbody>
</table>
<h2>Vertical Minimalist</h2>
<style type="text/css">
#hor-minimalist-b { }
#hor-minimalist-b th { color:#039; padding:10px 8px; border-bottom:2px solid #6678b1; }
#hor-minimalist-b td { border-bottom:1px solid #ccc; color:#669; padding:6px 8px; }
#hor-minimalist-b tbody tr:hover td { color:#009; }
</style>
<table id="hor-minimalist-b">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Salary</th>
<th scope="col">Bonus</th>
<th scope="col">Supervisor</th>
</tr>
</thead>
<tbody>
<tr><td>Stephen C. Cox</td><td>$300</td><td>$50</td><td>Bob</td></tr>
<tr><td>Josephin Tan</td><td>$150</td><td>-</td><td>Annie</td></tr>
<tr><td>Joyce Ming</td><td>$200</td><td>$35</td><td>Andy</td></tr>
<tr><td>James A. Pentel</td><td>$175</td><td>$25</td><td>Annie</td></tr>
</tbody>
</table>
<h2>Box</h2>
<style type="text/css">
#ver-minimalist { }
#ver-minimalist th { padding:8px 2px; border-bottom:2px solid #6678b1; border-right:30px solid #fff; border-left:30px solid #fff; color:#039; }
#ver-minimalist td { padding:12px 2px 0px 2px; border-right:30px solid #fff; border-left:30px solid #fff; color:#669; }
</style>
<table id="ver-minimalist">
<thead>
<tr>
<th scope="col">Comedy</th>
<th scope="col">Adventure</th>
<th scope="col">Action</th>
<th scope="col">Children</th>
</tr>
</thead>
<tbody>
<tr><td>Scary Movie</td><td>Indiana Jones</td><td>The Punisher</td><td>Wall-E</td></tr>
<tr><td>Epic Movie</td><td>Star Wars</td><td>Bad Boys</td><td>Madagascar</td></tr>
<tr><td>Spartan</td><td>LOTR</td><td>Die Hard</td><td>Finding Nemo</td></tr>
<tr><td>Dr. Dolittle</td><td>The Mummy</td><td>300</td><td>A Bug's Life</td></tr>
</tbody>
</table>
<br>
<style type="text/css">
#box-table-a { }
#box-table-a th { font-size:13px; background:#b9c9fe; border-top:4px solid #aabcfe; border-bottom:1px solid #fff; color:#039; }
#box-table-a td { background:#e8edff; border-bottom:1px solid #fff; color:#669; border-top:1px solid transparent; }
#box-table-a tr:hover td { background:#d0dafd; color:#339; }
</style>
<table id="box-table-a">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Salary</th>
<th scope="col">Bonus</th>
<th scope="col">Supervisor</th>
</tr>
</thead>
<tbody>
<tr><td>Stephen C. Cox</td><td>$300</td><td>$50</td><td>Bob</td></tr>
<tr><td>Josephin Tan</td><td>$150</td><td>-</td><td>Annie</td></tr>
<tr><td>Joyce Ming</td><td>$200</td><td>$35</td><td>Andy</td></tr>
<tr><td>James A. Pentel</td><td>$175</td><td>$25</td><td>Annie</td></tr>
</tbody>
</table>
<br>
<style type="text/css">
#box-table-b { text-align:center; border-top:7px solid #9baff1; border-bottom:7px solid #9baff1; }
#box-table-b th { font-size:13px; background:#e8edff; border-right:1px solid #9baff1; border-left:1px solid #9baff1; color:#039; }
#box-table-b td { background:#e8edff; border-right:1px solid #aabcfe; border-left:1px solid #aabcfe; color:#669; }
</style>
<table id="box-table-b">
<thead>
<tr>
<th scope="col">Comedy</th>
<th scope="col">Adventure</th>
<th scope="col">Action</th>
<th scope="col">Children</th>
</tr>
</thead>
<tbody>
<tr><td>Scary Movie</td><td>Indiana Jones</td><td>The Punisher</td><td>Wall-E</td></tr>
<tr><td>Epic Movie</td><td>Star Wars</td><td>Bad Boys</td><td>Madagascar</td></tr>
<tr><td>Spartan</td><td>LOTR</td><td>Die Hard</td><td>Finding Nemo</td></tr>
<tr><td>Dr. Dolittle</td><td>The Mummy</td><td>300</td><td>A Bug's Life</td></tr>
</tbody>
</table>
<h2>Horizontal Zebra</h2>
<style type="text/css">
#hor-zebra { }
#hor-zebra th { padding:10px 8px; color:#039; }
#hor-zebra td { color:#669; }
#hor-zebra .odd { background:#e8edff; }
</style>
<table id="hor-zebra">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Salary</th>
<th scope="col">Bonus</th>
<th scope="col">Supervisor</th>
</tr>
</thead>
<tbody>
<tr class="odd"><td>Stephen C. Cox</td><td>$300</td><td>$50</td><td>Bob</td></tr>
<tr><td>Josephin Tan</td><td>$150</td><td>-</td><td>Annie</td></tr>
<tr class="odd"><td>Joyce Ming</td><td>$200</td><td>$35</td><td>Andy</td></tr>
<tr><td>James A. Pentel</td><td>$175</td><td>$25</td><td>Annie</td></tr>
</tbody>
</table>
<h2>Vertical Zebra Style</h2>
<style type="text/css">
#ver-zebra { }
#ver-zebra th { padding:12px 15px; border-right:1px solid #fff; border-left:1px solid #fff; color:#039; }
#ver-zebra td { padding:8px 15px; border-right:1px solid #fff; border-left:1px solid #fff; color:#669; }
.vzebra-odd { background:#eff2ff; }
.vzebra-even { background:#e8edff; }
#ver-zebra #vzebra-adventure,
#ver-zebra #vzebra-children { background:#d0dafd; border-bottom:1px solid #c8d4fd; }
#ver-zebra #vzebra-comedy,
#ver-zebra #vzebra-action { background:#dce4ff; border-bottom:1px solid #d6dfff; }
</style>
<table id="ver-zebra">
<colgroup>
<col class="vzebra-odd" />
<col class="vzebra-even" />
<col class="vzebra-odd" />
<col class="vzebra-even" />
</colgroup>
<thead>
<tr>
<th scope="col" id="vzebra-comedy">Comedy</th>
<th scope="col" id="vzebra-adventure">Adventure</th>
<th scope="col" id="vzebra-action">Action</th>
<th scope="col" id="vzebra-children">Children</th>
</tr>
</thead>
<tbody>
<tr><td>Scary Movie</td><td>Indiana Jones</td><td>The Punisher</td><td>Wall-E</td></tr>
<tr><td>Epic Movie</td><td>Star Wars</td><td>Bad Boys</td><td>Madagascar</td></tr>
<tr><td>Spartan</td><td>LOTR</td><td>Die Hard</td><td>Finding Nemo</td></tr>
<tr><td>Dr. Dolittle</td><td>The Mummy</td><td>300</td><td>A Bug's Life</td></tr>
</tbody>
</table>
<h2>One Column Emphasis</h2>
<style type="text/css">
#one-column-emphasis { }
#one-column-emphasis th { padding:12px 15px; color:#039; }
#one-column-emphasis td { padding:10px 15px; color:#669; border-top:1px solid #e8edff; }
.oce-first { background:#d0dafd; border-right:10px solid transparent; border-left:10px solid transparent; }
#one-column-emphasis tr:hover td { color:#339; background:#eff2ff; }
</style>
<table id="one-column-emphasis">
<colgroup>
<col class="oce-first" />
</colgroup>
<thead>
<tr>
<th scope="col">Company</th>
<th scope="col">Q1</th>
<th scope="col">Q2</th>
<th scope="col">Q3</th>
<th scope="col">Q4</th>
</tr>
</thead>
<tbody>
<tr><td>Microsoft</td><td>20.3</td><td>30.5</td><td>23.5</td><td>40.3</td></tr>
<tr><td>Google</td><td>50.2</td><td>40.63</td><td>45.23</td><td>39.3</td></tr>
<tr><td>Apple</td><td>25.4</td><td>30.2</td><td>33.3</td><td>36.7</td></tr>
<tr><td>IBM</td><td>20.4</td><td>15.6</td><td>22.3</td><td>29.3</td></tr>
</tbody>
</table>
<h2>Newspaper</h2>
<style type="text/css">
#newspaper-a { border:1px solid #69c; }
#newspaper-a th { padding:12px 17px 12px 17px; color:#039; border-bottom:1px dashed #69c; }
#newspaper-a td { padding:7px 17px 7px 17px; color:#669; }
#newspaper-a tbody tr:hover td { color:#339; background:#d0dafd; }
</style>
<table id="newspaper-a">
<thead>
<tr>
<th scope="col">Company</th>
<th scope="col">Q1</th>
<th scope="col">Q2</th>
<th scope="col">Q3</th>
<th scope="col">Q4</th>
</tr>
</thead>
<tbody>
<tr><td>Microsoft</td><td>20.3</td><td>30.5</td><td>23.5</td><td>40.3</td></tr>
<tr><td>Google</td><td>50.2</td><td>40.63</td><td>45.23</td><td>39.3</td></tr>
<tr><td>Apple</td><td>25.4</td><td>30.2</td><td>33.3</td><td>36.7</td></tr>
<tr><td>IBM</td><td>20.4</td><td>15.6</td><td>22.3</td><td>29.3</td></tr>
</tbody>
</table>
<br>
<style type="text/css">
#newspaper-b { border:1px solid #69c; }
#newspaper-b th { padding:15px 10px 10px 10px; color:#039; }
#newspaper-b tbody { background:#e8edff; }
#newspaper-b td { padding:10px; color:#669; border-top:1px dashed #fff; }
#newspaper-b tbody tr:hover td { color:#339; background:#d0dafd; }
</style>
<table id="newspaper-b">
<thead>
<tr>
<th scope="col">Company</th>
<th scope="col">Q1</th>
<th scope="col">Q2</th>
<th scope="col">Q3</th>
<th scope="col">Q4</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5"><em>The above data were fictional and made up, please do not sue me</em></td>
</tr>
</tfoot>
<tbody>
<tr><td>Microsoft</td><td>20.3</td><td>30.5</td><td>23.5</td><td>40.3</td></tr>
<tr><td>Google</td><td>50.2</td><td>40.63</td><td>45.23</td><td>39.3</td></tr>
<tr><td>Apple</td><td>25.4</td><td>30.2</td><td>33.3</td><td>36.7</td></tr>
<tr><td>IBM</td><td>20.4</td><td>15.6</td><td>22.3</td><td>29.3</td></tr>
</tbody>
</table>
<br>
<style type="text/css">
#newspaper-c { border:1px solid #6cf; }
#newspaper-c th { padding:20px; font-size:13px; color:#039; text-transform:uppercase; border-right:1px solid #0865c2; border-top:1px solid #0865c2; border-left:1px solid #0865c2; border-bottom:1px solid #fff; }
#newspaper-c td { padding:10px 20px; color:#669; border-right:1px dashed #6cf; }
</style>
<table id="newspaper-c">
<thead>
<tr>
<th scope="col">Favorite</th>
<th scope="col">Great</th>
<th scope="col">Nice</th>
<th scope="col">Bad</th>
</tr>
</thead>
<tbody>
<tr><td>Passion of the Christ</td><td>Bourne Ultimatum</td><td>Shoot 'Em Up</td><td>Ali</td></tr>
<tr><td>The Big Fish</td><td>The Mummy</td><td>Apocalypto</td><td>Monster</td></tr>
<tr><td>Shawshank Redemption</td><td>Cold Mountain</td><td>Indiana Jones</td><td>Dead or Alive</td></tr>
<tr><td>Greatest Story Ever Told</td><td>I Am Legend</td><td>Star Wars</td><td>Saw 3</td></tr>
</tbody>
</table>
<h2>Rounded Corner</h2>
<style type="text/css">
#rounded-corner { }
#rounded-corner thead th.rounded-company { background:#b9c9fe url(/content/img/css/table-images/left.png) left -1px no-repeat; }
#rounded-corner thead th.rounded-q4 { background:#b9c9fe url(/content/img/css/table-images/right.png) right -1px no-repeat; }
#rounded-corner th { font-size:13px; color:#039; background:#b9c9fe; }
#rounded-corner td { background:#e8edff; border-top:1px solid #fff; color:#669; }
#rounded-corner tfoot td.rounded-foot-left { background:#e8edff url(/content/img/css/table-images/botleft.png) left bottom no-repeat; }
#rounded-corner tfoot td.rounded-foot-right { background:#e8edff url(/content/img/css/table-images/botright.png) right bottom no-repeat; }
#rounded-corner tbody tr:hover td { background:#d0dafd; }
</style>
<table id="rounded-corner">
<thead>
<tr>
<th scope="col" class="rounded-company">Company</th>
<th scope="col" class="rounded-q1">Q1</th>
<th scope="col" class="rounded-q2">Q2</th>
<th scope="col" class="rounded-q3">Q3</th>
<th scope="col" class="rounded-q4">Q4</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4" class="rounded-foot-left"><em>The above data were fictional and made up, please do not sue me</em></td>
<td class="rounded-foot-right"> </td>
</tr>
</tfoot>
<tbody>
<tr><td>Microsoft</td><td>20.3</td><td>30.5</td><td>23.5</td><td>40.3</td></tr>
<tr><td>Google</td><td>50.2</td><td>40.63</td><td>45.23</td><td>39.3</td></tr>
<tr><td>Apple</td><td>25.4</td><td>30.2</td><td>33.3</td><td>36.7</td></tr>
<tr><td>IBM</td><td>20.4</td><td>15.6</td><td>22.3</td><td>29.3</td></tr>
</tbody>
</table>
<h2>Table Background</h2>
<style type="text/css">
#background-image { background:url(/content/img/css/table-images/blurry.jpg) right 39px no-repeat; }
#background-image th { padding:12px; color:#339; }
#background-image td { padding:9px 12px; color:#669; border-top:1px solid #fff; }
#background-image tfoot td { font-size:11px; }
#background-image tbody td { background:url(/content/img/css/table-images/back.png); }
* html #background-image tbody td {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='table-images/back.png',sizingMethod='crop');
background:none;
}
#background-image tbody tr:hover td { color:#339; background:none; }
</style>
<table id="background-image">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Division</th>
<th scope="col">Suggestions</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">IE 6 users won't see the transparent background if the hack is not applied</td>
</tr>
</tfoot>
<tbody>
<tr><td>Stephen C. Cox</td><td>Marketing</td><td>Make discount offers</td></tr>
<tr><td>Josephin Tan</td><td>Advertising</td><td>Give bonuses</td></tr>
<tr><td>Joyce Ming</td><td>Marketing</td><td>New designs</td></tr>
<tr><td>James A. Pentel</td><td>Marketing</td><td>Better Packaging</td></tr>
</tbody>
</table>
<h2>Cell Background</h2>
<style type="text/css">
#gradient-style { }
#gradient-style th { font-size:13px; background:#b9c9fe url(/content/img/css/table-images/gradhead.png) repeat-x; border-top:2px solid #d3ddff; border-bottom:1px solid #fff; color:#039; }
#gradient-style td { border-bottom:1px solid #fff; color:#669; border-top:1px solid #fff; background:#e8edff url(/content/img/css/table-images/gradback.png) repeat-x; }
#gradient-style tfoot tr td { background:#e8edff; font-size:12px; color:#99c; }
#gradient-style tbody tr:hover td { background:#d0dafd url(/content/img/css/table-images/gradhover.png) repeat-x; color:#339; }
</style>
<table id="gradient-style">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Division</th>
<th scope="col">Suggestions</th>
<th scope="col">Rating</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">Give background color to the table cells to achieve seamless transition</td>
</tr>
</tfoot>
<tbody>
<tr><td>Stephen C. Cox</td><td>Marketing</td><td>Make discount offers</td><td>3/10</td></tr>
<tr><td>Josephin Tan</td><td>Advertising</td><td>Give bonuses</td><td>5/10</td></tr>
<tr><td>Joyce Ming</td><td>Marketing</td><td>New designs</td><td>8/10</td></tr>
<tr><td>James A. Pentel</td><td>Marketing</td><td>Better Packaging</td><td>8/10</td></tr>
</tbody>
</table>
<br>
<style type="text/css">
#pattern-style-a { background:url(/content/img/css/table-images/pattern.png); }
#pattern-style-a thead tr { background:url(/content/img/css/table-images/pattern-head.png); }
#pattern-style-a th { font-size:13px; border-bottom:1px solid #fff; color:#039; }
#pattern-style-a td { border-bottom:1px solid #fff; color:#669; border-top:1px solid transparent; }
#pattern-style-a tbody tr:hover td { color:#339; background:#fff; }
</style>
<table id="pattern-style-a">
<thead>
<tr>
<th scope="col">Employee</th>
<th scope="col">Salary</th>
<th scope="col">Bonus</th>
<th scope="col">Supervisor</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen C. Cox</td>
<td>$300</td>
<td>$50</td>
<td>Bob</td>
</tr>
<tr>
<td>Josephin Tan</td>
<td>$150</td>
<td>-</td>
<td>Annie</td>
</tr>
<tr>
<td>Joyce Ming</td>
<td>$200</td>
<td>$35</td>
<td>Andy</td>
</tr>
<tr>
<td>James A. Pentel</td>
<td>$175</td>
<td>$25</td>
<td>Annie</td>
</tr>
</tbody>
</table>
<br>
<style type="text/css">
#pattern-style-b {
background:transparent url(/content/img/css/table-images/patternb.png) repeat 0 0;
}
#pattern-style-b thead tr {
background:transparent url(/content/img/css/table-images/patternb-head.png) repeat 0 0;
}
#pattern-style-b th {
font-size:13px;
border-bottom:1px solid #fff;
color:#039;
}
#pattern-style-b td {
border-bottom:1px solid #fff;
color:#669;
border-top:1px solid transparent;
}
#pattern-style-b tbody tr:hover td {
color:#339;
background:#cdcdee;
}
</style>
<table id="pattern-style-b">
<thead>
<tr>
<th scope="col">Nation</th>
<th scope="col">Capital</th>
<th scope="col">Language</th>
<th scope="col">Unique</th>
</tr>
</thead>
<tbody>
<tr>
<td>Japan</td>
<td>Tokyo</td>
<td>Japanese</td>
<td>Karate</td>
</tr>
<tr>
<td>South Korea</td>
<td>Seoul</td>
<td>Korean</td>
<td>Ginseng</td>
</tr>
<tr>
<td>China</td>
<td>Beijing</td>
<td>Mandarin</td>
<td>Kung-Fu</td>
</tr>
<tr>
<td>Indonesia</td>
<td>Jakarta</td>
<td>Indonesian</td>
<td>Batik</td>
</tr>
</tbody>
</table>
Using CSS to allow scrolling within a single HTML table
ヘッダ固定でスクロールするテーブル
unknown
Using CSS to allow scrolling within a single HTML table
>Opera 7+、Mozilla 1+、IE 6+、Mac Safari 1+、Konqueror 3+
ヘッダ(thead要素)固定で、縦方向にスクロール可能なテーブルを作成する方法が掲載されています。 テーブルの行をストライプにする部分は、JavaScriptを使用しています。

設置サンプルサンプルを見る
<p>参照:<a href='http://www.imaputz.com/cssStuff/bigFourVersion.html'>Using CSS to allow scrolling within a single HTML table</a></p> <style type="text/css"> table { border:0; border-spacing:0; border-collapse:collapse; width:100%; } table, td, a { color: #000; } /* define height and width of scrollable area. Add 16px to width for scrollbar */ div.tableContainer { clear: both; border: 1px solid #963; height: 285px; overflow: auto; width: 756px } /* Reset overflow value to hidden for all non-IE browsers. */ html>body div.tableContainer { overflow: hidden; width: 756px } /* define width of table. IE browsers only */ div.tableContainer table { float: left; width: 740px } /* define width of table. Add 16px to width for scrollbar. */ /* All other non-IE browsers. */ html>body div.tableContainer table { width: 756px } /* set table header to a fixed position. WinIE 6.x only */ /* In WinIE 6.x, any element with a position property set to relative and is a child of */ /* an element that has an overflow property set, the relative value translates into fixed. */ /* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */ thead.fixedHeader tr { position: relative } /* set THEAD element to have block level attributes. All other non-IE browsers */ /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */ html>body thead.fixedHeader tr { display: block } /* make the TH elements pretty */ thead.fixedHeader th { background: #C96; border-left: 1px solid #EB8; border-right: 1px solid #B74; border-top: 1px solid #EB8; font-weight: normal; padding: 4px 3px; text-align: left } /* make the A elements pretty. makes for nice clickable headers */ thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited { color: #FFF; display: block; text-decoration: none; width: 100% } /* make the A elements pretty. makes for nice clickable headers */ /* WARNING: swapping the background on hover may cause problems in WinIE 6.x */ thead.fixedHeader a:hover { color: #FFF; display: block; text-decoration: underline; width: 100% } /* define the table content to be scrollable */ /* set TBODY element to have block level attributes. All other non-IE browsers */ /* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */ /* induced side effect is that child TDs no longer accept width: auto */ html>body tbody.scrollContent { display: block; height: 262px; overflow: auto; width: 100% } /* make TD elements pretty. Provide alternating classes for striping the table */ /* http://www.alistapart.com/articles/zebratables/ */ tbody.scrollContent td, tbody.scrollContent tr.normalRow td { background: #FFF; border-bottom: none; border-left: none; border-right: 1px solid #CCC; border-top: 1px solid #DDD; padding: 2px 3px 3px 4px } tbody.scrollContent tr.alternateRow td { background: #EEE; border-bottom: none; border-left: none; border-right: 1px solid #CCC; border-top: 1px solid #DDD; padding: 2px 3px 3px 4px } /* define width of TH elements: 1st, 2nd, and 3rd respectively. */ /* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */ /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */ html>body thead.fixedHeader th { width: 200px } html>body thead.fixedHeader th + th { width: 240px } html>body thead.fixedHeader th + th + th { width: 316px } /* define width of TD elements: 1st, 2nd, and 3rd respectively. */ /* All other non-IE browsers. */ /* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */ html>body tbody.scrollContent td { width: 200px } html>body tbody.scrollContent td + td { width: 240px } html>body tbody.scrollContent td + td + td { width: 300px } </style> <script type="text/javascript"> /* テーブルの行をストライプにする */ function removeClassName (elem, className) { elem.className = elem.className.replace(className, "").trim(); } function addCSSClass (elem, className) { removeClassName (elem, className); elem.className = (elem.className + " " + className).trim(); } String.prototype.trim = function() { return this.replace( /^\s+|\s+$/, "" ); } function stripedTable() { if (document.getElementById && document.getElementsByTagName) { var allTables = document.getElementsByTagName('table'); if (!allTables) { return; } for (var i = 0; i < allTables.length; i++) { if (allTables[i].className.match(/[\w\s ]*scrollTable[\w\s ]*/)) { var trs = allTables[i].getElementsByTagName("tr"); for (var j = 0; j < trs.length; j++) { removeClassName(trs[j], 'alternateRow'); addCSSClass(trs[j], 'normalRow'); } for (var k = 0; k < trs.length; k += 2) { removeClassName(trs[k], 'normalRow'); addCSSClass(trs[k], 'alternateRow'); } } } } } window.onload = function() { stripedTable(); } </script> <div id="tableContainer" class="tableContainer"> <table class="scrollTable"> <thead class="fixedHeader"> <tr> <th><a href="#">Header 1</a></th> <th><a href="#">Header 2</a></th> <th><a href="#">Header 3</a></th> </tr> </thead> <tbody class="scrollContent"> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr> <tr> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>And Repeat 3</td> </tr> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr> <tr> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>And Repeat 3</td> </tr> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr> <tr> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>And Repeat 3</td> </tr> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr> <tr> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>And Repeat 3</td> </tr> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr> <tr> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>And Repeat 3</td> </tr> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr> <tr> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>And Repeat 3</td> </tr> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr> <tr> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>And Repeat 3</td> </tr> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr> <tr> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>And Repeat 3</td> </tr> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr> <tr> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>And Repeat 3</td> </tr> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr> <tr> <td>And Repeat 1</td> <td>And Repeat 2</td> <td>And Repeat 3</td> </tr> <tr> <td>Cell Content 1</td> <td>Cell Content 2</td> <td>Cell Content 3</td> </tr> <tr> <td>More Cell Content 1</td> <td>More Cell Content 2</td> <td>More Cell Content 3</td> </tr> <tr> <td>Even More Cell Content 1</td> <td>Even More Cell Content 2</td> <td>Even More Cell Content 3</td> </tr> <tr> <td>End of Cell Content 1</td> <td>End of Cell Content 2</td> <td>End of Cell Content 3</td> </tr> </tbody> </table> </div>
表頭固定でスクロールするテーブル
unknown
テーブルの表頭部分(th要素)を固定して、項目部分(td要素)をスクロールさせています。 ポイントは、右端のtd要素に「スクロールバー部分のスペース確保」することと、td要素内のdiv要素に「white-space:nowrap」と「widthプロパティ」を指定すること。 これがないと激しくズレます。
<style type="text/css"> /* テーブル大枠 */ .thfixscroll{ margin:10px; padding:0; } .thfixscroll table { border-collapse:collapse; border-spacing:0px; border:1px solid #ccc; } /* 表頭・項目部分 */ .thfixscroll th { margin:0; padding:0; background-color:#f7f7f7; border:1px solid #ccc; } .thfixscroll td { margin:0; padding:0; border:1px solid #ccc; background-color:#fff; } /* 表頭・項目部分の余白 */ .thfixscroll div { margin:3px; } /* 表頭の背景色・余白 */ .thfixscroll div.inbox { margin:0 0 0 0; padding:0; overflow:auto; height:100px; } .thfixscroll div.w20 { width:20px; } .thfixscroll div.w40 { width:40px; } .thfixscroll div.w100 { width:100px; } .thfixscroll div.w200 { width:200px; } </style> <div class="thfixscroll"> <table> <tr> <th><div class="w40">順位</div></th> <th><div class="w200">ユーザーOS</div></th> <th><div class="w100">割合</div></th> <th><div class="w100">アクセス数</div></th> <th><div class="w20"><!-- スクロール部分の余白 --></div></th> </tr> <tr> <td colspan="5" class="none"> <div class="inbox"> <table> <tr> <td><div class="w40">1</div></td> <td><div class="w200">Windows XP</div></td> <td><div class="w100">76.2%</div></td> <td><div class="w100">59,918</div></td> </tr> <tr><td><div>2</div></td><td><div>Windows 2000</div></td><td><div>15.3%</div></td><td><div>12,056</div></td></tr> <tr><td><div>3</div></td><td><div>Macintosh</div></td><td><div>4.8%</div></td><td><div>3,847</div></td></tr> <tr><td><div>4</div></td><td><div>Windows 98</div></td><td><div>0.8%</div></td><td><div>704</div></td></tr> <tr><td><div>5</div></td><td><div>Linux</div></td><td><div>0.8%</div></td><td><div>696</div></td></tr> <tr><td><div>6</div></td><td><div>Windows ME</div></td><td><div>0.6%</div></td><td><div>474</div></td></tr> <tr><td><div>7</div></td><td><div>Windows NT 5.2</div></td><td><div>0.5%</div></td><td><div>396</div></td></tr> <tr><td><div>8</div></td><td><div>-AskJeevesJapan</div></td><td><div>0.2%</div></td><td><div>176</div></td></tr> <tr><td><div>9</div></td><td><div>Windows 3.x</div></td><td><div>0.1%</div></td><td> </td></tr> <tr><td><div>10</div></td><td><div>Windows NT</div></td><td><div>0.1%</div></td><td><div>101</div></td></tr> <tr><td><div>*</div></td><td><div>その他少数派(57件)</div></td><td><div>0.2%</div></td><td><div>175</div></td></tr> </table> </div> </td> </tr> </table> </div>
順位 |
ユーザーOS |
割合 |
アクセス数 |
|||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
ナビゲーションメニュー2(ボーダータイプ)
unknown