码迷,mamicode.com
首页 > 其他好文 > 详细

表格标签的属性

时间:2016-05-03 22:02:23      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:

表格:

<table></table>表格

  width:宽度。可以用像素或百分比表示。 常用960像素。

  border:边框,常用值为0。

  cellpadding:内容跟单元格边框的距离,常用值为0。

     cellspacing:单元格与单元格之间的间距,常用值为0。

  align:对齐方式。

  bgcolor:背景色。

  background:背景图片。

  

<tr></tr>行

  align:一行内容的水平对齐方式。

  valign:一行内容的垂直对齐方式。

  height:行高。

  bgcolor:背景色。

  background:背景图片。

 

<td></td>单元格

<th></th>表头,单元格的内容自动居中、加粗

  align:单元格内容的对齐方式。

  valign:单元格的内容的垂直对齐方式。

  width:单元格宽度。

  height:单元格高度。

  bgcolor:背景色。

  background:背景图片。

注意:

内容必须放在单元格里,单元格必须放在行里,行必须放在表格里。

  设置单元格行高、列高时,会同时影响对应的行或列。

 

单元格合并:(建议尽量用表格嵌套)

  colspan=“n”  合并同一行的单元格(后面写代码要减去相对应的列)

  rowspan=“n”  合并同一列单元格(从第二行开始减去相对应的列)

练习题:

1.制作个人简历

简历制作过程中练习用了一下锚点标签和链接:

如下图第8行:<a name="简历"></a>和第180行<center><a href="#简历">返回顶部</a></center>
第一步:做锚点标签。<a name=""></a>
第二步:做锚点链接,使得网页返回指定位置。<a href="#name的值"></a>
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>个人简历</title>
  6 </head>
  7 <body>
  8 <a name="简历"></a>
  9 <table align="center"width="77%" border="1" cellpadding="0" cellspacing="0">
 10   <tr align="center" bgcolor="#9999CC" >
 11   
 12     <td colspan="7"><font face="新宋体" size="+3" color="#FFFFFF"><em>个人简历</em></font></td>    
 13   </tr>
 14   <tr align="center">
 15     <td width="11%">姓名:</td>
 16     <td width="17%">边凯丽</td>
 17     <td width="10%">性别:</td>
 18     <td width="22%"></td>
 19     <td width="16%">籍贯:</td>
 20     <td width="12%">淄博</td>
 21     <td width="12%" rowspan="4"><img src="../Adobe Dreamweaver CS6/aaa/0019.jpg" /></td>
 22   </tr>
 23   <tr align="center">
 24     <td>出生日期:</td>
 25     <td>1992.11.09</td>
 26     <td>民族:</td>
 27     <td></td>
 28     <td>现所在地:</td>
 29     <td>淄博</td>
 30     
 31   </tr>
 32   <tr align="center">
 33     <td>婚姻状况:</td>
 34     <td>已婚</td>
 35     <td>政治面貌:</td>
 36     <td>团员</td>
 37     <td>最高学历:</td>
 38     <td>本科</td>
 39     
 40   </tr>
 41   <tr align="center">
 42     <td>所学专业:</td>
 43     <td>材料成型及控制工程</td>
 44     <td>毕业院校:</td>
 45     <td>中国石油大学胜利学院</td>
 46     <td>毕业时间:</td>
 47     <td>2016.06.30</td>
 48    
 49   </tr>
 50   <tr align="center">
 51     <td>手机:</td>
 52     <td colspan="2">13864391497</td>
 53    
 54     <td>电子邮箱:</td>
 55     <td colspan="3">1286274943@qq.com</td>
 56     
 57   </tr>
 58   <tr align="center">
 59     <td>求职意向:</td>
 60     <td colspan="6">&nbsp;</td>
 61    
 62   </tr>
 63   <tr align="center">
 64     <td bgcolor="#9999CC" colspan="7"><font face="新宋体" size="+3" color="#FFFFFF"><em>教育/培训经历</em></font></td>
 65     
 66   </tr>
 67   <tr align="center">
 68     <td colspan="2">起止时间</td>
 69     
 70     <td colspan="2">学校/培训地</td>
 71     
 72     <td colspan="2">专业课程</td>
 73     
 74     <td>学历/证书</td>
 75   </tr>
 76   <tr align="center">
 77     <td colspan="2">2011.9-2015-6</td>
 78     
 79     <td colspan="2">中国石油大学胜利学院</td>
 80     
 81     <td colspan="2">材料成型及控制工程</td>
 82     
 83     <td>学士学位证书毕业证书</td>
 84   </tr>
 85   <tr align="center">
 86     <td colspan="2">2014.10</td>
 87     
 88     <td colspan="2">中国石油大学第四教学楼</td>
 89    
 90     <td colspan="2">ISO9001质量管理体系内部审核员资格课程</td>
 91     
 92     <td>内审员资格证书</td>
 93   </tr>
 94   <tr align="center">
 95     <td colspan="2">&nbsp;</td>
 96     
 97     <td colspan="2">&nbsp;</td>
 98     
 99     <td colspan="2">&nbsp;</td>
