1、tips:
width="%60":指的是外层标签宽度的60%。
border="1":table默认无边框,设置为1即可看见。
cellpadding="5":指的是表格中文字距离单元格边框的距离。
cellspacing="10":指的是边框与边框之间的距离。
align:表格中文字的水平对齐方式(center,right,left)。
valign:表格中文字的垂直对齐方式(top,middle,bottom)。
colspan="2":跨2列合并成一个单元格。
rowspan="2":跨2行合并成一个单元格。
caption:标题
thead:只能为0或者1个(表头)
tfoot:只能为0或者1个(表脚)
tbody:1到n个(表体)
注意:表格可以嵌套,但只能嵌套在<td><table></table></td>之中,不能直接写在<tr><table></table></tr>里面
代码如下:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
<h3>简单表格一</h3>
<table border="1" width="60%" cellpadding="5" cellspacing="10">
<tr>
<td>id</td>
<td>name</td>
<td>salary</td>
</tr>
<tr>
<td align="right">1</td>
<td align="center">zs</td>
<td align="left">8000</td>
</tr>
</table>
<h3>简单表格二</h3>
<table border="1" width="60%" cellpadding="5" cellspacing="10">
<tr>
<td align="center">id</td>
<td colspan="2" align="center">name+salary</td>
</tr>
<tr>
<td rowspan="3" align="center" valign="top">3</td>
<td>zs</td>
<td align="center">8000</td>
</tr>
<tr>
<td >ls</td>
<td rowspan="2" valign="middle" align="center">6000</td>
</tr>
<tr>
<td>ww</td>
</tr>
</table>
<h3>简单表格三</h3>
<!--
caption:标题
thead:只能为0或者1个(表头)
tfoot:只能为0或者1个(表脚)
tbody:1到n个(表体)
-->
<table border="1" width="60%" cellpadding="5" cellspacing="10">
<caption>员工信息</caption>
<thead>
<tr>
<td>id</td><td>姓名</td><td>月薪</td>
</tr>
</thead>
<tfoot>
<tr>
<td>合计</td><td colspan="2">¥40000</td>
</tr>
</tfoot>
<!--第一个tbody-->
<tbody>
<tr>
<td>1</td><td>张三</td><td>8000</td>
</tr>
<tr>
<td>2</td><td>李四</td><td>6000</td>
</tr>
<tr>
<td>3</td><td>王五</td><td>6000</td>
</tr>
</tbody>
<!--第二个tbody-->
<tbody>
<tr>
<td>4</td><td>张三2</td><td>8000</td>
</tr>
<tr>
<td>5</td><td>李四2</td><td>6000</td>
</tr>
<tr>
<td>6</td><td>王五2</td><td>6000</td>
</tr>
</tbody>
</table>
</body>
</html>
界面如下: