itsway,专业的IT网络教程站,让您踏上IT之路,具备IT思维。
  设为首页        加入收藏夹        网站历程

教程总目录:HTML教程  CSS教程  JavaScript教程  Java教程(上)  Java教程(下)

5.4 <td>标记

<td>标记的常用语法格式为:

  <td width = 宽度 height = 高度 align = 水平对齐方式 valign = 垂直对齐方式 height = 行高 background = 背景图案 bgcolor = 背景色 bordercolor = 边界颜色 bordercolordark = 边界背光部分的颜色 bordercolorlight =边界向光部分的颜色 colspan = 跨列数 rowspan = 跨行数 nowrap>
    ……
  </td>

可以看出,<td>的很多属性和<table>、<tr>的相应属性是一样的。所不同的是,<table>、<tr>的各个属性,设置的是整个表格或某一行的显示情况,而<td>属性只用于设置相应单元格的显示情况。当<td>属性值的设置和<table>、<tr>的同名属性值不同时,一般以<td>属性值为准。但也有例外,例如,在<tr>中已经设置了行的高度height属性值,则在行的<td>中设置的行高height值如果和<tr>中设置的不同,以<tr>中设置的行高为准,除非该行的所有单元格都设置了同一个height属性值。
  <td>标记的一些和<table>或<tr>不同的属性的意义如下:
● colspan:该单元格在水平方向上跨的列数,默认为1。
● rowspan:该单元格在垂直方向上跨的行数,默认为1。colspan和rowspan是为制作复杂表格准备的,具体使用见例子。
● nowrap:如果单元格格中的内容超过了单元格的宽度,则用此属性禁止内容折行显示。
  【例5】<td>标记的进一步使用。

  <html>
  <head>
    <title>itsway -- 表格</title>
  </head>
  <body bgcolor = "#eeffee">
    <p></p>
    <!--第一个表格开始-->
    <table width = "400" border="5" bordercolor = "maroon">
      <tr>
        <td rowspan = "2" background = "background1.jpg" align = "center">
          学生成绩表
        </td>
        <td colspan = "3" align = "center">科目</td>
      </tr>
      <tr height = "50" valign = "middle">
        <td valign = "bottom" height = "30">数学</td>
        <td valign = "top">物理</td>
        <td>化学</td>
      </tr>
      <tr >
        <td width="50%">
          打遍天下无敌手----金面佛 苗人凤
        </td>
        <td align = "center">75</td>
        <td align = "center">85</td>
        <td align = "center">77</td>
      </tr>
      <tr height = "50">
        <td height = "30">单元格设置的行高被屏蔽</td>
        <td>62</td><td>60</td><td>55</td>
      </tr>
    </table><!--第一个表格结束-->
    <p></p>
    <!--第二个表格开始-->
    <table width = "400" border="5" bordercolor = "maroon">
      <tr >
        <td width="50%" nowrap>
          打遍天下无敌手----金面佛 苗人凤
        </td>
        <td>75</td><td>85</td><td>77</td>
      </tr>
    </table><!--第二个表格结束-->
  </body>
  </html>

在Firefox中的显示效果如下图所示。

HTML教程

在本例中的第一个表格的第一行的两个单元格是这样定义的:

  <td rowspan = "2" background = "background1.jpg" align = "center">
    学生成绩表
  </td>
  <td colspan = "3" align = "center">科目</td>

第一个单元格跨两行,即它和下面一行的相应单元格合并为一个单元格;第二个单元格跨三行,即本来和下面三列对应的三个单元格合并为一个单元格。这在图中显示得很清楚,请读者仔细体会它们的用法,这是制作复杂表格必须用到的关键属性。
  在本例中的第二个表格中只有一行,它的第一个单元格是这样定义的:

  <td width="50%" nowrap>
    打遍天下无敌手----金面佛 苗人凤
  </td>

在这里,因为单元格内容不是50%表格宽度所能容纳得下的,并且不能折行显示(使用了nowrap属性),所以该单元格只能适当延伸。请对比第一个表格的相应行,读者可以更清楚地看到nowrap的作用。

上一篇:5.3 <tr>标记  下一篇:5.5 colspan、rowspan属性的进一步使用。

 有问题吗?请到以下论坛讨论:
csdn技术论坛     无忧脚本Html & XHtml & CSS网页制作讨论版     蓝色理想(blueidea)之Web标准化论坛
 有价值的HTML站点:
英文版HTML简明教程:国际著名Web教学站点w3schools.com的HTML教程,简明易懂,但过于简单。
玩转HTML标记语言:这是天极网的网页淘吧的HTML教程首页。
enet学院视频教程:这是www.enet.com.cn的视频教程主页,内含Dreamweaver、Frontpage、HTML等多个视频教程。
www.w3.org:国际标准化组织W3C(World Wide Web Consortium,万维网联盟)的站点,万源之源,绝对权威。
 最新浏览器下载:
根据您使用的操作系统,下载最新正版Internet Explorer 7 Internet Explorer for Windows XP SP2 简体中文版
全新Netscape Navigator 9.0
裸奔浏览器(GMiniIE),内存占用最少 基于IE内核的腾讯TT浏览器
Opera国际版 傲游浏览器(maxthon) GreenBrowser 世界之窗


版权所有:www.itsway.net
CopyRight(C) 2007 www.itsway.net
苏ICP……
电子邮件:denghongtao@hotmail.com