Home思洋影视事业部网站建设知识库
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. 
	
  2. 
		<!--创建一行-->
    3. 
	
  3. 
		<tr>
    4. 
	
  4. 
		<!--创建一个格子（这里总共创建了三个格子）-->
    5. 
	
  5. 
		<td>要输出的文本只能放在此处</td>
    6. 
	
  6. 
		<td>要输出的文本只能放在此处</td>
    7. 
	
  7. 
		<td>要输出的文本只能放在此处</td>
    8. 
	
  8. 
		</tr>
    9. 
	
  9. 
		<!--最外层-->
    10. 
	
  10. 
		</table>
    11. 


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



			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机