表格與連接標記

一、表格：

（1）表格中能夠包含任何內容，因此在使用DIV+CSS以前，網頁設計師是使用表格對網頁進行排版與佈局

（2）表格基本結構：

屬性	說明
<table>...</table>	定義表格
<tr>...</tr>	定義錶行
<td>...</td>	定義表列（單元格）
<th>...</th>	定義標題欄（文字加粗，居中）

二、表格的屬性：<table>

屬性	用途
<table bgcolor=」」>	設置表格的背景顏色
<table background=」」>	設置表格的背景圖片
<table border=」」>	設置邊框的寬度，若不設置此屬性，則邊框寬度默認爲0
<table cellpadding=」」>	設置表格單元格邊框與其內部內容之間空間的大小。默認爲2（表格邊距）
<table cellspacing=」」>	設置表格單元格之間空間的大小。默認爲2（單元格間距）
<table bordercolor=」」>	設置表格邊框的顏色
<table bordercolorlight=」」>	設置邊框亮部分的顏色（當border的值大於等於1時纔有用）
<table bordercolordark=」」>	設置邊框暗部分的顏色（當border的值大於等於1時纔有用）
<table align=」」>	設置表格的對齊方式（left=左，center=居中，right=右）
<table width=」」>	設置表格的寬度，單位用據對像素值或總寬度的百分比

三、在editpuls代碼中，縮進技巧：tab，向右縮進；shift+tab，向左縮進

四、列（單元格）的屬性：<td>

屬性	用途
<td width=」」>	設置單元格的寬度
<td height=」」>	設置單元格的高度
<td bgcolor=」」>	設置單元格的背景顏色
<td background=」」>	設置單元格的背景圖片
<td align=」」>	設置單元格的水平對齊方式
<td valign=」」>	設置單元格的垂直對齊方式
<td rowspan=」」>	設置行合併的數目
<td colspan=」」>	設置列合併的數目
<td nowarp=」nowrap」>	設置在單元格中不換行

五、<table>標籤下的邊框設置

屬性名稱	屬性值	說明
frame （表格外邊框） 該屬性必須在border的屬性值不爲0的狀態下使用！	void	不要顯現表格的邊線
	above	只要顯現出表格的上邊線
	below	只顯現出表格的下邊線
	hsides	只顯示錶格的上下邊線
	vsides	只顯現表格的左右邊線
	lhs	只顯現表格的左邊線
	rhs	只顯現表格的右邊線
	border/box	會顯現出表格的全部邊線
rules （表格內邊框）	rows	只顯示出橫行的格框線
	cols	只顯示出直行的格框線
	all	顯示所有格框線
	groups	表示列組合水平部分
	none	不顯示任何格框線

表格的標題：<table>

                  <caption>...</caption>

            </table>

六、

屬性名稱	屬性值	說明
align	left	標題在表格左方
	right	標題在表格右方
	top	標題在表格上方
	bottom	標題在表格下方

七、表格的結構化

（1）結構化格式：<table>

                  <thead>......</thead>--------表頭區

                  <tbody>......</tbody>-------表體區

                  ..................................

                  <tfoot>.......</tfoot>--------表尾區

           </table>

（2）直列化格式：<colgroup>......</colgroup>

屬性名稱	屬性值	說明
align	left	靠左
	center	靠中
	right	靠右
valign	top	靠上
	middle	靠中
	bottom	靠下
span	數字	直列數
bgcolor	顏色	背景顏色

個別直列設置：<col>功能徹底和<colgroup>同樣

<colgroup span=」1」></colgroup>

<colgroup bgcolor=」red」></colgroup>

八、連接語法：

<a href=連接目標 title=」註釋」 target=」打開連接窗口的形式」>顯示內容</a>

_blank在新窗口中打開

_self在自身窗口中打開（默認值）

_parent在上一級窗口中打開，框架會常常使用

_top在瀏覽器的整個窗口中打開，忽略任何框架

九、連接的類型：

（1）內部連接：當前文檔與目標文檔在同一站點內

     <a href=目標文檔位置及全稱>顯示內容</a>

（2）外部連接：當前文檔與目標文檔不在同一站點內

     <a href=URL（網址）>顯示內容</a>

（3）E-mail連接：並容許訪問者向指定的地址發送郵件

     <a href=mailto:電子郵件地址>顯示內容</a>

（4）錨點連接：跳轉到同一網頁或其餘文檔中的指定位置

     建立錨點：<a name=」錨點名稱」>顯示內容</a>

     連接錨點：<a href=」#錨點名稱」>顯示內容</a>

（5）空連接：沒有目標端點的連接

     <a href=」#」>顯示內容</a>

     例如：設置爲首頁   

<a href=」#」 onClick=」this.style.behavior=’url(#default#homepage)’;this.sethomepage(‘http://www.xxxx.com’)」>設爲首頁</a>

添加收藏：

<a href=」#」 onClick=」javascript:window.external.addfavorite(‘http://www.xxxx.com’,’xx商城’)」>加入收藏夾</a>

十、腳本連接：是一種特殊的連接，當單擊設置腳本連接的文本或圖像時，能夠運行相應的JavaScript語句。

例如：<a href=javascript:window.open(「http://www.xxxx.com」)>xx商城</a>

關閉窗口：<a href=javascript:window.close()>關閉窗口</a>

打開窗口：<a href=javascript:window.open(‘文件名’)>打開窗口</a>