HTML表格标签table的应用实例
浏览：0次
时间：2017年05月29日
html中表格的应用非常广泛，很多数据使用表格可以非常清晰的表达出来，表格table标签在我们的css教程里面有用过，这一节从html的角度介绍table的用法。一个表格通常包含标题caption，表头th（有垂直方向和水平方向），行tr，列td。可以对各个元素分别定义样式，下面的演示案例通过样式来区分各个元素，这样理解就深刻一些，案例为了更加清晰的区分各个单元格，没有合并表格的边框，如果需要合并，给table添加border-collapse:collapse样式即可，完整测试代码如下；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
table{
width:500px;
border:1px dashed #FF0000;
background-color:#FFFF00;
}
caption{
text-align:center;
border:1px dashed #000000;
}
th{
background-color:#00CC66;
border:1px dotted #0000FF;
}
td{
border:1px solid #000000;
background-color:#CCCCCC;
text-align:center;
}
</style>
</head>
<body>
<table>
<caption>这里是表格的标题</caption>
<tr>
<th scope="col">姓名</th>
<th scope="col">张三</th>
<th scope="col">李四</th>
<th scope="col">王五</th>
</tr>
<tr>
<th scope="row">语文</th>
<td>SEOWHY DEMO</td>
<td>SEOWHY DEMO</td>
<td>SEOWHY DEMO</td>
</tr>
<tr>
<th scope="row">数学</th>
<td>SEOWHY DEMO</td>
<td>SEOWHY DEMO</td>
<td>SEOWHY DEMO</td>
</tr>
</table>
</body>
</html>
上一篇：div怎么样显示滚动条 div显示滚动条的CSS代码下一篇：HTTP状态码表示什么,有什么作用
官方微信 扫一扫
设备采购