![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2021-05-17T09:00:02+09:00","","") #author("2022-06-09T17:28:15+09:00","","") // &size(24){pukiwikiで表組みの表示位置を変えたい}; ----- *表組みの表示位置を変えたい [#b6dc0bed] #contents ** 表直前に'LEFT:','CENTER:','RIGHT:'を書くことでテーブルの中央寄せ/右寄せ [#v24d7da4] // -1.4.7 - [[official:質問箱4/2]] // -1.4.3 - [[official:続・質問箱/194のログ>#me4ed01d]] 使用法 RIGHT: |右寄せ| LEFT: |左寄せ| ''&color(red){注意};:'' この方法は、IE5互換モードではうまく見えません。HTML に XML 宣言（<?xml ....>）があると IE6 は IE5互換モードで動作します。 PukiWiki のデフォルトはXML 宣言を必要とするXHTML1.1 で出力するので、出力しないように設定変更や改造をする必要があります。（詳しくは、[[official:PukiWiki/Download/1.4.5#pf0190af]]や[[BugTrack/423]]および下記の質問ログなどを参照） ** 左寄せ（固定）に変更したいだけの場合 [#v41973f1] - [[表の中央寄せを左寄せにしたい>#pcb34202]] などの回答内容 pukiwiki.css.php .style_table { padding:0px; border:0px; - margin:auto; text-align:left; color:inherit; background-color:#ccd5dd; } -div.ie5 { text-align:center; } +div.ie5 { text-align:left; } **style.inc.php を使用した左/中央/右寄せ [#f97c8b8d] [[official:自作プラグイン/style.inc.php]] をインストール pukiwiki.css.php .table_left .style_table { margin:auto auto auto 0px; } .table_center .style_table { margin: auto; } .table_right .style_table { margin:auto 0px auto auto; } .table_left div.ie5 { text-align:left; } .table_center div.ie5 { text-align:center; } .table_right div.ie5 { text-align:right; } を .style_table, div.ie5 より下に追加 使用法（複数行プラグイン形式を有効） #style(class=table_left){{ |table| }} #style(class=table_center){{ |table| }} #style(class=table_right){{ |table| }} **表組み自体をページの左に寄せたい [#bd27370d] 表組み自体をページの左に寄せたいのですが、CSSいじる以外の方法はありますか？ また、IEではCSSをいじったことでちゃんと表自体が左側によったのですが、Mozilla Firebirdだとセンターのままです。 :回答| -[[Ｌ]] &new{2003-11-06 (THU) 00:42:51}; ~text-align:center;で中央に表示されるのってIEのバグだったんですね。.style_tableにmargin-left:0px;margin-right:0px;とすることで解決できました。 --[[reimy]] &new{2003-11-06 (THU) 07:52:59}; ~IEの場合、DOCTYPEの前にXML宣言があるとW3C標準モードではなく、IE5互換モードでレンダリングされてしまう(これがIE6のバグ)ため、text-align:centerでtableなどブロック型要素までセンタリングされて表示されてしまいます。PukiWikiでは、tableタグを<div class="ie5">や<div class="ie5_body">で囲むことでIE5互換モードでもW3C標準モードでも同じように表示されるようにしてあります。 -[[Ｌ]] &new{2003-11-06 (THU) 00:43:31}; ~margin-right:0px;ではなくてmargin-right:auto;ですね。失礼致しました。 --[[reimy]] &new{2003-11-06 (THU) 07:44:31}; ~表組みを左寄せ、センタリング、右寄せするための差分が[[しろくろのへや>しろくろのへや:PukiWiki]]で公開されています。ただし、この差分ではIEのIE5互換モードでは正しく表示されないので、スキンのDOCTYPEの直前にあるXML宣言を削除する必要があります。その場合、IE6でも正常に表示されるようになります(IE5はW3C準拠じゃないのでダメ)。 ~なお、XML宣言はcharsetがutf-8の場合は省略してもよいことになっていますが、euc-jpやshift-jisなどの場合は省略してはいけないことになってます(けど、IE対策としては仕方がないでしょう)。 **表の配置指定がうまくいかない [#c018ef84] 1.4 以降で「表の外でもCENTER:やRIGHT:が使えるようにしました」とアナウンスされていますが、以下の記述があった場合 RIGHT: |AAA|BBB| |111|222| で、表が右に貼り付くという解釈で良いのでしょうか？ だとしたら、うまく動いていないと思うのですが、私の環境だけでしょうか？ :回答| -[[reimy]] &new{2003-11-13 (THU) 18:30:52}; ~従来はRIGHT:、LEFT:、CENTER:は表のセル内のインライン要素に対してしか使用できませんでした。1.4以降は、表の外のインライン要素に対してRIGHT:、LEFT:、CENTER:を使用することが可能になりました。表(テーブル)はインライン要素ではなくブロック要素ですので、RIGHT:、LEFT:、CENTER:で表示位置を指定することはできません。 -[[reimy]] &new{2003-11-13 (THU) 18:32:37}; ~表(テーブル)の表示位置をRIGHT:、LEFT:、CENTER:で指定するための差分は[[しろくろのへや:PukiWiki]]にあります。近々、cvsに反映される予定です。 -現行の1.4.5用のパッチはありませんか？ -- [[nemo]] &new{2005-09-28 (水) 16:47:53}; -[[dev:PukiWiki/1.4/ちょっと便利に/テーブルの中央寄せor右寄せ]] -- &new{2005-09-28 (水) 19:22:28}; **表の中央寄せを左寄せにしたい [#x07bf3c6] 表組みをすると標準で中央に表示されるようになってますが，これを左寄せに変更したいのですが，うまくいきません． この辺をかえればいいと思われる html.phpの244行目 rray_push($result,"<div class=\"ie5\"><table class=\"style_table\" cellspacing=\"1\" border=\"0\">"); のdivのクラスを新しくつくって .textleft{ text-align:left; } これを読むように変えてみたのですが，何も変化ありません． ほかになにか変えなければならないのでしょうか？ :関連| - [[official:続・質問箱/194>#me4ed01d]] table_align.diffの当て方 (1.4.3向けのパッチあり) :回答| -[[reimy]] &new{2003-11-16 (SUN) 12:59:43}; ~ie5のクラスはW3C非準拠のInternet Explorer 5/5.5で正常に表示させるための対策ですので、その部分だけを変更してもW3C準拠のブラウザでは左寄せにはなりません。style_tableのクラスに対するcssも変更する必要があります。具体的には下記のように変更してください。html.phpの変更は必要ありませんので元に戻しておいてください。 .style_table { padding:0px; border:0px; margin:auto; + margin-left:0px; text-align:left; color:inherit; background-color:#ccd5dd; } div.ie5 { - text-align:center; + text-align:left; } ~-[[reimy]] &new{2003-11-16 (SUN) 13:08:51}; ~なお、表組みの位置をLEFT:、CENTER:、RIGHT:で指定できるようにする差分が[[しろくろのへや:PukiWiki]]で公開されています。この差分を当てる場合は、上記の変更の必要はありません。 -[[UNO]] &new{2003-11-16 (SUN) 16:58:40}; ~無事に左寄せにできました．ありがとうございます． -表組みを左寄せで表示させたいと思い上記の変更をしたのですがうまくいきません。変更したのはdefaule.en.cssとdefault.ja.cssを .style_table { padding:0px; border:0px; margin:auto; + margin-left:0px; text-align:left; color:inherit; background-color:#ccd5dd; } div.ie5 { - text-align:center; + text-align:left; } と変更しました。バージョンは1.4.4です。どうしてもわかりません。教えてください。 ~-- [[kai]] &new{2004-11-16 (火) 12:57:54}; -すみません。なんだか時間がたったらきちんと左寄せになりました。 -- [[kai]] &new{2004-11-16 (火) 13:42:40}; **table_align.diffの当て方 [[official:続・質問箱/194]]より移行 [#me4ed01d] ~表の左寄せについて、質問箱/327を参考に何とかやってみたのですが、上手く行きません。table_align.diffをダウンロードし、patch.exeをcmdを用いて実行、 patch > table_align.diff と入力する事によって、doneの表示がなされ、一応はパッチ当てが成功したように見えました。(convert_html.php.origとconvert_html.php.rejが生成されました) ~その後、convert_html.phpをサーバに転送し、 LEFT: |表| のように記述し、ページの更新を行いましたが、依然として中寄せのままでした。 もはや私では理由が分かりかね、ご助言を頂きに来た次第です。パッチの当て方が良くなかったのでしょうか？当方初心者につき易しく教えて頂けませんでしょうか。 ~OS：Win2000、ブラウザ：DonutP 5.0β4 :回答| table_align_143.diff Index: convert_html.php =================================================================== RCS file: /cvsroot/pukiwiki/pukiwiki/convert_html.php,v retrieving revision 1.62 diff -u -r1.62 convert_html.php --- convert_html.php 18 Mar 2004 09:52:52 -0000 1.62 +++ convert_html.php 28 May 2004 12:25:38 -0000 @@ -502,6 +502,7 @@ var $type; var $types; var $col; // number of column + var $align = 'center'; function Table(&$root, $text) { @@ -611,13 +612,14 @@ } $string .= $this->wrap($part_string, $part); } - $string = $this->wrap($string, 'table', ' class="style_table" cellspacing="1" border="0"'); + $string = $this->wrap($string, 'table', ' class="style_table_'.$this->align.'" cellspacing="1" border="0"'); return $this->wrap($string, 'div', ' class="ie5"'); } } class YTable extends Element { // , var $col; + var $align = 'center'; function YTable(&$root, $text) { @@ -687,7 +689,7 @@ { $rows .= "\n<tr class=\"style_tr\">$str</tr>\n"; } - $rows = $this->wrap($rows, 'table', ' class="style_table" cellspacing="1" border="0"'); + $rows = $this->wrap($rows, 'table', ' class="style_table_'.$this->align.' cellspacing="1" border="0"'); return $this->wrap($rows, 'div', ' class="ie5"'); } } @@ -756,6 +758,10 @@ } function canContain(&$obj) { + if (is_a($obj,'Table') or is_a($obj,'YTable')) + { + $obj->align = $this->align; + } return is_a($obj, 'Inline'); } function toString() Index: skin/default.en.css =================================================================== RCS file: /cvsroot/pukiwiki/pukiwiki/skin/default.en.css,v retrieving revision 1.29 diff -u -r1.29 default.en.css --- skin/default.en.css 3 Apr 2004 15:56:08 -0000 1.29 +++ skin/default.en.css 28 May 2004 12:25:38 -0000 @@ -131,11 +131,30 @@ color:inherit; background-color:#E0E8F0; } -.style_table +.style_table, +.style_table_center { padding:0px; border:0px; margin:auto; + text-align:left; + color:inherit; + background-color:#ccd5dd; +} +.style_table_left +{ + padding:0px; + border:0px; + margin:auto auto auto 0px; + text-align:left; + color:inherit; + background-color:#ccd5dd; +} +.style_table_right +{ + padding:0px; + border:0px; + margin:auto 0px auto auto; text-align:left; color:inherit; background-color:#ccd5dd; Index: skin/default.ja.css =================================================================== RCS file: /cvsroot/pukiwiki/pukiwiki/skin/default.ja.css,v retrieving revision 1.30 diff -u -r1.30 default.ja.css --- skin/default.ja.css 3 Apr 2004 15:56:08 -0000 1.30 +++ skin/default.ja.css 28 May 2004 12:25:38 -0000 @@ -132,11 +132,30 @@ color:inherit; background-color:#E0E8F0; } -.style_table +.style_table, +.style_table_center { padding:0px; border:0px; margin:auto; + text-align:left; + color:inherit; + background-color:#ccd5dd; +} +.style_table_left +{ + padding:0px; + border:0px; + margin:auto auto auto 0px; + text-align:left; + color:inherit; + background-color:#ccd5dd; +} +.style_table_right +{ + padding:0px; + border:0px; + margin:auto 0px auto auto; text-align:left; color:inherit; background-color:#ccd5dd; -[[LS]] &new{2004-05-29 (SAT) 08:10:28}; ~皆様、コメントありがとうございます。「patch < ･･･」については了解しております。ここへ書き込む時のミスでした。その後の経過を報告いたします。 ~早速、table_align_143.diffをDLし、現在の状態にパッチ当てを行ってみたのですが上手く行かず、pukiwiki1.4.3を再度DLし、デフォルトの状態のconvert_html.phpと取り替えてから再度パッチ当てを行いました。その際、￥skin内のdefault.ja.cssとdefault.en.cssも変化している事に気付き、（これも*.rejファイルが生成されていました）これらもデフォルトのものと交換しています。 ~それでも上手く行かず、default.ja.cssが自分の使用しているスキンのものでないと効果が反映されないのかなと思い、default.ja.css（デフォルト）とdefault.ja.css（パッチ当て後）を比較してみて異なっていた部分「.table_style」以下を、default.ja.css（自分のスキン）にも手作業で変更を加えてみました。これらのファイル「default.ja.css、default.en.css、 default.ja.css（自分のスキン）、convert_html.php」を全てサーバに転送しましたが、依然として改善が見られない状態です。 ~今回転送したファイルについては、「*.rej」は生成されていませんでした。 ~以上です。再びご指導宜しくお願い致します。 -名無しさん &new{2004-05-29 (SAT) 09:11:44}; ~ひょっとして、IEで見ていませんか？[[しろくろのへや:PukiWiki]]には次のような記述があります。 互換モードのIEではうまく見えないかも。(しろくろのへやでは XML宣言を出力しないことにしてこの問題に対応している…) 標準にこの差分を当てたものだと、手元の環境では、IE5.5→効果無、FireFox0.8→OK、Opera7.23→OKという結果でした。 ~パッチ当てがうまくいっていないのは、table_align_143.diffの改行コードがCRLFになっているからではないでしょうか？試しにその辺を考慮してやってみたら、問題無く成功しました。 -[[reimy]] &new{2004-05-29 (SAT) 09:57:43}; ~[[dev:PukiWiki/1.4/ちょっと便利に/テーブルの中央寄せor右寄せ]]参照。 ~IE6はW3C準拠モードを持っていますが、XML宣言があるとIE5互換モードでレンダリングしてしまいます。なお、IE5.xはW3C準拠モードを持っていません。 ~しろくろのへやでは、UTF-8化して、XML宣言を出力しないことで対処しています((EUC-JPのままでは、XML宣言を省略できません。UTF-8またはUTF-16の場合のみ省略可能。)。pukiwiki.orgでもUTF-8化とともに、IEに対してはXML宣言を出力しないことで対処しています。 ~table_align.diffでIE6でも正常にセンタリングや右寄せが反映されるようにするには、しろくろのへややpukiwiki.orgと同様の処置が必要です。 -名無しさん &new{2004-05-29 (SAT) 17:58:01}; ~DonutP は IE コンポーネントですよね？ ということでだめなのだと思います。デフォルトで左寄せで左寄せしか特に使わないのならば default.ja.css 中で div.ie5 { text-align:left; } .style_table { margin: auto auto auto 1em; } のようにすることでも可能だと思います。これで大丈夫ですよね？ちょっと不安( ;^^)ﾍ.. --名無しさん &new{2004-05-29 (SAT) 18:15:15}; ~IE5互換モードでは、style_table_center,style_table_right,style_table_leftの内容が機能しないので、div.ie5とstyle_tableをいじっても意味なし。 --名無しさん &new{2004-05-29 (SAT) 21:20:03}; ~デフォルトで、とはこのパッチを使用しないでの意味です。 -[[LS]] &new{2004-05-30 (SUN) 12:02:02}; ~皆様、ご指導ありがとうございます。 なるほど、仕様上無理だったのですね。 reimyさんのおっしゃる、「UTF-8化して、XML宣言を出力しないことで対処」 と言う事については、私には不勉強な部分が多くて分かりませんでした。 今回の件ではパッチの当て方等を学ぶ事ができたので、 取り敢えずそれで良しとして、表寄せ機能については諦める事にします。 最後に、もう一度コメントを頂いた方々に感謝を。お世話になりました。 -名無しさん &new{2004-07-22 (THU) 15:56:34}; ~今さらですが、、、私も左寄せにチャレンジしてみました。~ まず、1.4.3のdiffファイルと私の方で持っているconvert～のファイルの記述が合致しなかった為~ patchコマンドに失敗したので、手動で当てました。~ 次に、LSさんと同じように、「UTF-8化して、XML宣言を出力しないことで対処」ではまったのですが~ [[pukiwiki:PukiWiki-official/仕様]]を見つつ~ init.phpの define('SOURCE_ENCODING','EUC-JP'); を define('SOURCE_ENCODING','UTF-8'); に変更しました。 その後、"XML宣言を出力しない"ですが、上と同じトコロに出ているZIPファイルを解凍し~ "ie5.ja.css"、"pukiwiki.skin.ja.php"の二つを自分のskinフォルダに入れたところ~ 見事にIEでも左寄せが可能になりました。~ ただし、自分の設定していたskinに戻すのがやっかい、なのと今までのファイルを 全てUTF-8にしなくちゃいけないのでは、と思い現状はモトに戻しています。~ 初心者にはちょっとハードルが高そうでした。&sad; **表組みを左寄せにできない [[official:続・質問箱/144]]より移行 [#u25b6fe7] ~表組みをデフォルトで左寄せにしたいと思うのですが、 skinフォルダのdefault.ja.cssを .style_table { padding:0px; border:0px; margin-left:0px;margin-right:auto; text-align:left; color:inherit; background-color:#ccd5dd; } このようにしてみたのですが左寄せに見えません。 環境はIE6.0です。 過去の質問を見ながらいろいろ試してみたのですが上手くいかないので、どうかご教授願えたらと思います。 :回答| ~「表組み 左寄せ」あたりをキーワードに検索で出てくるページは御覧になってますか？ いろいろ試した内容＆どうダメだったかを書いていただけると良いかもしれません。 -[[reimy]] &new{2004-05-04 (TUE) 17:10:59}; ~表組みを左寄せにする方法は[[official:質問箱/309>#k9ad435a]]、[[official:質問箱/327>#pcb34202]]参照。 ~表組みを''デフォルトで''左寄せにしたい場合は、[[official:質問箱/327>#pcb34202]]のコメントにあるように、<table class="style_table">のmarginやtext-alignだけでなく、それを囲むIE5対策の<div class="ie5">のtext-alignを変更する必要があります。 -[[upa]] &new{2004-05-04 (TUE) 17:47:04}; ~<div class="ie5">の設定を変えましたら無事に左寄せできました。ご親切にどうもありがとうございます。 *ブラウザ側の問題 [#od3dd6fe] このサイトで作成されてる各ページの中で、表を入れてあるものがある。 しかし、見ているブラウザによって表が左寄せにならないブラウザもある。 クロムをベースにしているブラウザの場合、シークレットモードにしないと正しく表示されない。 // // ここまで
