表格標簽table:
1. 表格的作用:按照一定的格式擺放數據。
2.表格的組成:表格是由一系列的單元格(矩形框)組成。按照從左到右,從上到下的順序排列到一起組成的。
3.用於創建表格的標記:
<table></table> | 用於標記一個表格的開始,</table>用於標記一個表格的結束。一個表格中,只允許出現一對table標簽。 |
<caption></caption> | 表格的標題,可以省略,表格標題必須跟在 table后面 ,tr標簽前面,而且最多只能有一個。 |
<tr></td> | 用於標記表格一行的開始,</tr>標記一行的結束。表格內有多少對<tr>,就有多少行。 |
<td></td> | 用於標記表格中某行中一個單元格的開始,</td>用於標記這個單元格的結束。<td></td>標簽要寫在<tr></tr>標簽中,一對<tr></tr>標簽中由多少對<td></td>,就說明該行有多少個單元格。 |
4.最基本的表格屬性:一個基本表格中,必須含有一對<table></table>標簽,一對或幾對<tr></tr>以及一對或幾對<td></td>。一對<table></table>定義一個表格,一對<tr></tr>定義一行,一對<td></td>定義一個單元格。
5.表格屬性:
table屬性 | |
boder | 邊框 |
cellpadding | 單元格的內邊距(單元格邊框與i內容之間的距離) |
cellspacing | 單元格的外邊距(單元格之間的距離) |
width | 表格的總寬度(如果有多列,則每列等分) |
height | 表格的總高度(如果有多行,則每行等分) |
align | 整個表格的文本對齊方式 |
bgcolor | 背景顏色(純色填充) |
bordercolor | 邊框顏色 |
background | 背景圖片 |
tr屬性(行) | |
align | 內容水平對齊方式 |
valign | 內容垂直對齊方式 |
td單元格 | |
width | 每個單元格的寬度(可以設置百分比) |
height | 每個單元格的高度(可以設置百分比) |
align | 單元格內容水平對齊方式 |
valign | 單元格內容垂直對齊方式 |
代碼:
效果圖:
6.不規則表格的創建:
跨行(合並列) | rowspan | 縱向向下,包含自己 |
跨列(合並行) | colspan | 橫向向右,包含自己 |
代碼:
效果圖:
注意:第一行的第一個單元格和第一行的第二個單元格橫向合並的時候,第一個單元格的標簽改為<td colspan="2"></td>,被合並的單元格(第二個單元格)刪除。
第二行的第三個單元格和第三行的第三個單元格縱向合並的時候,第二行的第三個單元格標簽改為<td rowspan="2"></td>,被合並的單元格(第三行的第三個單元格刪除)。
表單標簽form:
1.表單的作用:主要是用於顯示、收集用戶信息,並將信息提交給服務器。其標簽為<form></form>。
2.表單的組成: Ⅰ.表單元素:負責將用戶數據提交給服務器。 Ⅱ.表單控件:負責接收用戶的數據(和用戶進行交互的)。
3.表單元素:
form屬性:
Ⅰ): action: 定義表單被提交時的動作,主要就是服務器上要處理數據 的應用程序URL找誰處理(提交地址)。
Ⅱ):method: 指定數據提交的方式。
1):get傳輸 顯示提交 ,可以顯示在地址欄上的 ,有數據大小限制。
2):post傳輸 隱式傳輸, 所有提交數據時都是看不見的,相對來來說比較安全,無數據大小限制。
4.表單控件:提供多個類型的表單控件,並具有可視化的外觀。
input組件:
Ⅰ:value : 值
Ⅱ:name : 控件的名稱
Ⅲ:disabled : 禁用控件
Ⅳ:type : 類型
1): text 普通文本框
2): password 密碼框
3): email 郵箱
4): radio 單選框
5): checkbox 多選
6): submit 提交
7): image 圖片提交
8): button 按鈕
代碼及顯示效果圖如下:
下拉列表:
1.標簽:<select> <option><option> </select>
2.屬性:select: size: 顯示數量,如果不為1的話,則變成滾動列表而不是下拉列表。
option: selected="selected" :默認選擇。
siez="1"代碼:
size="3"代碼:
文本域:
1.標簽:<textarea></textarea>
2.屬性: Ⅰ: cols: 指定文本的列數 (寬度)
Ⅱ : rows: 指定文本的行數 (高度)
Ⅲ :readonly: 只讀
Ⅳ : disabled: 禁用
代碼及效果圖: