HTML表格與表單
阿新 • • 發佈：2018-12-01
表格標籤table
tr 代表一行 td 代表一列，以下是一個一行兩列的標籤
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
tr不能設定寬度，其寬度和表格一樣寬，但可以指定高度
td可以設定寬高，但寬度不能超過表格
table裡的幾個屬性
-align:表格自身的水平位置，如果align放在tr或td上，改變的是文字水平對齊方式
-width:表格的寬度
-height:表格的高度
-bgcolor:表格的背景顏色
-bordercolor:表格的邊框顏色
-cellspacing:單元格與單元格之間的縫隙，為0時，沒有縫隙
-cellpadding:單元格的內邊距，即文字與單元格的距離
例：
<table border="1" cellspacing="0" bgcolor="yellow"> <tr align="center"> <td>第一</td> <td>第二</td> <td>第三</td> <td>第四</td> </tr> <tr align="right"> <td>第五</td> <td>第六</td> <td>第七</td> <td>第八</td> </tr> </table>
單元格的合併
-行合併 rowspan
-列合併 colspan
例：
<table border="1" width="400" height="200" cellspacing="0"> <tr> <td colspan="3">合併3列</td> <td></td> <td></td> </tr> <tr> <td rowspan="2">合併兩行</td> <td></td> <td></td> <td colspan="2">合併兩列</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td width="80"></td> <td width="80"></td> <td width="80"></td> <td width="80"></td> <td></td> </tr> </table>
例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" width="400" height="300">
<tr>
<td rowspan="6"></td>
<td rowspan="3"></td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td rowspan="3"></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
表單元素form
兩個屬性
-action:指定了當前表單想要提交的目的地（將要把填寫的內容傳送給誰）
-method:提交表單採用的方法 get,post
<form action="" method=””></form>
表單元素
1.文字框
<form action="" method=””>
<input type="text" placeholder="這是一個文字框"/>
</form>
結果如下
2.密碼框 輸入文字後會被▪取代
例
<input type="password" placeholder="這是一個密碼框"/>
3.單選按鈕
例
<input type="radio" name="sex" id="m" checked/><label for="m">男</label>
<input type="radio" name="sex" id="f"/><label for="f">女</label>
其中的checked代表預設選項
label:點文字也能選
結果如下
4.多選按鈕
例
<input type="checkbox" name="書" id="r" checked/><label for="r">人間失格</label>
<input type="checkbox" name="書" id="a" /><label for="a">暗網</label>
<input type="checkbox" name="書" id="x" /><label for="x">兄弟</label>
<input type="checkbox" name="書" id="h" checked /><label for="h" >活著</label>
結果如下
5.重置按鈕
例
<input type="reset" value="重置"/>
結果如下
6.瀏覽檔案
例
<input type="file" />
結果如下
7.提交按鈕
<input type="submit" value="我要提交"/>
結果如下
8.下拉框
<select >
<option >---請選擇---</option>
<option >青島</option>
<option selected>威海</option>
<option >濟南</option>
<option >上海</option>
<option selected>北京</option>
<option >武漢</option>
<option >廣州</option>
</select>
結果如下
9.多行文字輸入框
<textarea name="" id="" cols="30" rows="10" placeholder="這是一個多行文字輸入框"></textarea>
結果如下
10.按鈕
<input type="button" value="這是一個按鈕"/>
