读书频道 > web开发 > 其他综合 > 网页与Web程序设计(第2版)
2.5 表格标记和表单标记
2014-07-08 15:13:17     我来说两句 
收藏    我要投稿   
本书全面介绍了网页设计与制作技术,以及JavaScript脚本编程和Web数据库应用技术。它以目前比较流行的网页设计软件Dreamweaver CS5作为技术支持,由浅入深、系统地介绍了网页的构思、规划、制作和网站建设的全过  立即去当当网订购

1. 表格标记

表格标记对于制作网页是很重要的。现在很多网页均使用多重表格,主要是因为表格不但可以固定文本或图像的输出,而且还可以任意地进行背景和前景颜色的设置。以下分别进行介绍。

1)<table></table>(创建一个表格)。<table></table>标记对用来创建一个表格。<table>标记的属性和用途见表2-3。

表2-3   <table>标记的属性和用途
属  性 用  途
<table bgcolor=""> 设置表格的背景色
<table border=""> 设置边框的宽度,若不设置此属性,则边框宽度默认为0
<table bordercolor=""> 设置边框的颜色
<table bordercolorlight=""> 设置边框明亮部分的颜色(当border的值大于等于1时才有用)
<table bordercolordark=""> 设置边框昏暗部分的颜色(当border的值大于等于1时才有用)
<table cellspacing=""> 设置表格格子之间空间的大小
<table cellpadding=""> 设置表格格子边框与其内部内容之间空间的大小
<table width=""> 设置表格的宽度,单位用绝对像素值或总宽度的百分比

注:以上各个属性可以结合使用。有关宽度、大小的单位用绝对像素值,而有关颜色的属性使用十六进制RGB颜色码或HTML语言给定的颜色常量名(如Silver为银色)。

2)<tr></tr>、<td></td>(创建表格中的每一行和每一格)。<tr></tr>标记对用来创建表格中的每一行。此标记对只能放在<table></table>标记对之间使用,而在此标记对之间加入文本将是无用的,因为在<tr></tr>之间只能紧跟<td></td>标记对才是有效的语法,<td></td>标记对用来创建表格中一行中的每一个格子,此标记对也只有放在<tr></tr>标记对之间才是有效的,要输入的文本也只有放在<td></td>标记对中才有效(即才能够显示出来)。

此外,<tr>还有align和valign属性。align是水平对齐方式,取值为left(左对齐)、center(居中)、right(右对齐);而valign是垂直对齐方式,取值为top(靠顶端对齐)、middle(居中间对齐)或bottom(靠底部对齐)。<td>具有width、colspan、rowspan和nowrap属性。width是格子的宽度,单位用绝对像素值或总宽度的百分比;colspan设置一个表格格子跨占的列数(默认值为1);rowspan设置一个表格格子跨占的行数(默认值为1);nowrap禁止表格格子内的内容自动断行。

3)<th></th>(创建表头)。<th></th>标记对用来设置表头,通常是黑体居中文字。

【例2-7】表格标记的综合示例。
<html>
 <head>
  <title>表格标记的综合示例</title>
 </head>
 <body>
  <table border="1" width="80%" bgcolor="#E8E8E8" cellpadding="2"
  bordercolor="#0000FF" bordercolorlight="#7D7DFF" bordercolordark="#0000A0">
   <tr>
    <th width="33%" colspan="2" valign="bottom">意大利</th>
    <th width="36%" colspan="2" valign="bottom">英格兰</th>
    <th width="36%" colspan="2" valign="bottom">西班牙</th>
   </tr>
   <tr>
    <td width="16%" align="center">AC米兰</td>
    <td width="16%" align="center">佛罗伦萨</td>
    <td width="17%" align="center">曼联</td>
    <td width="17%" align="center">纽卡斯尔</td>
    <td width="17%" align="center">巴塞罗那</td>
    <td width="17%" align="center">皇家社会</td>
   </tr>
   <tr>
    <td width="16%" align="center">尤文图斯</td>
    <td width="16%" align="center">桑普多利亚</td>
    <td width="17%" align="center">利物浦</td>
    <td width="17%" align="center">阿森纳</td>
    <td width="17%" align="center">皇家马德里</td>
    <td width="17%" align="center">……</td>
   </tr>
   <tr>
    <td width="16%" align="center">拉齐奥</td>
    <td width="16%" align="center">国际米兰</td>
    <td width="17%" align="center">切尔西</td>
    <td width="17%" align="center">米德尔斯堡</td>
    <td width="17%" align="center">马德里竞技</td>
    <td width="17%" align="center">……</td></tr>
  </table>
 </body>
</html>

将例2-7的HTML代码存入文件C:\Inetpub\wwwroot\test2-7.htm,在浏览器中显示的网页如图2-5所示。

 

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:2.4 图像标记和多媒体标记
下一篇:2.6 其他常用标记
相关文章
图文推荐
3.2 Windows 7设置
3.1 DNS解析
2.3 HTTP协议
2.2 TCP/IP协议与So
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站