ちょろQの覚書でぇ~す

FC2ブログに挿入した表の枠線を消そう!!

 先回のFC2ブログにHTML表作成ソフトで作成した表を挿入しよう!!で取り上げた題材の延長なのですが、作表の段組みを枠線なしで表現したいときがあります。

<table>から</table>の間に枠線のタグ(border)がないのにブログに表を設定すると枠線が表示されます。
テンプレートの種類によっては、挿入した表の枠線が表示されないものもあります。)

 これは、どういうことかと調べるとCSS(スタイルシート言語のひとつ)という存在があり、HTMLで文書構造のみを定義して、 スタイルについてはスタイルシートで指定し、HTMLと組み合わせて使用する言語、とのことなので、この辺に原因があるのでしょう。

CSSのおかげでブログの体裁も成り立っているのだろうが...、小難しいことに拘りたくないので...。

 更に、検索を続けるとインラインスタイルという存在があり、これは、CSSとHTMLの分離ができるとのことで、それをヒントに検索すると、あるサイトに出会った。

  もちろん、CSSもインラインスタイルシートとやらも無縁であり、正否は知識のある方に委ねるとして、結果良ければで検証することとした。

枠線を消すのには、次のタグが要です。

<table style="border-style:none">
<td style="border-style:none">

作表は、先回取り上げたTable Tag GeneratorでHTMLコードを抽出しています。

セルの結合なし

枠線あり
<table>
<tbody>
<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>
</tbody>
</table>
a b c
d e f
g h i

枠線なし
<table>と<td>の部分にstyle="border-style:none"を付け加えます。

<table style="border-style:none">
<tbody>
<tr>
<td style="border-style:none">a</td>
<td style="border-style:none">b</td>
<td style="border-style:none">c</td>
</tr>
<tr>
<td style="border-style:none">d</td>
<td style="border-style:none">e</td>
<td style="border-style:none">f</td>
</tr>
<tr>
<td style="border-style:none">g</td>
<td style="border-style:none">h</td>
<td style="border-style:none">i</td>
</tr>
</tbody>
</table>
a b c
d e f
g h i

セルの結合あり

枠線あり
<table>
<tbody>
<tr>
<td colspan="3">ちょろQの覚書へようこそ!</td>
</tr>
<tr>
<td rowspan="2">Craving Explorer</td>
<td>MP4 MP3</td>
<td rowspan="3"><img alt="image" src="http://blog-imgs-82.fc2.com/c/y/o/cyoroq/20151011171346d06.jpg" /></td>
</tr>
<tr>
<td>AviUtlとは?</td>
</tr>
<tr>
<td colspan="2">Windows Media Player</td>
</tr>
</tbody>
</table>
ちょろQの覚書へようこそ!
Craving Explorer MP4 MP3 image
AviUtlとは?
Windows Media Player

枠線なし
<table style="border-style:none">
<tbody>
<tr>
<td style="border-style:none" colspan="3">ちょろQの覚書へようこそ!</td>
</tr>
<tr>
<td style="border-style:none" rowspan="2">Craving Explorer</td>
<td style="border-style:none">MP4 MP3</td>
<td style="border-style:none" rowspan="3"><img alt="image" src="http://blog-imgs-82.fc2.com/c/y/o/cyoroq/20151011171346d06.jpg" /></td>
</tr>
<tr>
<td style="border-style:none">AviUtlとは?</td>
</tr>
<tr>
<td style="border-style:none">Windows Media Player</td>
</tr>
</tbody>
</table>
ちょろQの覚書へようこそ!
Craving Explorer MP4 MP3 image
AviUtlとは?
Windows Media Player

多少のHTML知識があればテーブル・セルの調整、文字装飾等の編集は可能ですので、是非、お試しあれ

次回はザックリ趣を変えて「日本の借金 1057兆円」に付いて考えてみます。

コメントの投稿






※誹謗中傷のコメントと判断されたときは、管理者から投稿を拒否されることがあります。


管理者にだけ表示を許可する(非公開コメント)

該当の記事は見つかりませんでした。