Table标签的frame和rules属性的不同表现形式
今天偶然看XHTML文档的时候发现Table还有两个不太常知道的frame和rules标签，呵呵至少对我来说，头一次发现。
英文不是非常熟悉，因此就将全部表现组合列出来对比，嘿嘿。
其中，frame的值为：默认(不设置)、void、box、border、above、below、lhs、rhs、hsides、vsides；
rules的值范围为：默认(不设置)、none、all、cols、rows、groups
手懒没有手写，利用PHP的数组循环来展示（代码如下，可保存为php然后运行），如果想直接看效果，可以点击这里浏览。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table属性的各种表现</title>
<style type="text/css">
#show{width:90%;margin:5px auto;font-size:12px;text-align:center;}
#show thead tr.toption th{background:#f0f0f0;line-height:22px;font-size:20px;}
#show tbody tr th.option{background:#fff;color:#00f;font-size:14px;padding-left:50px;text-align:left;}
#show tbody tr:hover th.option{background:#ffc;}
#show thead tr th.l{width:38%;}
#show thead tr th.r{width:82%;}
.demo {background:#fff;padding:5px;}
.demo table{background:#fff;border-color:#ddd;width:62%;margin:0 auto;}
.demo table thead tr th{background:#999;font-weight:bold;text-align:center;padding:0;line-height:20px;font-size:14px;color:#000;}
.demo table tfoot tr th{background:#999;font-weight:bold;text-align:center;padding:0;line-height:20px;font-size:14px;color:#000;}
.demo table tbody tr td{padding:2px;}
</style>
</head>
<body>
<table border="1" id="show" summary="example" frame="hsides" rules="rows" cellspacing="0" cellpadding="5">
<thead>
<tr class="toption">
<th class="l">frame=? & rules=?</th>
<th class="r">表现</th>
</tr>
</thead>
<tbody>
<?php
$option_frame = array('','void','box','border','above','below','lhs','rhs','hsides','vsides');
$option_rules = array('','none','all','cols','rows','groups');
foreach($option_frame AS $v_f){
foreach($option_rules AS $v_r){
?>
<tr>
<th class="option">frame="<?php echo $v_f;?>" rules="<?php echo $v_r;?>"</th>
<td class="demo">
<table id="table_<?php echo $v_f;?>_<?php echo $v_r;?>" summary="test <?php echo $v_f;?> <?php echo $v_r;?>" border="1" cellspacing="0" cellpadding="3"<?php echo $v_f ? ' frame="'.$v_f.'"' : '';?><?php echo $v_r ? ' rules="'.$v_r.'"' : '';?>>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>积分</th>
<th>frame</th>
<th>rules</th>
</tr>
</thead>
<tfoot>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>积分</th>
<th>frame</th>
<th>rules</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>2345234</td>
<td> <?php echo $v_f;?> </td>
<td> <?php echo $v_r;?> </td>
</tr>
<tr>
<td>李四</td>
<td>18</td>
<td>978967</td>
<td> <?php echo $v_f;?> </td>
<td> <?php echo $v_r;?> </td>
</tr>
<tr>
<td>王五</td>
<td>18</td>
<td>97876</td>
<td> <?php echo $v_f;?> </td>
<td> <?php echo $v_r;?> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<?php
}
}
?>
</tbody>
</table>
</body>
</html>
Table属性列表
| Elements | Attributes | Minimal Content Model |
|---|---|---|
| caption | Common | (PCDATA | Inline)* |
| table | Common, border (Pixels), cellpadding (Length), cellspacing (Length), frame (“void” | “above” | “below” | “hsides” | “lhs” | “rhs” | “vsides” | “box” | “border”), rules (“none” | “groups” | “rows” | “cols” | “all”), summary (Text), width (Length) | caption?, ( col* | colgroup* ), (( thead?, tfoot?, tbody+ ) | ( tr+ )) |
| td | Common, abbr (Text), align (“left” | “center” | “right” | “justify” | “char”), axis (CDATA), char (Character), charoff (Length), colspan (Number), headers (IDREFS), rowspan (Number), scope (“row” | “col” | “rowgroup” | “colgroup”), valign (“top” | “middle” | “bottom” | “baseline”) | (PCDATA | Flow)* |
| th | Common, abbr (Text), align (“left” | “center” | “right” | “justify” | “char”), axis (CDATA), char (Character), charoff (Length), colspan (Number), headers (IDREFS), rowspan (Number), scope (“row” | “col” | “rowgroup” | “colgroup”), valign (“top” | “middle” | “bottom” | “baseline”) | (PCDATA | Flow)* |
| tr | Common, align (“left” | “center” | “right” | “justify” | “char”), char (Character), charoff (Length), valign (“top” | “middle” | “bottom” | “baseline”) | (td | th)+ |
| col | Common, align (“left” | “center” | “right” | “justify” | “char”), char (Character), charoff (Length), span (Number), valign (“top” | “middle” | “bottom” | “baseline”), width (MultiLength) | EMPTY |
| colgroup | Common, align (“left” | “center” | “right” | “justify” | “char”), char (Character), charoff (Length), span (Number), valign (“top” | “middle” | “bottom” | “baseline”), width (MultiLength) | col* |
| tbody | Common, align (“left” | “center” | “right” | “justify” | “char”), char (Character), charoff (Length), valign (“top” | “middle” | “bottom” | “baseline”) | tr+ |
| thead | Common, align (“left” | “center” | “right” | “justify” | “char”), char (Character), charoff (Length), valign (“top” | “middle” | “bottom” | “baseline”) | tr+ |
| tfoot | Common, align (“left” | “center” | “right” | “justify” | “char”), char (Character), charoff (Length), valign (“top” | “middle” | “bottom” | “baseline”) | tr+ |
