HTML05.Table
2018-08-12 本文已影响0人
快乐的提千万
<html>
<head>
<meta charset="utf-8">
<title>TABLE表格的使用示例</title>
</head>
<body>
<center>
<table width="80%" border="1" cellpadding="3" cellspacing="0" align="center">
<caption><h1>学员表</h1></caption> <!-- 设置表格标题位置 -->
<tr><th colspan="3"> 学员基本信息</th><th colspan="2">成 绩</th></tr>
<tr><th>姓 名</th><th>性 别</th><th>专 业</th><th>课 程</th><th>分 数</th></tr>
<tr align="center"> <!-- 第一行开始标记，设置居中 -->
<td>小 峰</td> <!-- 设置第一个单元格 -->
<td>男</td> <!-- 设置第二个单元格 -->
<td rowspan="2">计算机</td> <!-- 设置第三个单元格，占两行 -->
<td rowspan="2">PHP开发</td> <!-- 设置第四个单元格，占两行 -->
<td>86</td> <!-- 设置第五个单元格 -->
</tr> <!-- 第一行结束标记 -->
<tr align="center"> <!-- 第二行开始标记，设置居中 -->
<td>小 影</td> <!-- 设置第二行第一个单元格 -->
<td>女</td> <!-- 设置第二行第二个单元格 -->
<td>98</td> <!-- 设置第二行五个单元格 -->
</tr> <!-- 第二行结束标记 -->
</table> <!-- 表格结束标记 -->
<hr>
<table border = "5px" width = "800px" height = "400px">
<tr align = "center">
<td colspan = "3">合并左右三个单元格。</td>
</tr>
<tr align = "left">
<td align = "center">第一行，第一列。</td>
<td align = "right">第一行，第二列。</td>
<td >第一行，第三列。</td>
</tr>
<tr align = "right">
<td align = "left">第二行，第一列。</td>
<td rowspan = "2">合并上下两个。</td>
<td >第二行，第三列。</br><img src = "images/head1.jpg" width = "100px" alt = "乔巴"></td>
</tr>
<tr align = "center">
<td >第三行，第一列。</td>
<!--<td align = "right">第三行，第二列。</td>-->
<td align = "right">第三行，第三列。</td>
</tr>
</table>
</center>
</body> <!-- 主体标记的结束标记 -->
</html> <!-- HTML文档的结束标记 -->
