html(二)布局.ppt

网页设计基础
静语计算机协会
辉翔网络有限公司
HTML语言与网页布局
学****目标
了解网页布局的方法
掌握使用表格布局的方法。
学会使用Dreamweaver表格布局。
静语计算机协会
表格
<table>
<tr>
     <td></td>
</tr>
</table>
静语计算机协会
table的属性
< table align=“center” bgcolor=“lightblue”
border="1" width=#height=# cellspacing=# >
静语计算机协会
表格尺寸设置<table border width=# height=#>
<table border width=170 height=100>   <tr><th>Food</th>
<th>Drink</th>
<th>Sweet</th></tr>   <tr><td>A</td><td>B</td><td>C</td></tr>   </table>
静语计算机协会
边框尺寸设置<table border=#>
<table border=10>   <tr><th>Food</th>
<th>Drink</th>
<th>Sweet</th></tr>
   <tr><td>A</td><td>B</td><td>C</td></tr>      </table>
静语计算机协会
跨多行、多列的表元(Table Span)
跨多行的表元<th rowspan=#>
跨多列的表元<th colspan=#><table border>   <tr><th colspan=3> Morning Menu</th> </tr>
 <!--colspan=3,跨三列表元--> <tr> <th>Food</th>      
<th>Drink</th>
<th>Sweet</th></tr>    
<tr><td>A</td><td>B</td><td>C</td> </tr>    </table>
静语计算机协会
表元间隙设置<table border cellspacing=#>
<table border cellspacing=10>   <tr><th>Food</th>
<th>Drink</th>
<th>Sweet</th></tr>    
<tr><td>A</td><td>B</td><td>C</td> </tr>        </table>
静语计算机协会
表元内部空白设置: <table border cellpadding=#>
<table border cellpadding=10>   <tr><th>Food</th>
<th>Drink</th>
<th>Sweet</th></tr>   <tr><td>A</td><td>B</td><td>C</td></tr>   </table>
静语计算机协会