TOP  »  スタイルシート(CSS)  »  テーブル

CSSデザイン
テーブル

A CSS styled table
CSSテーブル(画像使用)

データなし

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("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("img/css/bullet1.gif") no-repeat;
    font:bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
    background:#f5fafa url("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">&nbsp;</td>
        <th scope="col"><strong>Webhosting Home</strong><br /><em>&#8364; 4,95</em>/ month<br />
        <a href="#" title="Bestel Web Hosting Home"><img src="img/css/b-order.gif" alt="order now" width="73" height="21" /></a></th>
        <th scope="col"><strong>Webhosting Home Plus</strong><br /><em>&#8364; 9,95 </em>/ month<br />
        <a href="#" title="Bestel Web Hosting Home Plus"><img src="img/css/b-order.gif" alt="order now" width="73" height="21" /></a></th>
        <th scope="col"><strong>Webhosting Business</strong><br /><em>&#8364;14,95</em> / month<br />
        <a href="#" title="Bestel Web Hosting Business"><img src="img/css/b-order.gif" alt="order now" width="73" height="21" /></a></th>
        <th scope="col"><strong>Webhosting Business Plus</strong><br /><em>&#8364; 19,95</em> / month<br />
        <a href="#" title="Bestel Web Hosting Business Plus"><img src="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使用)

データなし

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("img/css/crazyegg/bg_th_side.gif") no-repeat bottom left;
}
td.side {
    text-align:right;
    background:transparent url("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("img/css/crazyegg/bg_th.gif") no-repeat bottom left;
}
td {
    text-align:center;
    background:transparent url("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("img/css/crazyegg/bg_td_on.gif") no-repeat bottom left;
}
th.on {
    width:150px;
    background:transparent url("img/css/crazyegg/bg_th_on.gif") no-repeat bottom left;
    padding-bottom:9px;
    width:148px;
}
tfoot td {
    background:transparent url("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("img/css/crazyegg/bg_foot_td_on.gif") no-repeat top left;
    padding-top:16px;
}
tfoot td.side {
    background:transparent url("img/css/crazyegg/bg_foot_td_side.gif") no-repeat top left;
}
#formcontainer {
    width:443px;
    height:239px;
    background:transparent url("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="img/css/crazyegg/button_cancel.gif"
                    onclick="hideTheForm();return false;" />
                <input
                    type="image"
                    alt="Submit"
                    src="img/css/crazyegg/button_submit.gif"
                    onclick="return false;" />
            </fieldset>
        </form>
    </div><!-- #formcontainer -->
    <table id="pricetable">
        <thead>
            <tr>
                <th class="side">&nbsp;</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">&nbsp;</td>
                <td class="choiceA"><a href="signUpChoiceA.html" onclick="activateThisColumn('choiceA');return false;"><img src="img/css/crazyegg/choose.gif" alt="Choose" /></a></td>
                <td class="choiceB"><a href="signUpChoiceB.html" onclick="activateThisColumn('choiceB');return false;"><img src="img/css/crazyegg/choose.gif" alt="Choose" /></a></td>
                <td class="choiceC on"><a href="signUpChoiceC.html" onclick="activateThisColumn('choiceC');return false;"><img src="img/css/crazyegg/choose.gif" alt="Choose" /></a></td>
                <td class="choiceD"><a href="signUpChoiceD.html" onclick="activateThisColumn('choiceD');return false;"><img src="img/css/crazyegg/choose.gif" alt="Choose" /></a></td>
                <td class="choiceE"><a href="signUpChoiceE.html" onclick="activateThisColumn('choiceE');return false;"><img src="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="img/css/crazyegg/check.png" alt="yes" /></td>
                <td class="choiceB"><img src="img/css/crazyegg/check.png" alt="yes" /></td>
                <td class="choiceC on"><img src="img/css/crazyegg/check.png" alt="yes" /></td>
                <td class="choiceD"><img src="img/css/crazyegg/check.png" alt="yes" /></td>
                <td class="choiceE">&nbsp;</td>
            </tr>
            <tr>
                <td class="side">Checks on another row</td>
                <td class="choiceA"><img src="img/css/crazyegg/check.png" alt="yes" /></td>
                <td class="choiceB"><img src="img/css/crazyegg/check.png" alt="yes" /></td>
                <td class="choiceC on">&nbsp;</td>
                <td class="choiceD">&nbsp;</td>
                <td class="choiceE">&nbsp;</td>
            </tr>
        </tbody>
    </table><!-- #pricetable -->
</div><!-- #price -->
このページの先頭へ

データなし

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("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("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("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("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("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("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("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の方法

データなし

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('img/css/table-images/left.png') left -1px no-repeat; }
    #rounded-corner thead th.rounded-q4 { background:#b9c9fe url('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('img/css/table-images/botleft.png') left bottom no-repeat; }
    #rounded-corner tfoot td.rounded-foot-right { background:#e8edff url('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">&nbsp;</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('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('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('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('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('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('img/css/table-images/pattern.png'); }
#pattern-style-a thead tr { background:url('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('img/css/table-images/patternb.png') repeat 0 0;
}
#pattern-style-b thead tr {
    background:transparent url('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
ヘッダ固定でスクロールするテーブル

データなし

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>
このページの先頭へ

表頭固定でスクロールするテーブル

データなし

テーブルの表頭部分(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>&nbsp;</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
割合
アクセス数
1
Windows XP
76.2%
59,918
2
Windows 2000
15.3%
12,056
3
Macintosh
4.8%
3,847
4
Windows 98
0.8%
704
5
Linux
0.8%
696
6
Windows ME
0.6%
474
7
Windows NT 5.2
0.5%
396
8
-AskJeevesJapan
0.2%
176
9
Windows 3.x
0.1%
 
10
Windows NT
0.1%
101
*
その他少数派(57件)
0.2%
175
このページの先頭へ

ナビゲーションメニュー2(ボーダータイプ)

データなし

このページの先頭へ
Q. このサイトの情報はお役に立ちましたでしょうか?

     

投票する | 投票結果を見る | 管理人に【web拍手】を送る web拍手(1行メッセージも送れます♪)

1契約で容量を気にせず複数サイトを運営するなら、ヘテムルがおすすめ!

ヘテムル」は、国内最大級の個人向けホスティングサービス『ロリポップ!レンタルサーバー』を運営する株式会社paperboy&co.の提供する大容量・高機能のレンタルサーバー。

独自ドメイン50個、データベース10個までを、追加費用無料で設定できます。
しかも、サーバー容量は余裕の10GB

動画配信・音源配信・ポッドキャスティングなど、Flash、音楽、動画ファイル等をふんだんに使って、自由にWEBサイトを表現することが可能です。 また、マルチドメイン、マルチデータベース、共有SSLなどサイト運営に大変便利な機能や、FlashMediaServer、ColdFusionなど他にはないユニークな機能を搭載。 もちろん、MovableTypeやWordPress、Xoopsといった各種webアプリケーション、CGI、 Perl、PHP4、PHP5、Rubyなどの各種開発言語にも対応しています。

実際にファイルをアップしたりできる15日間のお試し期間があるので、借りてから「サイトを移植してみたらプログラムが動かなかったー(><)」なんてことにはなりません♪