时尚酷族

标题: 静态网页HTML基础-第六讲-表格 中国酷族独家发布网页基础教程 [打印本页]
作者: ＣooL．泪猪    时间: 2011-3-3 04:37
标题: 静态网页HTML基础-第六讲-表格 中国酷族独家发布网页基础教程
HTML基础第六讲---表格
By:泪猪

  1. 上一讲，风行鹤朋友给我们讲了关于《控制表格及其表项的对齐方式》，在这里我要讲讲表格及其属性 ，然后大家在复习一下上一节的内容，这样就会有事半功倍的感觉。

  3.   表格，一般的用于对网页的内容进行排版，比如文字放在页面的某个位置，你就可以做个表格，然后设置一下表格的属性，它文字放在表格的某个单元个里，就行了；其实用过word的朋友应该非常明白的。除了页面的排版外，表格还可以制作出非常好看的效果，比如按钮、变色、边线等等。大家要会灵活的运用。

  5.   看看表格的基本语法：<table>...</table> - 定义表格
  6.                       <tr> ...</tr>- 定义表行
  7.                       <th> ...</th>- 定义表头
  8.                       <td> ...</td>- 定义表元
  9.   下面看看它的示例：
  10.    <table border="1">  <!--border是表格的边框属性，=“1”，即边框的宽为一象素-->
  11.    <tr>                <!--定义表格的行-->
  12.    <th>Food</th><th>Drink</th><th>Sweet</th><!--定义表格的表头，即标题-->
  13.    </tr>               <!--行结束-->
  14.    <tr>
  15.    <td>A</td><td>B</td><td>C</td>  <!--定义表格的表元-->  
  16.    </tr>
  17.    </table>
  18.    
  19. 　

  21.    不带边框的表格：
  22.    <table>
  23.    <tr>
  24.    <th>Food</th><th>Drink</th><th>Sweet</th>
  25.    </tr>
  26.    <tr>
  27.    <td>A</td><td>B</td><td>C</td>  
  28.    </tr>   
  29.    </table>
  30.    
  31. Food Drink Sweet
  32. A      B     C

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

  37.    <table border>
  38.    <tr><th colspan=3> Morning Menu</th>  <!--colspan=3，跨三列表元-->
  39.    <tr><th>Food</th>       <th>Drink</th>  <th>Sweet</th>
  40.    <tr><td>A</td><td>B</td><td>C</td>
  41.    </table>

  43.    

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

  47.    <table border>
  48.    <tr><th rowspan=3> Morning Menu</th><!--rowspan=3，跨三行表元-->
  49.        <th>Food</th> <td>A</td></tr>
  50.    <tr><th>Drink</th> <td>B</td></tr>
  51.    <tr><th>Sweet</th> <td>C</td></tr>
  52.    </table>

  54.    

  56.    表格尺寸设置 <table border=#>边框尺寸设置：

  58.    <table border=10>
  59.    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
  60.    <tr><td>A</td><td>B</td><td>C</td>      
  61.    </table>
  62.    

  64.    <table border width=# height=#>表格尺寸设置：

  66.    <table border width=170 height=100>
  67.    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
  68.    <tr><td>A</td><td>B</td><td>C</td>      
  69.    </table>
  70.    

  72.    <table border cellspacing=#>表元间隙设置：

  74.    <table border cellspacing=10>
  75.    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
  76.    <tr><td>A</td><td>B</td><td>C</td>      
  77.    </table>
  78.    

  80.    <table border cellpadding=#>表元内部空白设置：

  82.    <table border cellpadding=10>
  83.    <tr><th>Food</th><th>Drink</th><th>Sweet</th>
  84.    <tr><td>A</td><td>B</td><td>C</td>      
  85.    </table>
  86.    

  88.    表格内文字的对齐/布局
  89.    <tr align=#>
  90.    <th align=#> #=left, center, right
  91.    <td align=#>

  93.    <table border width=160>
  94.    <tr>
  95.   <th>Food</th><th>Drink</th><th>Sweet</th>
  96.   <tr>
  97.     <td align=left>A</td>
  98.     <td align=center>B</td>
  99.     <td align=right>C</td>  
  100.   </table>
  101.    

  103.    <tr valign=#>
  104.    <th valign=#> #=top, middle, bottom, baseline
  105.    <td valign=#>

  107.    <table border height=100>
  108.    <tr>
  109.                <th>Food</th><th>Drink</th>
  110.                <th>Sweet</th><th>Other</th>
  111.    <tr>
  112.                <td valign=top>A</td>
  113.                <td valign=middle>B</td>
  114.                <td valign=bottom>C</td>
  115.                <td valign=baseline>D</td>
  116.    </table>
  117.    

  119.    好了，表格的基本的应用就是这些了。大家有什么问题，积极发问啊！！！


复制代码
未完待续……




欢迎光临 时尚酷族 (http://www.coqq.net/) Powered by Discuz! X3.2