テーブルのセルの境界線

Windows7 Expression Web 4
サイトの文字コード指定：Shift_JIS
ページ編集オプション→CSS：スタイルの自動適用
の環境条件でテーブルを作成し、
セルに漢字を入力後、色やサイズなどの文字属性を設定するとauto-styleとして
display:inline が出力されて、セルの幅がバラバラになって整列しません。
但し、漢字ではなく半角英数字の時は、diplayは出力されず正常な表ができます。

そこで、
ページ編集オプション→CSS：スタイルの手動適用
枠線：CSS（クラス）
に変更すると表としては整列しますが、外枠線の設定で「全ての枠線」を選択しても
テーブル全体の枠線しか引かれず、セルの境界線が引かれません。

極めて基本的な事なので、出来ないはずはないと思うのですが、Expression Webは
初めて使うためどこかで大きな勘違いをしているのかもしれません。
何か良い方法はないでしょうか？

.auto-style7 {
font-style: normal;
font-variant: normal;
letter-spacing: normal;
line-height: normal;
text-align: start;
text-indent: 0px;
text-transform: none;
white-space: normal;
word-spacing: 0px;
display: inline;
float: none;
font-weight: bold;
font-size: small;
color: rgb(255, 0, 0);
border-style: solid;
border-width: 1px;
}

Expression Web 4のコマンドメニューからのはあまりあてにできません。
FrontPageの古い機能の名残ですが、なかなかCSSに変換してくれないのでしょう。

CSSで実装するようにしてください。

私のサイトの場合は、以下のようにセルの枠線をCSSで指定しています。

.table{border:1px solid #999;border-collapse:collapse;font-family:"ＭＳ Ｐゴシック", Arial, sans-serif;margin-bottom:1em;line-height:1.2em;padding:5px;}
.table th{border:1px solid #999;background-color:#CCC;text-align:center;white-space:nowrap;}
.table td{border:1px solid #999;margin:0;padding:5px;}

どうぞよろしくお願いいたします。

> CSSで実装するようにしてください。

実は使用しているのは私ではなく友人なのですが、殆どcssがわかりません。
今まではalphaEditというwysiwyg型のフリーソフトを使用していたのですが、
Windows 7に移行してから動作不安定で実用に耐えないので、代替品を探していました。
幾つか候補をテストしてみて、Expression Webが一番操作性が近いと考え、これを
薦めようと思ったのですが、セルの境界線で頓挫しました。

diplay:inlineさえ外せれば何とかなると思ったのですが、文字色まで枠線の色に
影響するということで諦めました。

で問題は、文字に与えたstyleがtdに適用されていることなので、spanを切り直して
指定したらうまくいきました。
しかし、セル内の文字を選択して直接フォント属性を指定するのに比べ、はるかに
手順が多くなってしまいます。
フォントstyleならcssが分からなくても何とかなりそうなので薦めようと思うのですが、
やはりこんな方法しかないのでしょうか？

CSSがほとんどわからないというご友人でしたら、代替案はあります。
［表示］メニューの［テーブル］をクリックしてテーブルツールバーを表示し、
そのツールバーの一番右端のテーブルのオートフォーマット機能を利用する方法です。
その情報のExpression Web 4版を書いたかどうか定かではありませんが、
一度触ってみてください。

どうぞよろしくお願いいたします。

ほぼできました、ありがとうございました。

・テーブルを挿入しグリッド型でオートフォーマット
・各セルに文字（漢字）をいれ属性を指定

この状態でブラウザ表示すると、display:inline　の影響でセルは整列しません。

そこで、セルに対応するスタイルの編集ウィンドウを開き、displayの属性値を
空欄にしたところ、縦線が破線になる点を除けば枠線が文字色の影響を受ける事もなく
綺麗に整列しました。
ついでに、テーブル・プロパティにwidthを指定し、中断に行を挿入しても問題ありませんでした。

table/borderでの表示形式と同一とはいきませんが、各セルを境界線で仕切るという
基本的な事はできたので、これで行こうと思います。

ひとつだけ課題が残っているのですが、ワープロ感覚で使っている友人にとって
displayの属性値を消す操作が少し煩雑です。
ソース・コードを直接編集すれば苦もない事ですが、ソースは読めないので、
例えば、displayの初期値を inline でなく「なし」もしくは table-cellに
変更するような手順はあるでしょうか？

一番確実な方法は、ダイナミックWebテンプレートから新規作成することです。
ダイナミックWebテンプレートにCSSファイルを適用して、そのダイナミックWebテンプレートから新規作成することで、自動的にそのCSSファイルが読み込まれます。
代わりに作業をやっていただくことは可能でしょうか？

どうぞよろしくお願いいたします。

セル内のフォント属性を変更した時、フォント属性値以外の属性が出力される
パターンがようやくわかりました。

最初は、漢字／非漢字の問題だと思っていたのですが、元凶は Paste でした。
他のウィンドウからコピーしたものをそのまま貼り付けると元の属性はspanで
継承されますが、そこに新たな属性をかぶせると、余計な属性値がtdのスタイル
に出力されるようです。

そこで貼り付けた時、テキストのみに変更するか、もしくは貼り付けずに
直接タイプすると、出力される属性は、純粋にフォント関連の
family/size/weightなどになり、問題なく表示できるようになりました。

バグだと思いますがどうにもならないので、この辺の操作をしっかり友人に伝え
たいと思います。

お騒がせしました。

テキストだけ貼り付ける方法はあります。
貼り付けオプションボタンが表示された時に選択できます。

どうぞよろしくお願いいたします。

問題は解決しましたか？

操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください！

▲このページのトップへ