テーブルタグの使い方

テーブルタグ（tableタグ）を使って、HTMLで表を作る方法を書いていきます。

画像を使わずに、HTMLで表を書く時に使いましょう。

エクセルをそのままHTMLで表現する時などに便利ですね。

テーブルタグの原理

テーブルタグとは、この様なものです。

表のようにブロックで区切って文字を書く事が出来ます。
テキストリンクにしたり、画像を入れる事だって出来ますね。

基本的に、表を使うために使用するのがテーブルタグというわけです。

「テーブルタグ　使い方」で検索

「テーブルタグ　仕組み」で検索

HTMLの例

HTMLの例として挙げてみますと・・・

<table id="enalist"><tbody><tr>
<td colspan="3"><a href="/blog-entry-311.html">天井狙い目　SLOT LIST</a></td></tr>
<tr>
<td><a href="http://2-9densetsu.com/blog-entry-589.html/">あ 行</a></td>
<td><a href="http://2-9densetsu.com/blog-entry-590.html/">か 行</a></td>
<td><a href="http://2-9densetsu.com/blog-entry-591.html/">さ 行</a></td></tr>
<tr><td><a href="http://2-9densetsu.com/blog-entry-592.html/">た 行</a></td>
<td><a href="http://2-9densetsu.com/blog-entry-593.html/">な 行</a></td>
<td><a href="http://2-9densetsu.com/blog-entry-594.html/">は 行</a></td></tr>
<tr><td><a href="http://2-9densetsu.com/blog-entry-595.html/">ま 行</a></td>
<td colspan="2"><a href="http://2-9densetsu.com/blog-entry-596.html/">や・ら・わ 行</a></td>
</tr></tbody></table>

<style>
#enalist {
 font-size: 15px;
 font-weight: bold;
 background-color: #FFF;
 width: 205px;
}
#enalist td {
 text-align: center;
 border: 1px solid #333;
}
#enalist a {
 display: block;
 padding: 3px 5px;
 background-color: #FFF;
}
#enalist a:hover {
 color: #FFF;
 background: #5AF;
 list-style-type: none;
 text-decoration: none;
}
</style>

↓

…という感じになります。
＜style＞で囲った部分はCSS（装飾）で、このページだけ有効になります。

エクセルからテーブルタグに変換

テーブルタグで表を書くには、基本的に手書きで書く必要性はありません。

エクセルで表を作り、それをコピーする方法が一般的だと思います。

その場合はこちらのツールを使用。

◎エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)

エクセルでコピーしたものをここに貼り付け、自分の好きな形に変換できます。

ワードプレスのビジュアルエディタにコピー

ワードプレスのビジュアルエディタを使うやり方でもOKです。

エクセルで範囲をコピーし、ワードプレスのビジュアルエディタで貼り付ければOK。

ここを参考にどうぞ。
◎[WordPress] ビジュアルエディタならExcelの表を簡単にはりつけ可能