html中table标签及属性
table表格
HTML表格由table标签以及多个tr、th和td标签组成
table表⽰表格，整个表格要包含在<table></table>标签中
tr表⽰表格中的⾏，是单元格的容器，⼀⾏可以包括多个单元格
th表⽰表格中的单元格，我理解为列,th放在tr内表⽰这⼀⾏为标题⾏，其中的字体会默认粗体居中显⽰
td表⽰表格中的单元格，我理解为列，td也要放在tr内，可以理解为内容⾏
tfoot表⽰表格最后⼀⾏
<table>是<tr的上层标签
<tr>必须在⼀个<table></table>⾥⾯，它不能单独使⽤，相当于<table的属性标签.
<table>标⽰⼀个表格,<tr>标⽰这个表格中间的⼀个⾏，<td>、<th>标⽰⾏中的⼀个列，需要嵌套在<tr></tr>或<tfoot><tfoot>中间。
简单练习：
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
</head>
<body>
<table border="1" > <tr>
<th>姓名</th>
<th>学号</th>
<th>性别</th>
</tr>
<tr>
<td>lily</td>
<td>418</td>
<td>⼥</td>
</tr>
<tr>
<td>rose</td>
<td>36</td>
<td>男</td>
</tr>
<tfoot>
<td>tom</td>
<td>479</td>
<td>男</td>
</tfoot>
</table>
</body>
</html>
table标签属性
下列标签属性⼀般不建议使⽤，⽽是通过样式属性来实现
1.border标签属性：设定围绕表格的边框的宽度。实际上border标签属性不仅设置围绕表格边框的宽度，还为每个单元格添加宽度为
1px的边框；
实际开发中不建议使⽤border标签属性实现边框效果，建议通过为table、th和td设定border样式属性实现。
2.width标签属性：设定表格的宽度，该标签属性属性值如下：
不建议通过width标签属性直接设置表格宽度，建议向table标签添加width样式属性进⾏设置。
3.align标签属性：指定表格相对于周围标签的对齐⽅式
不建议通过align标签属性设置表格相对于周围标签的对齐⽅式，建议向table标签添加样式属性进⾏设置：
不建议通过cellspacing标签属性设置单元格之间的间距，建议向table标签添加border-spacing样式属性进⾏设置
不建议通过cellpadding标签属性设置单元边沿与单元内容之间的间距，建议向td或th标签添加padding样式属性来实现
6.不建议通过bgcolor标签属性设置表格背景颜⾊，建议向table标签添加background-color样式属性实现这⼀效果
7.border-collapse样式属性：设置表格的边框是否被合并为⼀个单⼀的边框，属性值如下：
table标签练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellpadding="5" > <tbody>
<tr id="HeadTD">
<td class="sort">姓名</td>
<td class="sort">学号</td>
<td class="sort">语⽂</td>
<td class="sort">数学</td>
<td class="sort">英语</td>
<td class="sort">总分</td>
<td class="sort">平均分</td>
</tr>
</tbody>
<tbody id="ContTD">
<tr>
<td>张三</td>
<td>220305</td>
<td>11</td>
<td>22</td>
<td>33</td>
<td>22</td>
<td>44</td>
</tr>
<tr>
<td>李四</td>
<td>220302</td>
<td>33</td>
<td>44</td>
<td>66</td>
<td>99</td>
<td>33</td>
</tr>
<tr>
<td>黄五</td>
<td>220307</td>
<td>22</td>
<td>55</td>
<td>22</td>
<td>55</td>
<td>66</td>
</tr>
<tr>
<td>赵六</td>
<td>赵六</td>
<td>220303</td>
<td>44</td>
<td>22</td>
<td>33</td>
<td>66</td>
<td>88</td>
</tr>
</tbody>
</table>
</body>
<script>
var HeadTD = ElementById("HeadTD");
var ContTD = ElementById("ContTD");
var HeadList = ElementsByTagName("td");
var ContTrList = ElementsByTagName("tr");
var sortArray =new Array();
var newNode;
for(var i =0; i < HeadList.length; i++){
HeadList[i].index = i;
HeadList[i].onclick=function(){
console.log(this);
if(this.className){
newNode ="";
for(var j =0; j < ContTrList.length; j++){
sortArray[j]=new Array();
sortArray[j][0]= ContTrList[j].getElementsByTagName("td")[this.index].innerText; sortArray[j][1]= j;
}
if(!isNaN(sortArray[0][0])){
sortArray.sort(sortNumber);
}else{
sortArray.sort();
}
for(var x =0; x < ContTrList.length; x++){
newNode +="<tr>"+ ContTrList[sortArray[x][1]].innerHTML +"</tr>";
}
ContTD.innerHTML = newNode;
}
}
}
}
function sortNumber(b, a){
if(a > b){
return1
}else if(a < b){
return-1
}else{
return0
}
}
</script>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论