学习目标
掌握表格相关标记的使用方法；
掌握HTML文档结构，学会编写简单的HTML程序；
熟悉使用table进行页面布局的方法。
学习内容
利用Table完成CASIO计算器的外观设计。
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="class.css" /><!--外部样式表链接--> <style> img{width:90px;height:30px;} </style> </head> <body> <div style="background-color: yellow;width: 402px;" > <table id="tab0" borderframe=void width="100%" height="40" align="left"> <tr><td align="left"><img src="photo.jpg"></td> </tr> <table id="tab" border="1" width="400px" height="400px"> <tr> <th bgcolor="white" colspan="4"></th> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>+</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> <td>-</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> <td>*</td> </tr> <tr> <td>0</td> <td>+</td> <td>CE</td> <td>/</td> </tr> </table> </table> </div> </body> </html>
CSS
#tab tr td{ text-align: center; } #tab tr th{ text-align:left; height: 60px; } #tab{table-layout: fixed; background-color: yellow; border-spacing: 20px 20px; } #img{vertical-align:text-bottom;}
结果展示
