PHP & JavaScript Room :: 設置サンプル

実行結果

参照:A CSS styled table

Table 1:Power Mac G5 tech specs
Configurations Dual 1.8GHz Dual 2GHz Dual 2.5GHz
Model M9454LL/A M9455LL/A M9457LL/A
G5 Processor Dual 1.8GHz PowerPC G5 Dual 2GHz PowerPC G5 Dual 2.5GHz PowerPC G5
Frontside bus 900MHz per processor 1GHz per processor 1.25GHz per processor
Level2 Cache 512K per processor 512K per processor 512K per processor

ソース

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

polarized women