HTML表格
表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母
td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
格的表头使用 <th> 标签进行定义,大多数浏览器会把表头显示为粗体居中的文本.
HTML 表格标签
标签 描述
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
colspan表示合并列数,rowspan则表示合并行数
cellspacing表示单元格间距,cellpadding表示单元格边距
页眉主体页脚的范例,对一个复杂的界面做一个排版,以至于浏览器解析的时候不会出现问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格范例</title>
</head>
<body>
<table>
<thead>
<tr>
<th> Title </th>
<th> Price </th>
<th> Avaliable </th>
<tr>
</thead>
<tbody>
<tr>
<td> CSS </td>
<td> $29 </td>
<td> 16 </td>
</tr>
<tr>
<td> Java </td>
<td> $35 </td>
<td> 10 </td>
</tr>
</tbody>
<tfoot>
<tr>
<td> Total </td>
<td> $64 </td>
<td> 26 </td>
</tr>
</tfoot>
</table>
</body>
</html>
多属性结合表格范例
css样式代码,声明一些表格样式:放body代码之前
<style>
.tabtop13 {
margin-top: 13px;
}
.tabtop13 td{
background-color:#ffffff;
height:25px;
line-height:150%;
}
.font-center{ text-align:center}
.btbg{background:#e9faff !important;}
.btbg1{background:#f2fbfe !important;}
.btbg2{background:#f3f3f3 !important;}
.biaoti{
font-family: 微软雅黑;
font-size: 26px;
font-weight: bold;
border-bottom:1px dashed #CCCCCC;
color: #255e95;
}
.titfont {
font-family: 微软雅黑;
font-size: 16px;
font-weight: bold;
color: #255e95;
background: url(../images/ico3.gif) no-repeat 15px center;
background-color:#e9faff;
}
.tabtxt2 {
font-family: 微软雅黑;
font-size: 14px;
font-weight: bold;
text-align: right;
padding-right: 10px;
color:#327cd1;
}
.tabtxt3 {
font-family: 微软雅黑;
font-size: 14px;
padding-left: 15px;
color: #000;
margin-top: 10px;
margin-bottom: 10px;
line-height: 20px;
}
</style>
body代码:表格的核心逻辑
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" class="biaoti" height="60">受理员业务统计表</td>
</tr>
<tr>
<td align="right" height="25">2017-01-02---2017-05-02</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#cccccc" class=&#