Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

FC2旧投稿画面のツールで作成する「表 (table)」のソースコードはhtml5に準拠していません。
また、新投稿画面に於いては表作成の機能がありません。
表が必要な方、これからtableタグを覚えようという方、html5テンプレートをご利用でバリデートが気になる方はお使いください。
記事幅からははみ出さない… はず (´・ω・`)
初期widthがついているものはセル内容が少なくてもある程度の大きさを確保します。
ついていないものはセル内容によって全体の大きさが決まります。
いずれも記事幅以上にはなりません(のはず)

・ tbody は特に必要がないので省いてあります(構文的にも問題ありません)
・ borderの色は一律 silver に揃えてあります。
・ セル内余白は一律 5px に揃えてあります。
・ 背景色は table側へ white を一括で指定してあります。
・ 文字色は table側へ rgb(51,51,51) を一括で指定してあります。
・ セルの垂直位置合わせは上位継承にしてあります。
・ table全体の水平位置合わせは 中央 にしてあります。
・ 英単語の途中でも改行するようにしてあります(そうしないと英単語だけでなく記号の連続でのはみ出しも防げません)
・ テキスト編集しやすいよう、コードにインデントは設けていません
・ 初期widthは600pxで統一しています。この場合記事幅が600pxを超えてもtable全体幅は600px以上にはなりませんので、それが嫌な方は
① max-width: 600px; の部分を削除 --- 常に記事幅と同等になります
② width: 100%; max-width: 600px; の部分を削除 --- セルの大きさに依存します

使い方

● 新投稿画面をお使いの方は
該当コードをコピー → HTML表示モードに貼り付け → 通常モードに戻してテキスト編集

● 旧投稿画面で改行の扱いを「HTMLタグのみ」にされる方は 該当コードをコピー → テキスト編集時の任意改行は文末に
<br>
と記してください
table以外のテキストも同じです。

● 旧投稿画面で改行の扱いを「自動改行」にされる方は、コピペした後にコード内から全ての改行を取り除いてからテキスト編集を行ってください。

カスタマイズ

● セル(td)の背景色を変更するには、対象tdタグの background-color: カラーコード; を変更します。
全セルを一括で変更するには tableタグ の background-color: カラーコード; を変更します

● セルの文字色を変更するには、対象tdタグの color: カラーコード; を変更します。
全セルを一括で変更するには tableタグ の color: カラーコード; を変更します

● table全体のセンタリングを解除するには、tableタグの margin: 0 auto; を削除します。

● borderの折りたたみを解除したい方は、tableタグの border-collapse: collapse; を削除します。
また、border間に空白が欲しい場合は border-spacing: 0; のゼロを希望の数値に変更します(pxの単位が必要です)

● セルを等分にしたい方は、tableタグのstyle属性に table-layout: fixed; を追加します。

● 各セルの垂直位置合わせは middle がデフォルトです。変更したい場合は tdタグのstyle属性に vertical-align: 位置; を追加してください。
使用できる値は top, middle(デフォルトなので書く必要なし), bottom の3つです(他にもあるけど要らんと思う)

● あとは各雛形ソースとにらめっこしながら、どこを変更したらどうなるか色々お試しください。

● 本末転倒ですが、レスポンシブデザインの場合はこういったtableの利用はおすすめしません。
どうしても必要な場合には 横のセル数は極力少なくする 気持ちでお使いください。


html5 valid, レスポンシブ


① 基本 (2段 x 2セル)

内容 内容
内容 内容

<table style="margin: 0 auto; border-collapse: collapse; border-spacing: 0; background-color: white; border: 1px solid silver; color: rgb(51,51,51); word-break: break-all;">
<tr>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
</tr>
<tr>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
</tr>
</table>

② 基本 + 初期width 600px (2段 x 2セル)

内容 内容
内容 内容

<table style="margin: 0 auto; border-collapse: collapse; border-spacing: 0; background-color: white; border: 1px solid silver; color: rgb(51,51,51); word-break: break-all; width: 100%; max-width: 600px;">
<tr>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
</tr>
<tr>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
</tr>
</table>



③ 見だしつき (見だし1段 x 3セル + 2段 x 3セル)

見だし 見だし 見だし
内容 内容 内容
内容 内容 内容

<table style="margin: 0 auto; border-collapse: collapse; border-spacing: 0; background-color: white; border: 1px solid silver; color: rgb(51,51,51); word-break: break-all;">
<tr style="text-align: center; font-weight: bold;">
<th style="border: 1px solid silver; padding: 5px;">
見だし
</th>
<th style="border: 1px solid silver; padding: 5px;">
見だし
</th>
<th style="border: 1px solid silver; padding: 5px;">
見だし
</th>
</tr>
<tr>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
</tr>
<tr>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
</tr>
</table>



------------ ここから以降は全て初期width 600pxです ------------
④ 見だしつき (見だし1段 x 3セル + 2段 x 3セル)

見だし 見だし 見だし
内容 内容 内容
内容 内容 内容

<table style="margin: 0 auto; border-collapse: collapse; border-spacing: 0; background-color: white; border: 1px solid silver; color: rgb(51,51,51); word-break: break-all; width: 100%; max-width: 600px;">
<tr style="text-align: center; font-weight: bold;">
<th style="border: 1px solid silver; padding: 5px;">
見だし
</th>
<th style="border: 1px solid silver; padding: 5px;">
見だし
</th>
<th style="border: 1px solid silver; padding: 5px;">
見だし
</th>
</tr>
<tr>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
</tr>
<tr>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
</tr>
</table>



⑤ 見だし色つき (見だし1段 x 3セル + 2段 x 3セル)

見だし 見だし 見だし
内容 内容 内容
内容 内容 内容

<table style="margin: 0 auto; border-collapse: collapse; border-spacing: 0; background-color: white; border: 1px solid silver; color: rgb(51,51,51); word-break: break-all; width: 100%; max-width: 600px;">
<tr style="text-align: center; font-weight: bold; background-color: rgb(240,255,255);">
<th style="border: 1px solid silver; padding: 5px;">
見だし
</th>
<th style="border: 1px solid silver; padding: 5px;">
見だし
</th>
<th style="border: 1px solid silver; padding: 5px;">
見だし
</th>
</tr>
<tr>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
</tr>
<tr>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
</tr>
</table>



⑥ 水平セル結合 (見だし1段 x 1セル + 3段 x 3セル )

見だし
内容 内容 内容
内容 内容 内容
内容 内容 内容

<table style="margin: 0 auto; border-collapse: collapse; border-spacing: 0; background-color: white; border: 1px solid silver; color: rgb(51,51,51); word-break: break-all; width: 100%; max-width: 600px;">
<tr style="text-align: center; font-weight: bold;">
<th colspan="3" style="border: 1px solid silver; padding: 5px; background-color: rgb(240,255,255);">
見だし
</th>
</tr>
<tr>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
</tr>
<tr>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
</tr>
<tr>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
</tr>
</table>



⑦ 垂直セル結合 (見だし1段 x 1セル + 3段 x 2セル )

見だし 内容 内容
内容 内容
内容 内容

<table style="margin: 0 auto; border-collapse: collapse; border-spacing: 0; background-color: white; border: 1px solid silver; color: rgb(51,51,51); word-break: break-all; width: 100%; max-width: 600px;">
<tr style="text-align: center; font-weight: bold;">
<th rowspan="3" style="border: 1px solid silver; padding: 5px; background-color: rgb(240,255,255);">
見だし
</th>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
</tr>
<tr>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
</tr>
<tr>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
<td style="border: 1px solid silver; padding: 5px;">
内容
</td>
</tr>
</table>



カスタマイズ例

① を使用, table-layout: fixed; を追加, セル数を追加

Take Me To Chuch
Hozier
2013年
Nothing To Lose
Billy Talent
2004年
Built For Blame
Get Scared
2012年


① を使用, border-collapse: collapse; を削除, border-spacing: 1px; に変更, セル数削減

To say Good bye is to die a little.
- Raymond Chandler
I can accept failure, everyone fails at something. But I can’t accept not trying.
- Michael Jordan



② を使用, tdに background-image を追加, border を削除, table-layout: fixed; を追加

あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
ABCDEFG
HIJKLMNOP
QRSTUVWXYZ
12345
6789
関連記事

Comments 0

There are no comments yet.

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い