0 Comments

创建网页上的列表

发布于:2012-11-16  |   作者:广州网站建设  |   已聚集:人围观
创建网页上的列表列表是网页最基本的形式,同时也是最重要的组成,制作列表所用到的标签如下。广州网站建设
1.<table></table>标记
<table></table>"标记对"用来创建一个表格,属性见表1.2。
表1.2  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>"标记对"中才有效(能够被浏览器正确识别并显示出来)。<table></table>、<tr></tr>和<td></td>"标记对"的关系如下所示:  广州网站建设

  1. <table>
  2. <!--创建一行-->
  3. <tr>
  4. <!--创建一个格子(这里总共创建了三个格子)-->
  5. <td>要输出的文本只能放在此处</td>
  6. <td>要输出的文本只能放在此处</td>
  7. <td>要输出的文本只能放在此处</td>
  8. </tr>
  9. <!--最外层-->
  10. </table>
此外,<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>"标记对"用来设置表格头,通常是黑体居中文字。下面的代码创建了一个3行4列的表格,代码比较简单,这里不做过多说明。广州网站设计

  1. <html>
  2. <head>
  3. <title>表格标记的综合示例</title>
  4. </head>
  5. <body>
  6. <table border="1" width="80%" bgcolor="#E8E8E8" cellpadding="2" bordercolor="#0000FF"
  7. bordercolorlight="#7D7DFF" bordercolordark="#0000A0">
  8.   <tr>
  9.     <th width="33%" colspan="2" valign="bottom">意大利</th>
  10.     <th width="36%" colspan="2" valign="bottom">英格兰</th>
  11.     <th width="36%" colspan="2" valign="bottom">西班牙</th>
  12.   </tr>
  13.   <tr>
  14.     <td width="16%" align="center">AC米兰</td>
  15.     <td width="16%" align="center">佛罗伦萨</td>
  16.     <td width="17%" align="center">曼联</td>
  17.     <td width="17%" align="center">纽卡斯尔</td>
  18.     <td width="17%" align="center">巴塞罗那</td>
  19.     <td width="17%" align="center">皇家社会</td>
  20.   </tr>
  21.   <tr>
  22.     <td width="16%" align="center">尤文图斯</td>
  23.     <td width="16%" align="center">桑普多利亚</td>
  24.     <td width="17%" align="center">利物浦</td>
  25.     <td width="17%" align="center">阿申纳</td>
  26.     <td width="17%" align="center">皇家马德里</td>
  27.     <td width="17%" align="center">…</td>
  28.   </tr>
  29.   <tr>
  30.     <td width="16%" align="center">拉齐奥</td>
  31.     <td width="16%" align="center">国际米兰</td>
  32.     <td width="17%" align="center">切尔西</td>
  33.     <td width="17%" align="center">米德尔斯堡</td>
  34.     <td width="17%" align="center">马德里竞技</td>
  35.     <td width="17%" align="center">…</td>
  36.   </tr>
  37. </table>
  38. </body>
  39. </html>
标签:
飞机