#1. かっこいいテーブルの作成方法

スタートはこんなカンジでしょうか。

HTML は以下のようになります。

<table border="1" cellpadding="0" cellspacing="2">
<tr>
  <td>ドメイン</td>
  <td>リクエスト数</td>
  <td>割合</td>
 </tr>
 <tr>
  <td>.co.jp</td>
  <td>3565</td>
  <td>63.33%</td>
 </tr>
 <tr>
  <td>.com</td>
  <td>949</td>
  <td>30.32%</td>
 </tr>
 <tr>
  <td>[ドメイン名未付与]</td>
  <td>252</td>
  <td>5.50%</td>
  </tr>
</table>

おー、シンプルですね (笑)。

各セルの右寄せ・左寄せ・センタリングなどをいじります。

1行目はテーブル・ヘッダなので「センタリング」にします。2行目からはデータなので、個々にいじります。.co.jp , .com, [ドメイン名未付与] は「文字列」なので右寄せ。 3565, 63.33% などは「数字」なので左寄せにしてみました。まあ、これは一例ですので、自分のテーブル内容をチェックして、適切な位置あわせを選びましょう。

さて、次に、セルに色を付けます。一行ごとに色を交互に入れ替えると見やすいです。一行目はテーブル・ヘッダなので別の色に。

一行目のテーブル・ヘッダの文字が見にくいですね。テキストの色を白に変更した上で、ボールド体に変更。

なかなかよくなりました。さらに見やすくするために、テーブルの枠線幅を 0、セル間隔を1、セル内のマージンを 2 に変更。

セルの間が空いて、ちょっとスカスカした感じですね。 さて、ここからがポイントです。

まず、 1 x 1 セルのテーブルを用意します。見やすいように「ここにあるテーブルです。」と、文字を入れてあります。テーブルの枠線幅を 0、セル間隔を0、セル内のマージンを 0、背景色は、前述のテーブル・ヘッダの背景色と同じにします。

HTML は以下のようになります。

<table border="0" cellpadding="0" cellspacing="0">
 <tr>
   <td bgcolor="#8b0000">
    <font color="white">ここにあるテーブルです。</font>
   </td>
 </tr>
</table>

次に、このテーブルの「中」に先ほどのテーブルを入れます。テーブルの入れ子 (ネスト) になりますね。

念のため、各セルの中で「テキストの折り返し」しないように設定しておきます。

<table border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td bgcolor="#8b0000">
   <table border="0" cellpadding="2" cellspacing="1">
    <tr>
      <td align="center"
       bgcolor="#8b0000"
       nowrapbfont color="#f5f5f5">ドメイン</font></b></td>
      <td align="center"
       bgcolor="#8b0000"
       nowrap><b><font color="#f5f5f5">リクエスト数</font></b></td>
      <td align="center"
       bgcolor="#8b0000"
       nowrap><b><font color="#f5f5f5">割合</font></b></td>
    </tr>
    <tr>
      <td bgcolor="#faf0e6" nowrapa>.co.jp</td>
      <td align="right" bgcolor="#faf0e6" nowrap>3565</td>
      <td align="right" bgcolor="#faf0e6" nowrap>63.33%</td>
    </tr>
    <tr>
      <td bgcolor="#ffe4e1" nowrap>.com</td>
      <td align="right" bgcolor="#ffe4e1" nowrap>949</td>
      <td align="right" bgcolor="#ffe4e1" nowrap>30.32%</td>
    </tr>
    <tr>
      <td bgcolor="#faf0e6" nowrap>[ドメイン名未付与]</td>
      <td align="right" bgcolor="#faf0e6" nowrap>252</td>
      <td align="right" bgcolor="#faf0e6" nowrap>5.50%</td>
    </tr>
   </table>
  </td>
 </tr>
</table>

ヴァリェーションとして、以下のようなカンジにもなります。個人的には、こっちの方が好みですが (縦線は重たいカンジがして嫌いなんですよね)。

以下のように変更したものです。

<table border="0" cellpadding="1" cellspacing="0">
 <tr>
  <td bgcolor="#8b0000">
   <table border="0" cellpadding="2" cellspacing="0">
    <tr>
      <td align="center"
       bgcolor="#8b0000"
       nowrap><b><font color="#f5f5f5">ドメイン</font></b></td>
      <td
       align="center"
       bgcolor="#8b0000"
       nowrap><b><font color="#f5f5f5">リクエスト数</font></b></td>
      <td
       align="center"
       bgcolor="#8b0000"
       nowrap><b><font color="#f5f5f5">割合</font></b></td>
    </tr>
    <tr>
      <td bgcolor="#faf0e6" nowrapa>.co.jp</td>
      <td align="right" bgcolor="#faf0e6" nowrap>3565</td>
      <td align="right" bgcolor="#faf0e6" nowrap>63.33%</td>
    </tr>
    <tr>
      <td bgcolor="#ffe4e1" nowrap>com</td>
      <td align="right" bgcolor="#ffe4e1" nowrap>949</td>
      <td align="right" bgcolor="#ffe4e1" nowrap>30.32%</td>
    </tr>
    <tr>
      <td bgcolor="#faf0e6" nowrap>[ドメイン名未付与]</td>
      <td align="right" bgcolor="#faf0e6" nowrap>252</td>
      <td align="right" bgcolor="#faf0e6" nowrap>5.50%</td>
    </tr>
   </table>
  </td>
</tr>
</table>

お疲れ様です

(^^)大体ここまでできれば、後は細かな色指定などセンスの問題になります。がんばってください。