帐号: 密码:
// 设为首页 // 收藏本站 // 请您留言 // 网址导航
远方教程-满足你的求知欲!
站内搜索:
HTML ASP PHP CSS DIV Dreamweaver Photoshop Word Excel PPT SEO技巧
您当前位置:网站首页 >> HTML入门 >> HTML基础教程 >> 阅读文章

HTML基础第六讲:表格

来源:远方教程 作者:远方教程 发布时间:2013-10-15 查看次数:3719 访问[新版]

  上一讲,我们讲了关于《控制表格及其表项的对齐方式》,在这里我要讲讲表格及其属性 ,然后大家在复习一下上一节的内容,这样就会有事半功倍的感觉。
 
  表格,一般的用于对网页的内容进行排版,比如文字放在页面的某个位置,你就可以做个表格,然后设置一下表格的属性,它文字放在表格的某个单元个里,就行了;其实用过word的朋友应该非常明白的。除了页面的排版外,表格还可以制作出非常好看的效果,比如按钮、变色、边线等等。大家要会灵活的运用。
 
  看看表格的基本语法:<table>…</table> - 定义表格
                      <tr> …</tr>- 定义表行
                      <th> …</th>- 定义表头
                      <td> …</td>- 定义表元
  下面看看它的示例:
   <table border="1">  <!--border是表格的边框属性,=“1”,即边框的宽为一象素-->
   <tr>                <!--定义表格的行-->
   <th>Food</th><th>Drink</th><th>Sweet</th><!--定义表格的表头,即标题-->
   </tr>               <!--行结束-->
   <tr>
   <td>A</td><td>B</td><td>C</td>  <!--定义表格的表元-->  
   </tr>
   </table>

   不带边框的表格:
   <table>
   <tr>
   <th>Food</th><th>Drink</th><th>Sweet</th>
   </tr>
   <tr>
   <td>A</td><td>B</td><td>C</td>  
   </tr>    
   </table>
   
Food Drink Sweet
A      B     C

   跨多行、多列的表元(Table Span)
   跨多列的表元 <th colspan=#>

   <table border>
   <tr><th colspan=3> Morning Menu</th>  <!--colspan=3,跨三列表元-->
   <tr><th>Food</th>       <th>Drink</th>  <th>Sweet</th>
   <tr><td>A</td><td>B</td><td>C</td>
   </table>

   跨多行的表元 <th rowspan=#>

   <table border>
   <tr><th rowspan=3> Morning Menu</th><!--rowspan=3,跨三行表元-->
       <th>Food</th> <td>A</td></tr>
   <tr><th>Drink</th> <td>B</td></tr>
   <tr><th>Sweet</th> <td>C</td></tr>
   </table>

   表格尺寸设置 <table border=#>边框尺寸设置:

   <table border=10>
   <tr><th>Food</th><th>Drink</th><th>Sweet</th>
   <tr><td>A</td><td>B</td><td>C</td>      
   </table>

   <table border width=# height=#>表格尺寸设置:

   <table border width=170 height=100>
   <tr><th>Food</th><th>Drink</th><th>Sweet</th>
   <tr><td>A</td><td>B</td><td>C</td>      
   </table>

   <table border cellspacing=#>表元间隙设置:

   <table border cellspacing=10>
   <tr><th>Food</th><th>Drink</th><th>Sweet</th>
   <tr><td>A</td><td>B</td><td>C</td>      
   </table>

第1页 第2页
打印 打印 | 关闭 关闭 评论
相关文章
图片新闻
站内搜索  
搜索
猜您喜欢  
最新更新  
阅读排行  
关于我们 | 联系方式 | 大事记 | 免责声明 | | 给我留言
部分广告源自金山联盟2345联盟 QQ咨询 站长之家QQ群:232617873
Copyright 2024 远方教程 © All Rights Reserved.

回顶部