アフィリに役立つメモ

リファインで表を書くと左右の線が切れる！の解決策！

  /

リファインってクールなテンプレートですが、普通に表を書くと、左右の線が（ボーダーが切れちゃってませんか？）

これってちょっと使いにくい。

こんな感じになっちゃいます。

 

普通に書くと～

左右が切れとる。（デフォルトでなくなっとる）

見出し 見出し
a b c
d e f
g h i
j k l

 

トシが作った今後ここで使っていく表は～

見出し 見出し
a b c
d e f
g h i
j k l

 

ということで、今後このブログで使っていく用に、表のテンプレをメモ。

簡単に設置できますので、よかったら使ってくださいね。

まずCSSを書いておけば、あとは下のタグをコピって記事に貼り付けるだけです。

 

まずはCSSを書いておく

これね。こんだけ書くだけで下の2つの表が使えます。

/*オリジナルテーブルthはいつもセンター*/
.originTable{
	width:100%;
	border-collapse: collapse;
	}

.originTable th{
	border: solid #ccc 1px; 
	background-color:#f3f3f3;
	text-align:center;
	}

.originTable th,.originTable td{
	border: solid #ccc 1px; 
	padding:8px 15px;}

.centerTable td{
	text-align:center;}

.leftTable td{
	text-align:left;}

 

これを書く場所はココ。

2014-03-04_225711

テーマ編集をクリックしたらずっと右下の方、
custom.css（これは自分で自由にカスタムできるCSS）に追記します。

2014-03-05_001025

これができたら、準備OK。あとはこのタグを使うだけです。

 

全部中央寄せ～

見出し 見出し
a b c
d e f
g h i
j k l

 

全部中央寄せ～のタグはこれ↓

<table border="1" class="originTable leftTable">
<tr>
<th></th>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
<tr>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
</table>

 

左寄せ～

見出し 見出し
a b c
d e f
g h i
j k l

全部左寄せ～のタグはこれ↓

<table border="1" class="originTable leftTable">
<tr>
<th></th>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
<tr>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
</table>

もし使えねーぞ！

ってことであれば教えてください^^;

自分はいまのとこ使えてます。

 

CSS HTML リファイン 表
RELATED POST