CSSデザインテーブル

<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">&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(/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>