table主要与tr分行,td,th分单元格一起使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
tr:hover{
background-color: chartreuse;
}
td:active{
background-color: red;
}
</style>
</head>
<body>
<table border="1px" cellspacing="1px" width="200px" height="200px" >
<tr bgcolor="gray" align="center" valign="middle">
<td>MC</td>
<td>M+</td>
<td>M-</td>
<td>MR</td>
</tr>
<tr bgcolor="aquamarine" align="center" valign="middle">
<td>AC</td>
<td>+-</td>
<td>+</td>
<td>x</td>
</tr>
<tr align="center" valign="middle">
<td>7</td>
<td>8</td>
<td>9</td>
<td bgcolor="aquamarine">-</td>
</tr>
<tr align="center" valign="middle">
<td>4</td>
<td>5</td>
<td>6</td>
<td bgcolor="aquamarine" >+</td>
</tr>
<tr align="center" valign="middle">
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="2" bgcolor="blanchedalmond">=</td>
</tr>
<tr align="center" valign="middle">
<td colspan="2">0</td>
<td valign="middle">.</td>
</tr>
</table>
<table border="1px" width="100px">
<tr>
<th>姓名</th><th>地址</th>
</tr>
<tr>
<td>李小明</td><td nowrap="nowrap">#######################################</td>
</tr> <!--td里面有nowrap,在table设置宽度时强制让它不换行-->
</table>
</body>
</html>
这个代码主要就是模仿了下计算器的界面,还有就是单元格的合并,nowrap的作用