定义和用法
scope 属性定义将表头单元与数据单元相关联的方法。
scope 属性标识某个单元是否是列、行、列组或行组的表头。
scope 属性不会在普通浏览器中产生任何视觉变化。
屏幕阅读器可以利用该属性。
详细解释
使用 scope 属性,可以将数据单元格与表头单元格联系起来。
通过属性值 row,表头行包括的所有表格都将和表头单元格联系起来。指定 col,会将当前列的所有单元格和表头单元格绑定起来。
使用 rowgroup 和 colgroup 会将单元格的行组(由 <thead>、<tbody> 或 <tfoot> 标签定义)或列组中的所有单元格和表头单元格绑定起来(由 <col> 或 <colgroup> 标签定义)。
浏览器支持
由于不会在普通浏览器中产生任何视觉效果,很难判断浏览器是否支持 scope 属性。
语法
<td scope="value">
属性值
值 | 描述 |
---|---|
col | 规定单元格是列的表头。 |
row | 规定单元格是行的表头。 |
colgroup | 规定单元格是列组的表头。 |
rowgroup | 规定单元格是行组的表头。 |
实例
下面的例子把两个 th 元素标识为列的表头,把两个 td 元素标识为行的表头:
<table border="1">
<tr>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
<tr>
<td scope="row">1</td>
<td>January</td>
<td>$100.00</td>
</tr>
<tr>
<td scope="row">2</td>
<td>February</td>
<td>$10.00</td>
</tr>
</table>
今天用到的知识点:在获取焦点时变成可编辑的input输入框:
<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery表格可编辑修改表格里面的数值</title>
<meta name="description" content="jquery表格特效制作jquery表格可编辑任意修改里面的数值" />
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('table td').click(function(){
if(!$(this).is('.input')){
$(this).addClass('input').html('<input type="text" value="'+ $(this).text() +'" />').find('input').focus().blur(function(){
$(this).parent().removeClass('input').html($(this).val() || 0);
});
}
}).hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});
});
</script>
<style type="text/css">
/* page styles */
body{font-family:"Segoe UI", Frutiger,Tahoma,Helvetica,"Helvetica Neue", Arial, sans-serif;font-size:62.5%;}
td, th{text-align:center;border:1px solid #ddd;padding:2px 5px;font-size:1.2em;widows: 13%;}
/*demo styles*/
table{width:500px;height:200px;margin-left:30px;border-collapse:collapse;}
/* td, th{font-size:1.2em;padding:2px;width:10%;} */
th{background-color:#f4f4f4;}
caption{font-size:1.5em; font-weight:bold;margin:0 0 .5em;}
table{float:left;margin:40px 40px 0 0;}
.demo{width:500px;margin:0 auto;}
/* input */
td input{border:1px solid orange;background:yellow;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;padding:8px 0;text-align:center;width:60px;font-size:inherit;}
/* td.input{ padding:0;} */
td.hover{background:#eee;}
</style>
</head>
<body>
<div class="demo">
<table>
<caption>2009年员工产品销售走势图</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col">food</th>
<th scope="col">auto</th>
<th scope="col">household</th>
<th scope="col">furniture</th>
<th scope="col">kitchen</th>
<th scope="col">bath</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Mary</th>
<td>190</td>
<td>160</td>
<td>40</td>
<td>120</td>
<td>30</td>
<td>70</td>
</tr>
<tr>
<th scope="row">Tom</th>
<td>3</td>
<td>40</td>
<td>30</td>
<td>45</td>
<td>35</td>
<td>49</td>
</tr>
<tr>
<th scope="row">Brad</th>
<td>10</td>
<td>180</td>
<td>10</td>
<td>85</td>
<td>25</td>
<td>79</td>
</tr>
<tr>
<th scope="row">Kate</th>
<td>40</td>
<td>80</td>
<td>90</td>
<td>25</td>
<td>15</td>
<td>119</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
scope是一个非常重要的属性。本文中的例子,亲测过,可以实现编辑。