HTML&CSS精選筆記_表格與表單

表格與表單

表格標記

創建表格

要想創建表格，就需要使用表格相關的標記
<table>
    <tr>
    <td>單元格內的文字</td>
      ...
    </tr>
    ...
</table>
 包含三對HTML標記，分別為<table></table>、<tr></tr>、<td></td>，他們是創建表格的基本標記，缺一不可
<table></table>：用於定義一個表格。
<tr></tr>：用於定義表格中的一行，必須嵌套在<table></table>標記中，在<table></table>中包含幾對<tr></tr>，就有幾行表格。
<td></td>：用於定義表格中的單元格，必須嵌套在<tr></tr>標記中，一對<tr></tr>中包含幾對<td></td>，就表示該行中有多少列（或多少個單元格）。


注意:
學習表格的核心是學習<td></td>標記，他就像一個容器，可以容納所有的元素，<td></td>中甚至可以嵌套表格<table></table>。但是<tr></tr>中只能嵌套<td></td>，直接在<tr></tr>標記中輸入文字的做法是不被允許的。

<table>標記的屬性

屬性名 含義 常用屬性值
border 設置表格的邊框（默認border="0"無邊框） 像素值 
cellspacing 設置單元格與單元格邊框之間的空白間距 像素值（默認為2像素）
cellpadding 設置單元格內容與單元格邊框之間的空白間距 像素值（默認為1像素）
width 設置表格的寬度 像素值
height 設置表格的高度 像素值
align 設置表格在網頁中的水平對齊方式 left、center、right
bgcolor 設置表格的背景顏色 預定義的顏色值、十六進制#RGB、rgb(r,g,b)
background 設置表格的背景圖像 url地址
1、border屬性
用於設置表格的邊框，默認為0
<table border=“20”>
2、cellspacing屬性
用於設置單元格與單元格邊框之間的空白間距，默認為2px
<table border=“20” cellspacing=“20”>
3、cellpadding屬性
用於設置單元格內容與單元格邊框之間的空白間距，默認為1px
<table border=“20” cellspacing=“20” cellpadding=“20”>


注意:
cellpadding類似於盒子模型的內邊距padding，指的是單元格內部的距離，cellspacing則指的是外部單元格與單元格之間的距離。可以結合盒子模型的內外邊距理解cellpadding與cellspacing的不同。
4、width與height屬性
默認情況下，表格的寬度和高度靠其自身的內容來支撐。要想更改表格的尺寸，就需對其應用寬度屬性width或高度屬性height
當為表格標記<table>同時設置width、height和cellpadding屬性時，cellpadding的顯示效果將不太容易觀察，所以一般在未給表格設置寬高的情況下測試cellpadding屬性。
5、align屬性
align屬性用於定義元素的水平對齊方式，其可選屬性值為left、center、right。值得一提的是，當對<table>標記應用align屬性時，控制的為表格的水平對齊方式，單元格中的內容不受影響。
6、bgcolor屬性
在<table>標記中，bgcolor屬性用於設置表格的背景顏色。
7、background屬性

在<table>標記中，background屬性用於設置表格的背景圖像。

<tr>標記的屬性

制作網頁時，有時需要表格中的某一行特殊顯示，這時就可以為行標記<tr>定義屬性
屬性名 含義 常用屬性值
height 設置行高度 像素值 
align 設置一行內容的水平對齊方式 left、center、right
valign 設置一行內容的垂直對齊方式 top、middle、bottom
bgcolor 設置行背景顏色 預定義的顏色值、十六進制#RGB、rgb(r,g,b)
background 設置行背景圖像 url地址


注意
<tr>標記無寬度屬性width，其寬度取決於表格標記<table>。
可以對<tr>標記應用valign屬性，用於設置一行內容的垂直對齊方式。

雖然可以對<tr>標記應用background屬性，但是在<tr>標記中此屬性兼容問題嚴重。

<td>標記的屬性

在網頁制作過程中，有時僅僅需要對某一個單元格進行控制，這時就可以為單元格標記<td>定義屬性
屬性名 含義 常用屬性值
width 設置單元格的寬度 像素值 
height 設置單元格的高度 像素值
align 設置單元格內容的水平對齊方式 left、center、right
valign 設置單元格內容的垂直對齊方式 top、middle、bottom
bgcolor 設置單元格的背景顏色 預定義的顏色值、十六進制#RGB、rgb(r,g,b)
background 設置單元格的背景圖像 url地址
colspan 設置單元格橫跨的列數（用於合並水平方向的單元格） 正整數
rowspan 設置單元格豎跨的行數（用於合並豎直方向的單元格） 正整數


注意:
1、在<td>標記的屬性中，重點掌握colspan和rolspan，其他的屬性了解即可，不建議使用，均可用CSS樣式屬性替代。
2、當對某一個<td>標記應用width屬性設置寬度時，該列中的所有單元格均會以設置的寬度顯示。

3、當對某一個<td>標記應用height屬性設置高度時，該行中的所有單元格均會以設置的高度顯示。

<th>標記及其屬性

表頭一般位於表格的第一行或第一列，其文本加粗居中
設置表頭非常簡單，只需用表頭標記<th></th>替代相應的單元格標記<td></td>即可。

表格的結構

在使用表格進行布局時，可以將表格划分為頭部、主體和頁腳
<thead></thead>：用於定義表格的頭部，必須位於<table></table>標記中，一般包含網頁的logo和導航等頭部信息。
<tfoot></ tfoot >：用於定義表格的頁腳，位於<table></table>標記中<thead></thead>標記之后，一般包含網頁底部的企業信息等。
<tbody></tbody>：用於定義表格的主體，位於<table></table>標記中<tfoot></ tfoot >標記之后，一般包含網頁中除頭部和底部之外的其他內容。

