※しろくろのへや:NewTableから移動してきました。 -- ぱんだ
以下のルールを新設。
行と列のグループ化
このセクションでとりあげる機能は、対応しないブラウザでは期待通りには表現できません。Netscape Navigatorの場合、バージョン6/Mozillaで行のグループ化のみ対応しているようです。
なんでIEとNetscapeで見た目が違うんや X(
これが書きたくて実験をはじめた。
|>|>|CENTER:20|c |1|>|2| |~|3|4| |>|5|~|
1 | 2 | |
3 | 4 | |
5 |
|>|2x1|foot|f <tfoot> |>|2x2|body| <tbody> |>|~|body| <tbody> |~A|~B|~C|h <thead>
A | B | C |
---|---|---|
2x1 | foot | |
2x2 | body | |
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 |
---|---|---|---|
TOTAL | 50 | 70 | 120 |
41.7% | 58.3% | 100% | |
2001 | 20 | 30 | 50 |
2002 | 30 | 40 | 70 |
|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; }
|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 | ||
2001 | 20 | 30 | 50 | ||
2002 | 30 | 40 | 70 | ||
TOTAL | 50 | 70 | 120 |
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)