table

WordPress(ワードプレス)でテーブルのレイアウトが簡単変更できるがプラグイン「TablePress」

2016年7月25日

Categories | ブログ（WordPress)

WordPress(ワードプレス)でテーブル（表）のレイアウトが簡単変更できるがプラグイン

「TablePress」を導入しました。

以前からテーブルのレイアウトをいじるのに、面倒なことやっていたのですが、

プラグインを探してみると、この手が結構あるんですね。

 

0725 01 400x252 Wordpress(ワードプレス)でテーブルのレイアウトが簡単変更できるがプラグイン「TablePress」

 

実装方法は簡単。

WordPress管理画面 ＞ プラグイン ＞ 新規追加 ＞「TablePress」で検索し、

インストールして有効化。管理画面サイドバーに項目が追加される。

 

0725 02 400x251 Wordpress(ワードプレス)でテーブルのレイアウトが簡単変更できるがプラグイン「TablePress」

サイドバーの「新しいテーブルを追加」で表を作成し、出来上がった表の

「ショートコードID」を記事内に記述すれば表示される。

使用方法はさほど難しくない。

使用感としては、一度作成した表（テーブル）を、先々編集（行や列の追加）する

場合は便利なプラグインだと思うが、それ以外だと一度こっきりの単純なテーブル

を、いちいちプラグインで作成管理するのは面倒臭いから不向きかも。

細かい装飾はプラグインのオプション「カスタムCSS」でコマンドを追加する必要が

あるので、結局は簡単でもないし、CSSを理解していないと使えないプラグインでした。

 

試しに固定ページでプラグイン使って作ってみました。

YouTube チャンネル解析レポート

カスタムCSS

 

.tablepress-id-1 {
	margin: 0 auto;
	font-size: 12px;
	width: 80%;
}

.tablepress-id-1 th {
	text-align: right;
}

.tablepress-id-1 td {
	text-align: right;
}

 

しまい

Comment(0) | Trackback(0)

TAGS: / / / / / / | 2016年7月25日 |

tableのセンタリングはややこしぃ

2010年5月1日

Categories | ホームページ

表（table要素）をスタイルシートを使ってセンタリングしたい

（中央に寄せたい）場合、ブラウザやバージョンによって表示のされ方が

異なるため結構ややこしいです。私はIEターゲットにHP作っているのですが、

表（table要素）を囲むブロック（div要素）でtext-alignプロパティにcenterを

指定していました。

div.c {text-align: center;}

しかしIEのバージョン違いではセルの中身までセンタリングされてしまう。

こりゃいかんな・・・そこで新たにtable内セル左寄せを追加しました。

div.c {text-align: center;}
div.c table {text-align: left;}

IEでは上記ブロック（div要素）で表を囲めばバージョンの違いでもセンタリング

出来ます。が、しかし、ネスケやファイヤーフォックスではこの指定は認識されず、

全部ブラウザ左に寄ってしまいます。

それを回避するためにtableのmarginプロパティを使います。

div.c table {text-align: left;}　変更前
↓
div.c table {text-align: left; margin: auto;}　変更後

スタイルシートで上記記述をすると、殆どのブラウザで表（table）のセンタリング

が可能になります。完成はこんな感じに。

スタイルシート（css）部分
div.ctable {text-align: center;} 　IEでのセンタリング
div.ctable table {margin: auto; text-align: left;} 　IE以外でのセンタリング

ソース（html）部分

<div>
<table class="mceItemTable">
<tbody>
<tr><th>×××</th><th>×××</th>
</tr><tr><td>×××</td><td>×××</td></tr>
</tbody>
</table>
</div>

以上　ぉしまい

Comment(0) | Trackback(0)

TAGS: / / | 2010年5月1日 |