CSS控制表格樣式

CSS控制表格邊框

使用CSS邊框樣式屬性border可以輕松地控制表格的邊框


注意:
1、 border-collapse屬性的屬性值除了collapse（合並）之外，還可以為separate（分離），默認為separate。
2、當表格的border-collapse屬性設置為collapse時， HTML中設置的cellspacing屬性值無效。
3、行標記<tr>無border樣式屬性，本書不再做具體的演示，初學者可以自己測試加深理解。

CSS控制單元格邊距

使用<table>標記的屬性美化表格時，可以通過cellpadding和cellspacing分別控制單元格內容與邊框之間的距離以及相鄰單元格邊框之間的距離。


注意:

行標記<tr>無內邊距屬性padding和外邊距屬性margin

CSS控制單元格的寬高

單元格的寬度和高度，有着和其他元素不同的特性，主要表現在單元格之間的互相影響上。
對同一行中的單元格定義不同的高度，或對同一列中的單元格定義不同的寬度時，最終的寬度或高度將取其中的較大者

認識表單

在HTML中，一個完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個部分構成
表單控件：包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。
提示信息：一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。
表單域：他相當於一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數據所用程序的url地址，以及數據提交到服務器的方法。如果不定義表單域，表單中的數據就無法傳送到后台服務器。


表單控件是表單的核心，常用的表單控件
<input /> 表單輸入控件（可定義多種表單項）
<textarea></textarea> 定義多行文本框
<select></select>   定義一個下拉列表（必須包含列表項）

創建表單

在HTML中，<form></form>標記被用於定義表單域，即創建一個表單，以實現用戶信息的收集和傳遞，<form> </form>中的所有內容都會被提交給服務器
<form action="url地址" method="提交方式" name="表單名稱">
各種表單控件
</form>
<form>與</form>之間的表單控件是由用戶自定義的，action、method和name為表單標記<form>的常用屬性
Action：請求路徑，確定表單提交到服務器的地址（路徑）

在表單收集到信息后，需要將信息傳遞給服務器進行處理，action屬性用於指定接收並處理表單數據的服務器程序的url地址

method：請求方式

method屬性用於設置表單數據的提交方式，其取值為get或post。


get：默認值
     提交時數據追加在請求路徑上
     數據格式k/v，追加使用？連接，之后每一對數據使用&連接
     請求長度有限所以get請求提交的數據有限
如:/1.html?username=jack&password=1234


post:
提交數據不再請求路徑上追加（即不顯示在地址欄上）

提交是的數據大小不顯示

name

name屬性用於指定表單的名稱，以區分同一個頁面中的多個表單。
注意：要想讓一個表單有意義，就必須在<form>與</form>之間添加相應的表單控件

表單控件

input控件(輸入域標簽)

<input  type=“控件類型”>
<input />標記為單標記，type屬性為其最基本的屬性，用於獲取用戶輸入信息，type屬性值不同，搜集方式不同。其取值有多種，用於指定不同的控件類型。


屬性 屬性值 描述
type
text 單行文本輸入框（默認寬度為20）
password 密碼輸入框
radio 單選按鈕
checkbox 復選框
button 普通按鈕
submit 提交按鈕
reset 重置按鈕
image 圖像形式的提交按鈕
hidden 隱藏域
file 文件域
image:圖形提交按鈕
name 由用戶自定義 控件的名稱。元素名，如果需要表單數據提交到服務器，必須提供name屬性值，服務器通過屬性值獲取提交的數據
value 由用戶自定義 input控件中的默認文本值
size 正整數 input控件在頁面中的顯示寬度
readonly 該控件內容為只讀（不能編輯修改）
disabled 第一次加載頁面時禁用該控件（顯示為灰色）
checked 定義選擇控件默認被選中的項

maxlength 正整數 控件允許輸入的最多字符數

textarea控件(文本域)

通過textarea控件可以輕松地創建多行文本輸入框
<textarea cols="每行中的字符數" rows="顯示的行數">
       文本內容
</textarea>

其中cols用來定義多行文本輸入框每行中的列數，rows用來定義多行文本輸入框顯示的行數，他們的取值均為正整數
注意:

各瀏覽器對cols和rows屬性的理解不同，當對textarea控件應用cols和rows屬性時，多行文本輸入框在各瀏覽器中的顯示效果可能會有差異。所以在實際工作中，更常用的方法是使用CSS的width和height屬性來定義多行文本輸入框的寬高。

select控件(下拉列表標簽)

定義下拉菜單
<select>
        <option>選項1</option>
        <option>選項2</option>
        <option>選項3</option>
       ...
</select>
每對<select></select>中至少應包含一對<option></option>
在HTML中，可以為<select>和<option>標記定義屬性，以改變下拉菜單的外觀顯示效果
標記名 常用屬性 描述
<select>
name:發給服務器的名稱
size 指定下拉菜單的可見選項數（取值為正整數）。
multiple 定義multiple="multiple"時，下拉菜單將具有多項選擇的功能，方法為按住Ctrl鍵的同時選擇多項。

<option> selected  定義selected =" selected "時，當前項即為默認選中項。

按鈕標簽:<button>

<button type="button|reset|submit">提供"普通|重置|提交"功能

CSS控制表單樣式

使用CSS可以輕松地控制表單控件的樣式，主要體現在控制表單控件的字體、邊框、背景和內邊距等。
注意
由於form是塊元素，重置瀏覽器的默認樣式時，需要清除其內邊距padding和外邊距margin。
input控件默認有邊框效果，當使用<input />標記定義各種按鈕時，通常需要清除其邊框。
通常情況下需要對文本框和密碼框設置2到3像素的內邊距，以使用戶輸入的內容不會緊貼輸入框。