100     
101     <td>&nbsp;</td>
102   </tr>
103   <tr align="center">
104     <td colspan="2">&nbsp;</td>
105     
106     <td colspan="2">&nbsp;</td>
107     
108     <td colspan="2">&nbsp;</td>
109     
110     <td>&nbsp;</td>
111   </tr>
112   <tr align="center">
113     <td bgcolor="#9999CC" colspan="7"><font face="新宋体" size="+3" color="#FFFFFF"><em>工作经验</em></font></td>
114     
115   </tr>
116   <tr align="center">
117     <td colspan="2">起止时间</td>
118     
119     <td colspan="2">公司名称</td>
120     
121     <td colspan="3">职位及简单描述</td>
122     
123   </tr>
124   <tr align="center">
125     <td colspan="2">&nbsp;</td>
126     
127     <td colspan="2">&nbsp;</td>
128    
129     <td colspan="3">&nbsp;</td>
130     
131   </tr>
132   <tr align="center">
133      <td colspan="2">&nbsp;</td>
134     
135     <td colspan="2">&nbsp;</td>
136    
137     <td colspan="3">&nbsp;</td>
138   </tr>
139   <tr align="center">
140      <td colspan="2">&nbsp;</td>
141     
142     <td colspan="2">&nbsp;</td>
143    
144     <td colspan="3">&nbsp;</td>
145   </tr>
146   <tr align="center">
147      <td colspan="2">&nbsp;</td>
148     
149     <td colspan="2">&nbsp;</td>
150    
151     <td colspan="3">&nbsp;</td>
152   </tr>
153   <tr align="center">
154     <td colspan="2" rowspan="2" bgcolor="#9999CC" ><font face="新宋体" size="+3" color="#FFFFFF"><em>技能专长</em></font></td>
155     
156     <td>专长</td>
157     <td colspan="4">&nbsp;</td>
158     
159   </tr>
160   <tr align="center">
161     
162     <td>爱好</td>
163     <td colspan="5">英语,唱歌</td>
164     
165     
166   </tr>
167   <tr align="center">
168     <td colspan="2"  bgcolor="#9999CC" ><font face="新宋体" size="+3" color="#FFFFFF"><em>自我评价</em></font></td>
169     
170     <td colspan="5">&nbsp;</td>
171     
172   </tr>
173   <tr align="center">
174     <td colspan="2" bgcolor="#9999CC" ><font face="新宋体" size="+3" color="#FFFFFF"><em>备注</em></font></td>
175     
176     <td colspan="5"><a href="http://www.cnblogs.com/kellybutterfly/" title="这是我的博客园" target="_blank">这是我的博客园</a></td>
177    
178   </tr>
179 </table>
180 <center><a href="#简历">返回顶部</a></center>
181 
182 </body>
183 </html>

显示结果:

技术分享

表格标签的属性

标签:

原文地址:http://www.cnblogs.com/kellybutterfly/p/5456504.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!