ネット上のツールを使って、いい感じの表・テーブルを作成する

以下のツールを使って、

以下のような表・テーブルを WordPress.com に貼る方法についての覚え書きです。

選手名 出場時間
ロマン・ブルキ 1774
ピエール・エメリク・オーバメヤン 1697
ヘンリク・ムヒタルヤン 1594
イルカイ・ギュンドアン 1559
マッツ・フメルス 1539
ソクラティス・パパスタソプーロス 1508
ユリアン・ヴァイグル 1478
香川真司 1397
マティアス・ギンター 1289
マルセル・シュメルツァー 1284
マルコ・ロイス 982
ゴンサロ・カストロ 784
ウカシュ・ピシュチェク 721
スヴェン・ベンダー 526
パク・チュホ 413
アドリアン・ラモス 208
ネヴェン・スボティッチ 187
エリック・ドゥルム 115
モリッツ・ライトナー 36
クリスチャン・プリシッチ 23

ツール「Tables Generator」は以下の記事で見つけました。

ツール「Tables Generator」の日本語情報を検索してみたところ、以下の記事を見つけました。

この記事では、実際に上記のツールを使って、表を WordPress.com に貼る方法について覚え書きしたいと思います。

サンプルとして、以下の表を取り上げます。

上記の表を元に Google ドライブのスプレッドシートを使って、以下のような表を作成します。

2016-02-08 at 12.31.jpg

スプレッドシートを使った表の作成方法については、以下の記事等をご参照ください。

File → Paste table data …」のところに

2016-02-08 at 12.37.jpg

Google ドライブのスプレッドシートで作成・編集した該当データをコピペすると、

2016-02-08 at 12.37.jpg

こんな感じで表が生成されます。

2016-02-08 at 12.38.jpg

Theme」のところで

2016-02-08 at 12.39.jpg

装飾することができます。

2016-02-08 at 12.40.jpg

Compact mode」にチェックを入れ、「Generate」ボタンをクリックすると、貼り付け用のタグが生成されます。

2016-02-08 at 12.42.jpg

Copy to clipboard」をクリックするか、画面上で範囲指定したのちコピペするかして、クリップボードにデータを移し、

2016-02-08 at 12.43.jpg

テキストモードの状態で WordPress.com に貼り付けると、

2016-02-08 at 12.43.jpg

以下のような感じで装飾された表を WordPress.com に貼り付けることができます。

2016-02-08 at 12.44.jpg

Compact mode」のところのチェックを外すと CSS の部分を分離することができ、CSS クラスで表の装飾を管理することができます。

2016-02-08 at 12.47.jpg

Markdown 形式の表も作成することができます。

2016-02-08 at 12.50.jpg

Markdown 形式の場合は、表に注釈を入れることができます。

生成したタグを繰り返し使う場合には、アドオン「Easy Copy」や「Make Link」等に登録しておけばいいのではないかと思います。

2016-02-08 at 13.10

 

参考

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。