PukiWiki/1.4

しろくろのへや:NewTableから移動してきました。 -- ぱんだ



テーブル機能強化

以下のルールを新設。

  • '>'だけのセルは右のセルと連結(colspan)
  • '~'だけのセルは上のセルと連結(rowspan)
  • '~'に続けて何か書くと<th>
  • 行末に'h'と書くと<thead>、'f'と書くと<tfoot>、何も書かないと<tbody>,rowspanで上のセルと接続している行は属性を(強制的に)引き継ぐ
    • head/foot/bodyの出現順序は問わない。変換時に適当に並べ替える。
  • 行末に'c'と書くと各列のデフォルトアラインメント&列幅が指定できる。通常セルと同じく'>'でグループ化
    • colgroupタグで済めば楽なのだが、こいつがNetscapeでは効かないので、苦肉の策として、全てのセルにalignと(colspan==1のとき)widthを埋め込んでいる。
      http://kanzaki.com/docs/html/htminfo16.html#S26より引用

      行と列のグループ化
      このセクションでとりあげる機能は、対応しないブラウザでは期待通りには表現できません。Netscape Navigatorの場合、バージョン6/Mozillaで行のグループ化のみ対応しているようです。

      • もともとPukiWiki 1.3.2はNetscape 4.xやIE4などには対応していない(切り捨てている)ので、colgroupやcolを使用したほうがいいと思います。tdやthタグのwidthはHTML4.01 StrictやXHTML 1.0/1.1では使用できません。HTML4.01 Transitional/Framesetでも非推奨属性になっています。 -- reimy 2002-09-17 (火) 18:55:29
      • いや、それが、NN6/MOZでも駄目なんですわ。 -- ぱんだ 2002-09-17 (火) 19:02:41
      • どうしてもth、tdに直接widthを指定するのであれば、style="width:ー"とする必要がある。-- reimy 2002-09-17 (火) 19:04:36
      • なるほど。 -- ぱんだ 2002-09-17 (火) 19:21:39
    • おまけにNetscapeでは<table>にrules="groups"を指定すると罫線が変になるし。
  • この辺で打ち止め :) *1
  • でも、C(olumn)SUM:/R(ow)SUM:なんてのはとても面白そう…(自爆)
  • サマリ、キャプション…うーん。
    • というか、ここまでやるとは…(笑い) --reimy 2002-09-17 (火) 19:35:36
      • どこまでできるか、が興味の対象で :) -- ぱんだ 2002-09-17 (火) 19:45:31
  • さらにセルの文字色/背景色を指定できる機能が追加。(開発日記/2003-05-26)
  • さらにテーブル内のフォントサイズを一括指定できる機能が追加。(BugTrack/354)
  • official:質問箱4/4 から来ました。「苦肉の策として、全てのセルに~」とありますが、colgroupタグなどを使うように仕様の変更などはあるのでしょうか?
    全てのセルに値が埋め込まれてしまうと、PCではいいのですが、ケータイからだとパケット量がすごいことになってしまいます。当方、約1000個位セルがある表組みを作成しているので、すべて埋め込みだと…
    どうか検討の方よろしくお願いします。 -- IcI? 2007-02-28 (水) 19:20:00

サンプル

