閉じる


はじめに

『パブーで遊んでみよう』の第4弾です。

 

今回は表組みについて扱っています。

 

パブーの編集画面では、メニューバーに表組みに関する項目はありません。

公式マニュアルでも、表組みについては触れられていません。

しかし、[HTMLエディター]で<table>タグを使えば、パブーで表組みを使うことができます。


これまでの『パブーで遊んでみよう』でも、目次で章番号と項目の頭を揃えるために、罫線のない表組みを使っていました。

このように表組みはレイアウトにも使えるので、CSSの扱いがイマイチなePubでも、それなりのデザインができるのではないか、と思ったりもしています。

 

デザインといえば、今回はHTML・CSSを使った表組みにまつわる設定については、ほとんど触れていません。

パブーの編集画面でできることを中心に書いています。

たとえばセルの高さを変えたいとか、罫線の色を設定したい、といったことはHTML・CSSの解説書をご覧ください。

 

なお、本書の内容は執筆時点でのパブーの挙動を元に書かれています。パブーのバージョンアップに伴い、本書と内容が異なる場合があります。

 

また、パブーでは公式には表組みのサポートを行っていないようです。

本書の内容はパブーのページ編集画面を操作しながら、気付いたことをメモしたものがベースとなっています。

したがって仕様に基づいた記述ではありませんので、あらかじめご了承ください。

 

パブーの仕様に関するお問い合わせなどは、運営サイトへお訊ねください。


目次

1. パブーで表組みを使う
2. 列・行の追加と削除
3. 表の幅・高さを変える
4. 表の行揃え
5. 表の回り込み
6. セルの連結はできない?
7. ページの大きさを超える表
8. WORD、EXCELの表を貼り付ける

1.パブーで表組みを使う

今のところパブーには、表組み(テーブル)の挿入や編集にまつわる機能はありません。

では、パブーで表組みが使えないかというと、そういうわけでもありません。

[HTMLエディター]で表組み(table)のタグを入力すると、表組みが使えます。

この『パブーで遊んでみよう』シリーズでも、目次のレイアウトに罫線のない表組みを使っています。


しかし、パブー独特のクセ(あるいはePubの仕様?)のせいか、HTMLの編集がちょっと異なっています。

たとえば<table>タグを使って、表組みを表示しようとした場合。

HTMLをブラウザで表示した場合は特に問題がないのですが。

ブラウザでは普通に表示される


同じソースの記述でも、パブーでは表の罫線が表示されず、いまいちなカンジです。

パブーでは罫線が表示されない


ちなみに[ウィジウィグエディター]上では罫線は表示されています。

編集画面では表示されているのに…


この現象は、<table>タグに<style>属性で罫線や色に関する設定を行っていないことが原因です。

(これまでの文字の色や画像の枠線で扱ってきたのと同様です)


参考までに、別ページにて<style>属性で罫線などを設定した表組みの例を掲載します。

ソースも一緒に載せています。

パソコンでお使いご覧の方は、パブーの[HTMLエディター]でソースをコピペして、実際に表組みを使ってみてください。


なお、余談ですが……。

以前『パブーで遊んでみよう』では、テキストの編集はテキストエディターでやると便利、と書いていたですが。

さすがに表組みのような複雑なHTMLを編集するとなると、DreamweaverのようなWebレイアウトソフトの方が便利です。

パブーでしばしば使われる<style>属性で設定するやり方は、DreamweaverのCSSスタイルでは["インラインスタイル"のプロパティ]としてCSSスタイルのパレットに表示されます。

こちらのパレットから設定ができます。

DreamweaverのCSSパレット


使い勝手は人それぞれでしょうけど、私はこうやってスッキリと整理された状態で編集できる方がやりやすかったです。


(サンプル:表組み-罫線無し、セル色無し)

見出し 見出し 見出し
テキスト テキスト テキスト
テキスト テキスト テキスト
テキスト テキスト テキスト


<table style="width: 100%; border-spacing: 0pt;">
<tbody>
<tr>
<th style="" scope="col">見出し</th>
<th style="" scope="col">見出し</th>
<th style="" scope="col">見出し</th>
</tr>
<tr>
<td style="">テキスト</td>
<td style="">テキスト</td>
<td style="">テキスト</td>
</tr>
<tr>
<td style="">テキスト</td>
<td style="">テキスト</td>
<td style="">テキスト</td>
</tr>
<tr>
<td style="">テキスト</td>
<td style="">テキスト</td>
<td style="">テキスト</td>
</tr>
</tbody>
</table>



(サンプル:表組み-罫線あり、セル色無し)

見出し 見出し 見出し
テキスト テキスト テキスト
テキスト テキスト テキスト
テキスト テキスト テキスト


<table style="border: 1px solid rgb(0, 0, 0); width: 100%; border-spacing: 0pt;">

<tbody>

<tr>

<th style="border: 1px solid rgb(0, 0, 0);" scope="col">見出し</th>

<th style="border: 1px solid rgb(0, 0, 0);" scope="col">見出し</th>

<th style="border: 1px solid rgb(0, 0, 0);" scope="col">見出し</th>

</tr>

<tr>

<td style="border: 1px solid rgb(0, 0, 0);">テキスト</td>

<td style="border: 1px solid rgb(0, 0, 0);">テキスト</td>

<td style="border: 1px solid rgb(0, 0, 0);">テキスト</td>

</tr>

<tr>

<td style="border: 1px solid rgb(0, 0, 0);">テキスト</td>

<td style="border: 1px solid rgb(0, 0, 0);">テキスト</td>

<td style="border: 1px solid rgb(0, 0, 0);">テキスト</td>

</tr>

<tr>

<td style="border: 1px solid rgb(0, 0, 0);">テキスト</td>

<td style="border: 1px solid rgb(0, 0, 0);">テキスト</td>

<td style="border: 1px solid rgb(0, 0, 0);">テキスト</td>

</tr>

</tbody>

</table>



読者登録

アイソメ万太郎さんの更新情報・新作情報をメールで受取りますか?(読者登録について