このページについて
このページではHTMLで使えるtableタグを使った表の作成をするために必要な、tableタグ/trタグ/tdタグの生成を行うことができるページです。
使い方
まず以下の行数とセル数をマウスクリックで数値指定します。行数は横の1行で1つのブロックとなるため、2つのブロックが必要なら2とします。
セル数は1行の中に入れるセル数を指定します。1行の中に3つのセルを生成する必要がある場合、3と指定します。
その後、テーブル作成のボタンをクリックします。するとそれぞれの数値を読み取ってtableタグが生成されます。
以下は表の完成見本です。当サイトのCSSが色々と付与されているため、色などは後から付与してあげてください。
以下がtableタグのコードになります。
tableの簡単な解説について
tableタグはHTMLで表を作成する時に使えるタグになります。中にはthタグ・tdタグ・trタグ・theadタグ・tbodyタグ・tfootタグなどを使用してtableの中身を構成していきますが、この生成ページではまだtrとtdにしか対応していません。時期に対応できたら更新したいなと思います。
そしてセルを統合するcolspan属性、rowspan属性を使用してそれぞれのセルを合体させることもできます。これまた未対応なので、後からご自身で付与してセルの統合を行ってみてください。
tableのサンプル
以下はこのコード生成ページで作れるものと、色々と付け足せば作れるテーブルをいくつかコードとともに掲載しておきます。
シンプルな3*3のテーブル
<table>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>thタグでヘッダーを使用しつつ、colspan属性でセルの統合を使用したテーブル
<table>
<tr><th colspan="3"></th></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>theadタグ、tbodyタグ、tfootタグを使用したテーブル
<table>
<thead><tr><th colspan="2"></th></tr></thead>
<tbody>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</tbody>
<tfoot>
<tr><td></td><td></td></tr>
</tfoot>
</table>rowspan属性を使用して縦のセル統合をしたテーブル
<table>
<tr><td rowspan="2"></td><td></td></tr>
<tr><td></td></tr>
</table>最後に
Javascriptの勉強もかねて色々とやってみましたが、まだ色々と足りていない機能の方が多いので実装出来次第更新していきたいと思っています。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。