テーブルタグ生成ツール

テーブルのHTMLタグを生成できるツールです。
表の列・行数の設定やサイズの設定、背景色などテーブルの基本的なデザインに関する設定をすることができます。

ブログやサイト制作の際にご活用いただく事ができます。

テーブルの設定

  • 列・行の設定 ?
    表の列・行数の設定をする事ができます。
    最大20列、100行まで設定することができます。

  • 背景色の設定 ?
    表全体、セルの背景色を指定する事ができます。
    カラーコード（16進数）を直接指定するか、カラーパレットにて指定ができます。

  • 全体の高さ・幅の設定 ?
    表全体の高さ、幅の設定をする事ができます。
    ピクセルまたは％で設定できます。

  • 文字揃えの設定 ?
    セル内の文字の配置（横・縦）の設定ができます。

  • 枠線・余白の設定 ?
    表の枠線の設定や、余白の設定ができます。

    pixel
    pixel
    pixel

  • 見出しの設定 ?
    表の見出しの位置や背景色、文字の太さ設定ができます。

プレビュー

プレビューのセルをドラッグして、セルの結合・分割を設定することができます。
選択したセルを
※結合したセルを再結合する場合は、
一度分割してから結合してください。

HTML+CSS

HTML

CSS

利用上の注意

このツールはJavaScriptで作成されているため、JavaScriptが動作しない環境では使用できませんので
ご了承ください。

プレビューにて各種設定の表示を確認することができます。
ご希望の表示になったら、HTML及びCSSにコードを出力し、ご自身のサイトやブログにてご使用ください。

HTMLファイルとCSSファイルを分割している場合はそれぞれのコードで出力することができますが、
HTMLファイルに一括している場合は【全てHTMLで出力】で、
全てのコードをまとめて出力する事ができます。

各項目で設定された内容は、ご利用のサイトやブログの環境によって反映されない場合があります。
その場合は、ご利用サイトまたはブログの設定をご確認ください。

「プレビューへのリアルタイム反映を無効にする」にチェックを入れると、
【プレビュー更新】を押すまではプレビューに反映されないので、
ブラウザでの表示負荷が少し軽くなります。