Table
maker
テーブルビルダーとデザイナーは無料で使用できる使いやすいサイトです。テーブルデータを挿入してデザインを編集します。
シンプルな
カスタム
上級
言語
English
Arabic - العربية
Chinese - 中文
Spanish - Español
Japanese - 日本人
German - Deutsche
Russian - русский
French - français
Indian - भारतीय
Portuguese - Português
Turkish - Türkçe
シンプルなデザイン
テーブルカラー
青い
緑
グレー
オレンジ
褐色
ブラック
色なし
塗りつぶし
ヘッダーと行
ヘッダーのみ
何もない
ホバー時のテーブル行の強調表示
デザインをカスタマイズ
背景色
メインカラー
タイトルの背景
行の背景
行の2色
その上にマウスを置くと
行の背景
セルの背景
ボーダーのプロパティ
境界
ボーダの色
ボーダースタイル
固体
破線
点在
ダブル
溝
海嶺
はめ込み
最初
幅
ボーダー半径
スケジュール
細胞
フォントカラー
テキストのプロパティ
テーブル方向
右から左に
左から右へ
オート
ヘッダーテキスト
フォントファミリー
デフォルトのフォント
Arial
Roboto
Times New Roman
Times
Courier New
Courier
Verdana
Georgia
Palatino
Garamond
Bookman
Comic Sans MS
Candara
Arial Black
Impact
Open Sans
Pangolin
Russo One
Lobster
Antic Slab
Bebas Neue
Comfortaa
Exo 2
Shadows Into Light
Do Hyeon
Monda
Fredoka One
Righteous
Caveat
Maven Pro
Rajdhani
Bangers
Architects Daughter
Kalam
Great Vibes
Patrick Hand
フォントサイズ
テキストの配置
正しい
左
センター
デフォルト
フォントカラー
カーソルが通過したとき
セルテキスト
フォントファミリー
デフォルトのフォント
Arial
Roboto
Times New Roman
Times
Courier New
Courier
Verdana
Georgia
Palatino
Garamond
Bookman
Comic Sans MS
Candara
Arial Black
Impact
Open Sans
Pangolin
Russo One
Lobster
Antic Slab
Bebas Neue
Comfortaa
Exo 2
Shadows Into Light
Do Hyeon
Monda
Fredoka One
Righteous
Caveat
Maven Pro
Rajdhani
Bangers
Architects Daughter
Kalam
Great Vibes
Patrick Hand
フォントサイズ
テキストの配置
正しい
左
センター
デフォルト
フォントカラー
カーソルが通過したとき
保存する
ランダムスタイル
保存したスタイルを表示
スタイルオプション
モード
固定ヘッダー
垂直および水平のハイライト
バージョン
馬の睡眠
V 1.0
V 2.0
V 3.0
V 4.0
V 5.0
テーブル方向
右から左に
左から右へ
オート
幅と高さ
幅
px
%
高さ
最初の列の幅
px
表のテキスト
テスト
テーブルの塗りつぶし
高度な編集
テーブル構造
テーブルセルにプレースホルダー情報を追加する
カラム
行
以下の表内のセルに入力してください。
×
見出しを配置する
上
側
見出しなし
セル間のセパレーター
,
،
TAB
","
|
距離
カスタムセパレーター
カスタムセパレーター
テーブルを一時的に保存します
削除する
保存されたテーブル
注：
このページを終了すると、保存されているすべてのテーブルが削除されます。
×
プレビュー
プレビュー
注：
テーブルのサイズがプレビュー用に指定されたサイズより大きいです！ 新しいタブでプレビューしてください。
新しいタブでプレビュー
テーブルからテキストを削除
コード
コピーする
コンパクトCSS
コンパクトhtml
<table class="awtable"> <thead> <tr> <th contenteditable="true">Header 1</th> <th contenteditable="true">Header 2</th> <th contenteditable="true">Header 3</th> </tr> </thead> <tbody> <tr> <td contenteditable="true"><br></td> <td contenteditable="true"><br></td> <td contenteditable="true"><br></td> </tr> <tr> <td contenteditable="true"><br></td> <td contenteditable="true"><br></td> <td contenteditable="true"><br></td> </tr> <tr> <td contenteditable="true"><br></td> <td contenteditable="true"><br></td> <td contenteditable="true"><br></td> </tr> <tr> <td contenteditable="true"><br></td> <td contenteditable="true"><br></td> <td contenteditable="true"><br></td> </tr> </tbody> </table>
<div class="wrap-table100"> <div class="table100 ver3 m-b-110"> <div class="table100-head"> <table> <thead> <tr class="row100 head"> <th contenteditable="true" class="cell100 column1">Header 1</th> <th contenteditable="true" class="cell100 column2">Header 2</th> <th contenteditable="true" class="cell100 column3">Header 3</th> <th contenteditable="true" class="cell100 column4">Header 4</th> </tr> </thead> </table> </div> <div class="table100-body js-pscroll"> <table> <tbody> <tr class="row100 body"> <td contenteditable="true" class="cell100 column1">cell 1</td> <td contenteditable="true" class="cell100 column2">cell 2</td> <td contenteditable="true" class="cell100 column3">cell 3</td> <td contenteditable="true" class="cell100 column4">cell 4</td> </tr> <tr class="row100 body"> <td contenteditable="true" class="cell100 column1"><br /></td> <td contenteditable="true" class="cell100 column2"><br /></td> <td contenteditable="true" class="cell100 column3"><br /></td> <td contenteditable="true" class="cell100 column4"><br /></td> </tr> <tr class="row100 body"> <td contenteditable="true" class="cell100 column1"><br /></td> <td contenteditable="true" class="cell100 column2"><br /></td> <td contenteditable="true" class="cell100 column3"><br /></td> <td contenteditable="true" class="cell100 column4"><br /></td> </tr> <tr class="row100 body"> <td contenteditable="true" class="cell100 column1"><br /></td> <td contenteditable="true" class="cell100 column2"><br /></td> <td contenteditable="true" class="cell100 column3"><br /></td> <td contenteditable="true" class="cell100 column4"><br /></td> </tr> <tr class="row100 body"> <td contenteditable="true" class="cell100 column1"><br /></td> <td contenteditable="true" class="cell100 column2"><br /></td> <td contenteditable="true" class="cell100 column3"><br /></td> <td contenteditable="true" class="cell100 column4"><br /></td> </tr> <tr class="row100 body"> <td contenteditable="true" class="cell100 column1"><br /></td> <td contenteditable="true" class="cell100 column2"><br /></td> <td contenteditable="true" class="cell100 column3"><br /></td> <td contenteditable="true" class="cell100 column4"><br /></td> </tr> <tr class="row100 body"> <td contenteditable="true" class="cell100 column1"><br /></td> <td contenteditable="true" class="cell100 column2"><br /></td> <td contenteditable="true" class="cell100 column3"><br /></td> <td contenteditable="true" class="cell100 column4"><br /></td> </tr> <tr class="row100 body"> <td contenteditable="true" class="cell100 column1"><br /></td> <td contenteditable="true" class="cell100 column2"><br /></td> <td contenteditable="true" class="cell100 column3"><br /></td> <td contenteditable="true" class="cell100 column4"><br /></td> </tr> <tr class="row100 body"> <td contenteditable="true" class="cell100 column1"><br /></td> <td contenteditable="true" class="cell100 column2"><br /></td> <td contenteditable="true" class="cell100 column3"><br /></td> <td contenteditable="true" class="cell100 column4"><br /></td> </tr> <tr class="row100 body"> <td contenteditable="true" class="cell100 column1"><br /></td> <td contenteditable="true" class="cell100 column2"><br /></td> <td contenteditable="true" class="cell100 column3"><br /></td> <td contenteditable="true" class="cell100 column4"><br /></td> </tr> </tbody> </table> </div> </div> </div>
<div class="wrap-table100"> <div class="table100 ver3 mx-auto my-3"> <table data-vertable="ver3"> <thead> <tr class="row100 head"> <th contenteditable="true" class="column100 column1" data-column="column1"></th> <th contenteditable="true" class="column100 column2" data-column="column2">SUNDAY</th> <th contenteditable="true" class="column100 column3" data-column="column3">MONDAY</th> <th contenteditable="true" class="column100 column4" data-column="column4">Header 4</th> <th contenteditable="true" class="column100 column5" data-column="column5">Header 5</th> </tr> </thead> <tbody> <tr class="row100"> <td contenteditable="true" class="column100 column1" data-column="column1">Jane Medina</td> <td contenteditable="true" class="column100 column2" data-column="column2">8:00 AM</td> <td contenteditable="true" class="column100 column3" data-column="column3"> -- </td> <td contenteditable="true" class="column100 column4" data-column="column4"> -- </td> <td contenteditable="true" class="column100 column5" data-column="column5"> -- </td> </tr> <tr class="row100"> <td contenteditable="true" class="column100 column1" data-column="column1">Lawrence Scott</td> <td contenteditable="true" class="column100 column2" data-column="column2">9:00 AM</td> <td contenteditable="true" class="column100 column3" data-column="column3"> -- </td> <td contenteditable="true" class="column100 column4" data-column="column4"> -- </td> <td contenteditable="true" class="column100 column5" data-column="column5"> -- </td> </tr> <tr class="row100"> <td contenteditable="true" class="column100 column1" data-column="column1"> -- </td> <td contenteditable="true" class="column100 column2" data-column="column2"> -- </td> <td contenteditable="true" class="column100 column3" data-column="column3"> -- </td> <td contenteditable="true" class="column100 column4" data-column="column4"> -- </td> <td contenteditable="true" class="column100 column5" data-column="column5"> -- </td> </tr> <tr class="row100"> <td contenteditable="true" class="column100 column1" data-column="column1"> -- </td> <td contenteditable="true" class="column100 column2" data-column="column2"> -- </td> <td contenteditable="true" class="column100 column3" data-column="column3"> -- </td> <td contenteditable="true" class="column100 column4" data-column="column4"> -- </td> <td contenteditable="true" class="column100 column5" data-column="column5"> -- </td> </tr> <tr class="row100"> <td contenteditable="true" class="column100 column1" data-column="column1"> -- </td> <td contenteditable="true" class="column100 column2" data-column="column2"> -- </td> <td contenteditable="true" class="column100 column3" data-column="column3"> -- </td> <td contenteditable="true" class="column100 column4" data-column="column4"> -- </td> <td contenteditable="true" class="column100 column5" data-column="column5"> -- </td> </tr> <tr class="row100"> <td contenteditable="true" class="column100 column1" data-column="column1"> -- </td> <td contenteditable="true" class="column100 column2" data-column="column2"> -- </td> <td contenteditable="true" class="column100 column3" data-column="column3"> -- </td> <td contenteditable="true" class="column100 column4" data-column="column4"> -- </td> <td contenteditable="true" class="column100 column5" data-column="column5"> -- </td> </tr> <tr class="row100"> <td contenteditable="true" class="column100 column1" data-column="column1"> -- </td> <td contenteditable="true" class="column100 column2" data-column="column2"> -- </td> <td contenteditable="true" class="column100 column3" data-column="column3"> -- </td> <td contenteditable="true" class="column100 column4" data-column="column4"> -- </td> <td contenteditable="true" class="column100 column5" data-column="column5"> -- </td> </tr> <tr class="row100"> <td contenteditable="true" class="column100 column1" data-column="column1"> -- </td> <td contenteditable="true" class="column100 column2" data-column="column2"> -- </td> <td contenteditable="true" class="column100 column3" data-column="column3"> -- </td> <td contenteditable="true" class="column100 column4" data-column="column4"> -- </td> <td contenteditable="true" class="column100 column5" data-column="column5"> -- </td> </tr> </tbody> </table> </div> </div>
スタイルを保存
×
保存されたスタイル
お待ちください...
Your Name
*
スタイル名
*
Eメール
*
テキストを削除してもよろしいですか？
削除するものを選択してください