前回の記事 (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にテーブル(表)のウィジェットが追加されますように。