HTML與CSS教學-第八章 建立表格

 

第八章 建立表格
本章要點
表格基礎標記
表格屬性
表格進階標記
進階表格

目錄：
  8.1 表格基礎標記
  8.2 建立簡單表格
  8.3 表格的屬性
  8.4 表格進階標記
  8.5 建立進階表格

8.1 表格基礎標記
在HTML的文法中，表格主要通過3個標記來構成，表格標記、行標記、儲存格標記。
<table>..</table>
<tr>..</tr>
<td>..</td>
 <table>標記代表表格的開始，<tr>標記代表行開始，而<td>和</td>之間的就是儲存格的內容。
 這幾個標記之間是從大到小，逐層包含的關係，由最大的表格，到最小的儲存格。
 一個表格可以有多個<tr>和<td>標記，分別代表多行和多個儲存格。

8.2 建立簡單表格
......

8.3 表格的屬性
在建立表格之後，我們還需要對錶格的各方面屬性進行調整，表格的基本屬性如表所示。
width,height寬度，高度
border邊框
bordercolor邊框顏色
bgcolor背景顏色
background背景圖片
cellspacing儲存格間距
cellpadding儲存格邊距
align對齊
frame表格邊框樣式
rules表格內邊框樣式

1.表格的寬度和高度width,height
 <table width=”value” height=”height”>
 <tr width=”value” height=”height”>
 <td width=”value” height=”height”>
  
 一般情況下只有一列的表格，width寫在<table>的標籤內，只有一行的表格，height寫在<table>的標籤內，多行多列的表格，width和height 寫在第一行或者第一列的<td>標籤內。總之遵循一條原則：不出現多於一個的控制同一個儲存格大小的height和width, 保證任何一個width和height都是有效，也就是你改動代碼中任何一個width和height的數值，都應該在瀏覽器中看到變化。做到這一條不容易，需要較長時間的練習和思考。

2.表格的邊框border
 我們看到，預設情況下表格不顯示邊框，即border屬性值為0，我們可以設定表格邊框粗細，單位為像素。
 <table border=”value”>

3.表格邊框顏色bordercolor
 添加了5像素的邊框後，我們發現，表格上下左右4條邊框顏色並不相同。對錶格外邊框來說，左上邊框顏色淺，稱為亮邊框bordercolorlight，右下邊框顏色深，稱為暗邊框bordercolordark；而儲存格的邊框相反，左上為暗邊框，右下為亮邊框。我們可以使用bordercolor屬性統一設定4條邊框為同一顏色，也可以使用bordercolorlight和bordercolordark分別設定亮邊框，暗邊框的顏色。
 <table bordercolor=”value”>
 <table bordercolorlight=”value” bordercolordark=”value”>

4.表格背景顏色bgcolor
 通過bgcolor屬性可以設定表格、行以及儲存格的背景顏色。
 <table bgcolor=”value”>
 <tr bgcolor=”value”>
 <td bgcolor=”value”>

5.表格背景圖片background
 除了背景顏色外，我們還可以為表格設定背景映像。
 <table background=”img_url”>

6.儲存格間距cellspacing
 可以通過設定cellspacing屬性調節儲存格與儲存格之間的間距。
 <table cellspacing=”value”>

7.儲存格邊距cellpadding
 儲存格邊距是指儲存格中的內容和邊框之間的距離。
 <table cellpadding=”value”>

8.水平對齊align
 在水平方向上，對齊分別有居左（left）、置中（center）、居右（right）三種。
 <table align=”left”>
 <table align=”left”>
 <table align=”left”>
 在表格標記<table>中使用align屬性，是將整個表格居於瀏覽器的左、中、右方。
 <tr align=”value”>
 在<tr>標記中使用align屬性，是將這一行的中所有儲存格中的內容相對所處的儲存格居左、置中、居右。
 <td align=”value”>
 在<td>標記中使用align屬性，是將該儲存格中的內容在儲存格中居左、置中、居右。

9.表格外邊框樣式frame
 我們除了可以控製表格邊框的粗細顏色外還可以控制邊框的顯示樣式。
 <table frame=”value”>
 使用frame屬性可以控製表格外邊框樣式，屬性值如表所示。
above只顯示上邊框
below只顯示下邊框
lhs只顯示左邊框
ths只顯示右邊框
hsides顯示上下邊框
vsides顯示左右邊框
border顯示上下左右邊框
box顯示上下左右邊框
void不顯示邊框

10.表格內邊框樣式rules
 <table rules=”value”>
 使用rules屬性可以控製表格內邊框樣式，屬性值如表所示。
all顯示所有的內部邊框
none不顯示內部邊框
groups不顯示內部邊框
cols僅顯示列邊框
rows僅顯示行邊框

8.4 表格進階標記
1.th
 表格的表頭標記<th>，通常情況是表格的第一行或第一列，其中的文字可以實現置中並且加粗顯示。可以使用<th>替代<td>標記，<th>可以看做帶有加粗並置中功能的特殊儲存格標記。

2.caption
 在HTML語言中，可以自動通過標記為表格添加標題。
 通過這個標記可以直接添加表格的標題，而且可以控制標題文字的排列屬性。
 <caption align=”value” valign=”value”>標題內容</caption>
 <caption>之間的就是標題內容；
 通過align設定標題文字相對錶格的水平對齊（left、center、right）；
 通過valign設定標題文字相對錶格的垂直對齊（top、bottom）；

3.thead,tbody,tfoot
 3種行組元素<thead></thead>、<tbody><tbody>、<tfoot><tfoot>使瀏覽器能夠支援長表格主體地區滾動，並保持表頭和表尾固定。我們可以為表頭、表體和表尾資料分別設定樣式。使用行組時，可以有一個或多個tbody元素，以及一個或沒有thead和tfoot元素。
 <thead>標記用於定義表格最上端的樣式。
 <tbody>標記用於定義表格主體的樣式。
 <tfoot>標記用於定義表尾的樣式。

4.colgroup
 <colgroup>標籤用於對錶格中的列進行組合，以便對其進行格式化。如需對全部列應用樣式，<colgroup>標籤很有用，這樣就不需要對各個單元和各行重複應用樣式了。
 <colgroup> 標籤只能在table元素中使用。
 <colgroup span="value"></colgroup>
 value為列數。

5.colspan,rowspan
 在複雜的表格結構中，有的儲存格在水平方向上是跨多個儲存格的，這就需要使用跨行屬性rowspan，有的儲存格在垂直方向上是跨多個儲存格的，這就需要使用跨列屬性colspan。
 <td rowspan=”value”>
 <td colspan=”value”>
 value代表儲存格跨的行列數。

8.5 建立進階表格
   網頁排版有時會很複雜，在外部需要有一個大的表格來控制總體布局。但是如果一些內部排版的細節也用它來實現，則容易引起行高、列寬的衝突，給表格製作帶來困難。如果利用多個嵌套的表格，外部的大表格負責整體的布局，內部的小表格負責各個板塊的排版，這樣一來就會各司其職，互不衝突。