なんでIEとNetscapeで見た目が違うんや X(

  • テーブルがへげへげなのはNetscapeの伝統(苦笑) --reimy 2002-09-17 (火) 19:37:20

四畳半

これが書きたくて実験をはじめた。

|>|>|CENTER:20|c
|1|>|2|
|~|3|4|
|>|5|~|
12
34
5

<thead><tfoot><tbody>をでたらめに並べてみる

|>|2x1|foot|f  <tfoot>
|>|2x2|body|   <tbody>
|>|~|body|     <tbody>
|~A|~B|~C|h    <thead>
ABC
2x1foot
2x2body
body

複雑な表

本来、style_thの方がcolgroupで指定したalignより強いはずなのだが、ここではそうなっていない。(Netscapeがcolgroupに対応するまでの)仕様ということでひとつ。

|CENTER:80|>|RIGHT:|RIGHT:100|c
|>|>|>|CENTER:表|h
|~年度|CENTER:~男|CENTER:~女|CENTER:~TOTAL|h
|~2001|20|30|50|
|~2002|30|40|70|
|~TOTAL|~50|~70|~120|f
|~|41.7%|58.3%|100%|     <-'f'を引き継ぐ
年度TOTAL
TOTAL5070120
41.7%58.3%100%
2001203050
2002304070

セルの文字色と背景色

|BGCOLOR(red):COLOR(white):''こんな感じ''|
こんな感じ

スタイルシート

こんな感じ。

thead td.style_td,
tfoot td.style_td { background-color:#D0D8E0; }
thead th.style_th,
tfoot th.style_th { background-color:#E0E8F0; }

.style_table {
	margin:auto;
	border:0px;
	padding:0px;
	text-align:left;
	background-color:#ccd5dd;
}

.style_th {
	text-align:center;
	background-color: #EEEEEE;
	padding: 5px;
	margin: 1px;
}

.style_td {
	background-color: #EEF5FF;
	padding: 5px;
	margin: 1px;
}

問題点

  • 空要素のセルとcolspanとの区別がつかない。 -- reimy 2002-09-16 (月) 11:56:06
    • 空要素って必要でしょうか。 -- ぱんだ 2002-09-16 (月) 12:08:17
      • 必要です。すでに多数使用してます。 -- reimy 2002-09-16 (月) 12:38:35
      • うーむ :) -- ぱんだ 2002-09-16 (月) 13:29:46
      • <th>や<thead><tfoot><tbody>の機能がないのを補うために、空要素で罫線代わりに多用していますので。--reimy 2002-09-16 (月) 14:55:01
        |CENTER:年度||CENTER: 男 |CENTER: 女 ||CENTER:TOTAL|
        |||||||
        |CENTER:2001||RIGHT:20|RIGHT:30||RIGHT:50|
        |CENTER:2002||RIGHT:30|RIGHT:40||RIGHT:70|
        |||||||
        |CENTER:TOTAL||RIGHT:50|RIGHT:70||RIGHT:120|
        年度 男  女 TOTAL
        2001203050
        2002304070
        TOTAL5070120
  • |(バー)を既に使っているので難しいですが、RTなど他の記述法と互換性が欲しいところです。 -- tejicube 2002-10-11 (金) 21:12:16
    • ブロックを引数に取れるプラグインが書けるようになれば…。 :) -- ぱんだ 2002-10-25 (金) 16:50:09
    • YukiWikiTableからRTライクな書式へ持っていこうとしています。 -- ぱんだ 2002-10-30 (水) 00:03:46
  • ぼちぼち、差分公開してほしいなあ。 -- reimy 2002-12-29 (Sun) 15:38:05
    • これもconvert_htmlの中に入っています。 -- ぱんだ 2002-12-29 (日) 18:00:13
 

CAPTION実装してみました。

from:名無しさん -- 2006-01-03 (火) 02:08:43
CAPTION実装してみました。
表の最初の行で

CAPTION(文字列): を挿入するだけ。どの列にも何回でも挿入できますが、最後尾の列が適用されます。
(二行目以降に入れても無効となります:仕様?)
1.4.6Releaceからの差分的なもの:

以下、変更点

class Table extends Element
{
	var $type; 

	var $types;
	var $col; // number of column
	var $caption;
	function Table($out)
	{
		parent::Element();
		$cells       = explode('|', $out[1]);
		$this->col   = count($cells);
		$this->type  = strtolower($out[2]);
		$this->types = array($this->type);
		$is_template = ($this->type == 'c');
		$row     = array();
		$caption = array();
		foreach ($cells as $key => $cell)
			$cells[$key] = $this->readCaption( $cell );
		foreach ($cells as $cell)
			$row[] = & new TableCell($cell, $is_template);
		$this->elements[] = $row;
	}
	function readCaption($text){
		define('CAPTION_PLANE' , 1);
		define('CAPTION_TOP'   , 2);
		define('CAPTION_BOTTOM', 3);	
		define('CAPTION_TEXT'  , 4);
		$caption_match_type = '/^(?:CAPTION\((.+)\)|CAPTIONTOP\((.+)\)|CAPTIONBOTTOM\((.+)\)):(.*)$/';
 		while (preg_match($caption_match_type, $text, $matches)) {
			if ($matches[CAPTION_PLANE]) {
				$this->caption['text']  = htmlspecialchars($matches[CAPTION_PLANE]);
				$this->caption['align'] = NULL;
			} else if ($matches[CAPTION_TOP]) {
				$this->caption['text']  = htmlspecialchars($matches[CAPTION_TOP]);
				$this->caption['align'] = 'top';
			} else if ($matches[CAPTION_BOTTOM]) {
				$this->caption['text'] = htmlspecialchars ($matches[CAPTION_BOTTOM]);
				$this->caption['align'] = 'bottom';
			}
			$text = $matches[CAPTION_TEXT];
		}
		return $text;
	}
	function canContain(& $obj)
	{
		return is_a($obj, 'Table') && ($obj->col == $this->col);
	}
	function & insert(& $obj)
	{
		$this->elements[] = $obj->elements[0];
		$this->types[]    = $obj->type;
		return $this;
	}
	function toString()
	{
		static $parts = array('h'=>'thead', 'f'=>'tfoot', ''=>'tbody');
		// rowspanを設定(下から上へ)
		for ($ncol = 0; $ncol < $this->col; $ncol++) {
			$rowspan = 1;
			foreach (array_reverse(array_keys($this->elements)) as $nrow) {
				$row = & $this->elements[$nrow];
				if ($row[$ncol]->rowspan == 0) {
					++$rowspan;
					continue;
				}
 				$row[$ncol]->rowspan = $rowspan;
				while (--$rowspan) // 行種別を継承する
					$this->types[$nrow + $rowspan] = $this->types[$nrow];
				$rowspan = 1;
			}
		}
		// colspan,styleを設定
		$stylerow = NULL;
		foreach (array_keys($this->elements) as $nrow) {
			$row = & $this->elements[$nrow];
			if ($this->types[$nrow] == 'c')
				$stylerow = & $row;
			$colspan = 1;
 			foreach (array_keys($row) as $ncol) {
				if ($row[$ncol]->colspan == 0) {
					++$colspan;
					continue;
				}
				$row[$ncol]->colspan = $colspan;
				if ($stylerow !== NULL) {
					$row[$ncol]->setStyle($stylerow[$ncol]->style);
					while (--$colspan) // 列スタイルを継承する
						$row[$ncol - $colspan]->setStyle($stylerow[$ncol]->style);
				}
				$colspan = 1;
			}
		}
		// テキスト化
		$string = '';
		// CAPTIONの挿入
		// 上下指定 有り
		if( $this->caption['align'] != NULL ){
			$string .= $this->wrap( $this->caption['text'], 'caption',
			 ' class="style_caption"' . ' style="caption-side:'.$this->caption['align'] .';"'
			);
		}else{ // 上下指定 無し
			$string .= $this->wrap( $this->caption['text'], 'caption' ,
			 ' class="style_caption"');
		}
		
		foreach ($parts as $type => $part)
		{
			$part_string = '';
			foreach (array_keys($this->elements) as $nrow) {
				if ($this->types[$nrow] != $type)
					continue;
				$row        = & $this->elements[$nrow];
				$row_string = '';
				foreach (array_keys($row) as $ncol)
					$row_string .= $row[$ncol]->toString();
				$part_string .= $this->wrap($row_string, 'tr');
			}
			$string .= $this->wrap($part_string, $part);
		}
		$string = $this->wrap($string, 'table', ' class="style_table" cellspacing="1" border="0"');
		return $this->wrap($string, 'div', ' class="ie5"');
//		return $this->wrap($string, 'span', ' class="ie5"');
	}
}
(lib/convert_html.php)
.style_caption{
	font-weight:bold;
	color:#000000;
}
(skin/pukiwiki.css.php)

*1 際限なくなる…

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2007-02-28 (水) 23:40:08
Site admin: PukiWiki Development Team

PukiWiki 1.5.2+ © 2001-2019 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u7. HTML convert time: 0.215 sec.

OSDN