Adobe Muse でテーブル(表)を挿入する【その②】 | JUNK BOX

JUNK BOX

文系女子によるパソコン技術向上と趣味を兼ねたブログ

前回の記事 Adobe Museでテーブル(表)を挿入する【その①】 )では、

エクセルを使用してHTMLコードを作成する方法で、

Adobe Muse にテーブル(表)を挿入しました。

 

エクセルを使用したこの方法は、

簡単にスタイルを選択しながらテーブル(表)を作成することができるうえ、

Adobe Muse に挿入した際でも、しっかりとHTMLコードが反映されるので、

とても便利です音譜

 

しかし、異なるスタイルの表を複数貼り付けることができないという

問題点もありましたあせる

 

そこで今回は、Adobe Museにテーブル(表)を挿入するもうひとつの方法

まとめてみたいと思います。

 

HTMLコードでテーブル(表)を挿入する方法

 

今回記載する方法は、

事細かにテーブル(表)のHTMLコードを記入する方法です。

 

他にもっと簡単な方法があるのかもしれませんが、

Adobe Museで反映されるコードをうまく見つけられず、

テーブル(表)の仔細を記述するという暴挙にでました。

 

【表示例】

 

 

【コード例】

 

<table style="font-size:14px; width:400px; height:130px; border:2px solid #666666;">
<tr style="background: #FFFFFF; border:2px solid #666666;">
<th style="width:130px; background: #C8C8C8; border:2px solid #666666;"> 会社名</th>
<td> 株式会社○○○○<br>
 (旧:株式会社△△△△)</td>
</tr>
<tr style="background: #F0F0F0; border:2px solid #666666;">
<th style="background: #9A9A9A; border:2px solid #666666;"> 代表取締役</th>
<td> 山田 太郎</td>
</tr>
<tr style="background: #FFFFFF; border:2px solid #666666;">
<th style="background: #C8C8C8; border:2px solid #666666;"> 電話番号</th>
<td> xxx-xxx-xxx</td>
</tr>
<tr style="background: #F0F0F0; border:2px solid #666666;">
<th style="background: #9A9A9A; border:2px solid #666666;"> FAX番号</th>
<td> xxx-xxx-xxx</td>
</tr>
</table>
 

 

上記のコードでは、セルの行間は一番初めにある<table style>"height"

まとめて設定しています。

もし、より細かく設定したい場合は、<tr style>や<th style>に追加で記述しますメモ

 

この方法では、異なったスタイルのテーブル(表)を複数貼り付けることも可能です。

 

【例: Adobe Museでプレビュー・パブリッシュしたときの表示】 

 

ただし、表の項目が多いほどスタイルの変更等の修正が面倒

という点があります。

 

そのため、

 

■ 同じスタイルのテーブル(表)のみ挿入する場合や

   簡単にテーブル(表)を挿入したい場合

 → 【方法その①】

 

■ 異なるスタイルのテーブル(表)を複数挿入する場合や

   細かな設定をしたい場合

 → 【方法その②】

 

のように、使い分けをするといいのかもしれませんキラキラ

 

早くAdobe Museにテーブル(表)のウィジェットが追加されますように。