您当前的位置 » 首页 » PHP教程 » HTML教程 » HTML的表格标签

快速学习通道 »进入论坛提问

HTML的表格标签

作者:administrator

时间:2010-07-21

HTML的表格标签

       表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML的<table>标签

<table> 标签定义HTML 表格,简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

折叠XML/HTML Code复制内容到剪贴板
  1. <table border="1">  
  2.   <tr>  
  3.     <th>PHP</th>  
  4.     <th>MySQL</th>  
  5.   </tr>  
  6.   <tr>  
  7.     <td>乐学PHP</td>  
  8.     <td>乐学MySQL</td>  
  9.   </tr>  
  10. </table>  

表格的边框

默认情况下没有定义边框,表格是不显示边框的。如果我们希望显示边框,需要定义border属性,当然没有边框的表格也很有用。

使用边框属性来显示一个带有边框的表格

折叠XML/HTML Code复制内容到剪贴板
  1. <table border="1">  
  2. <tr>  
  3. <td>Row 1, cell 1</td>  
  4. <td>Row 1, cell 2</td>  
  5. </tr>  
  6. </table>  

属性 描述 DTD
align
  • left
  • center
  • right

不赞成使用。请使用样式代替。

规定表格相对周围元素的对齐方式。

TF
bgcolor
  • rgb(x,x,x)
  • #xxxxxx
  • colorname

不赞成使用。请使用样式代替。

规定表格的背景颜色。

TF
border pixels 规定表格边框的宽度。 STF
cellpadding
  • pixels
  • %
规定单元边沿与其内容之间的空白。 STF
cellspacing
  • pixels
  • %
规定单元格之间的空白。 STF
frame
  • void
  • above
  • below
  • hsides
  • lhs
  • rhs
  • vsides
  • box
  • border
规定外侧边框的哪个部分是可见的。 STF
rules
  • none
  • groups
  • rows
  • cols
  • all
规定内侧边框的哪个部分是可见的。 STF
summary text 规定表格的摘要。 STF
width
  • %
  • pixels
规定表格的宽度。 STF

HTML的<tr>标签

<tr> 标签定义 HTML 表格中的行。

tr元素包含一个或多个th或td元素。

一个简单的 HTML 表格,包含两行两列:

折叠XML/HTML Code复制内容到剪贴板
  1. <table border="1">  
  2.   <tr>  
  3.     <th>PHP</th>  
  4.     <th>MySQL</th>  
  5.   </tr>  
  6.   <tr>  
  7.     <td>Linux</td>  
  8.     <td>Apache</td>  
  9.   </tr>  
  10. </table>  

HTML的<td>标签

<td> 标签定义 HTML 表格中的标准单元格。

HTML 表格有两类单元格:

  • 表头单元 - 包含头部信息(由 th 元素创建)
  • 标准单元 - 包含数据(由 td 元素创建)

td 元素中的文本一般显示为正常字体且左对齐。

HTML的<th>标签

表格的表头,定义表格内的表头单元格。此 th 元素内部的文本通常会呈现为粗体。

表格的表头使用 <th> 标签进行定义。

折叠XML/HTML Code复制内容到剪贴板
  1. <table border="1">  
  2. <tr>  
  3. <th>Heading</th>  
  4. <th>Another Heading</th>  
  5. </tr>  
  6. <tr>  
  7. <td>row 1, cell 1</td>  
  8. <td>row 1, cell 2</td>  
  9. </tr>  
  10. <tr>  
  11. <td>row 2, cell 1</td>  
  12. <td>row 2, cell 2</td>  
  13. </tr>  
  14. </table>  

在浏览器显示如下:

Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

HTML的<caption>标签

caption 元素定义表格标题。

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

折叠XML/HTML Code复制内容到剪贴板
  1. <table border="1">  
  2.   <caption>Monthly savings</caption>  
  3.   <tr>  
  4.     <th>Month</th>  
  5.     <th>Savings</th>  
  6.   </tr>  
  7.   <tr>  
  8.     <td>January</td>  
  9.     <td>$100</td>  
  10.   </tr>  
  11. </table>  

作者:马明@PHP培训 修订1.0 2010-07

乐学PHP学院是国内专业的PHP培训机构,天津最好的PHP培训机构,拥有完整全面的PHP培训课程体系,使用自行开发的PHP内容管理系统作为授课案例,真实项目教学,还提供PHP教程、PHP视频、PHP人才、PHP开发等服务!

本文乐学PHP版权所有,未经批准转载必究。

© 2010 乐学PHP学院

电话 400-099-2088    QQ: 点击这里给我发消息 点击这里给我发消息

地址:天津市和平区南马路11号,创新大厦