CSS表格和表單
- 表格-table
- 普通表格
- 渲染表格
- 跨行
- 跨列
- 表單-form
- form標簽
- 文本框
- 密碼框
- 單選按鈕
- 復選框
- 下拉串列
- 文本域
- 按鈕
- 普通按鈕
- 提交按鈕
- 重置按鈕
- label標簽
- 只讀和禁用
表格-table
我們想要在html中制造出這樣的表格，就需要使用table，tr，td，caption，th這些標簽
table標簽（表格）
tr標簽（行）
td標簽（標準單元格）
caption標簽（標題）
th標簽（表頭單元格）
為了更深一層對表格進行語意化，HTML引入了thead、tbody和tfoot這三個標簽，這三個標簽把表格分為三部分：表頭、表身、表腳，
| 標簽 | 說明 |
|---|---|
| table | 表格 |
| caption | 標題 |
| thead | 表頭（語意劃分） |
| tbody | 表身（語意劃分） |
| tfoot | 表尾（語意劃分） |
| tr | 行 |
| th | 表頭單元格 |
| td | 表格單元格 |
普通表格
如果我們想列印一個成績單那樣的表格，我們可以這樣實作
| 考試成績表 | |||
|---|---|---|---|
| 姓名 | 語文 | 英語 | 數學 |
| 小明 | 80 | 80 | 80 |
| 小紅 | 90 | 90 | 90 |
| 小杰 | 100 | 100 | 100 |
| 平均 | 90 | 90 | 90 |
樣例代碼1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table >
<caption>考試成績表</caption>
<thead>
<tr>
<th>姓名</th>
<th>語文</th>
<th>英語</th>
<th>數學</th>
<tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小紅</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小杰</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
</tfoot>
</table>
</body>
</html>
效果截圖：
渲染表格
我們發現上面的表格沒有邊框，我們還可以對表格加一些修飾
border 控制是否顯示邊框
cellspacing 控制表格table 與單元格之間的間距
cellpadding 控制單元格與內容的間距
color 對字體顏色更改
background-color 對背景顏色進行更改
樣例代碼2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table,tr,td{
color: red;
background-color: aqua;
</style>
<title></title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" border-collapse="collapse">
<tr>
<td>姓名<td>
<td>身高<td>
</tr>
<tr>
<td>小明<td>
<td>185cm<td>
</tr>
<tr>
<td>小紅<td>
<td>165cm<td>
</tr><tr>
<td>小剛<td>
<td>173cm<td>
</tr>
</table>
</body>
</html>
效果截圖：
跨行
跨兩行
rowspan="2"
跨列
跨兩列
colspan="2"
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
table , th ,td{
border-color: orange;
}
</style>
</head>
<body>
<table border="1" style="border-collapse: collapse;">
<tr>
<th>名稱</th>
<th>官網</th>
<th>性質</th>
</tr>
<tr>
<td>C語言中文網</td>
<td>http://c.biancheng.net/</td>
<td rowspan="2">學習</td>
</tr>
<tr>
<td>百度</td>
<td >http://www.baidu.com/</td>
<!-- <td>搜索</td> -->
</tr>
<tr>
<td>當當</td>
<td colspan="2">http://www.dangdang.com/</td>
<!-- <td>圖書</td> -->
</tr>
</table>
</body>
</html>
效果截圖：
表單-form
表單是用于在客戶端收集用戶提交的資訊，使用控制元件接收用戶的各種型別的訊息，
表單就是收集用戶資訊的，就是讓用戶填寫的、選擇的，
form是英語表單的意思，form中間可以添加文本框、密碼框、單選按鈕、復選框、下拉串列、按鈕、文本域等內容，
form標簽
所有的表單內容，都要寫在form標簽里面
<form> 所有的表單內容，都要寫在form標簽里面</form>
文本框
<input type="text" value="默認值" />
密碼框
<input type="password"/>
單選按鈕
<input type="radio" name="命名" checked="checked"/>男 <input type="radio" name="命名"/>女
注意：
input的type的值如果是radio就是單選按鈕， 需要注意的是必須要有相同的name屬性，單選按鈕才能互斥，
復選框
<input type="checkbox" name="aihao"/> 睡覺
<input type="checkbox" name="aihao"/> 吃飯
復選框，最好也是有相同的name（便于服務器端收集用戶選中的資訊）
下拉串列
<select>
<option>吃飯</option>
<option>睡覺</option>
<option>玩</option>
</select>
select就是“選擇”， select標簽和ul、ol、dl一樣，都是組標簽 option“選項”
文本域
<textarea cols="20" rows="10">默認出現的文字</textarea>
cols屬性表示columns“列”， rows屬性表示rows“行”， 值就是數字，表示行數和列數，標簽對兒中間的文字是默認出現在文本框的文字，一般不需要寫字，
按鈕
普通按鈕
<input type="button" value="我是一個普通按鈕" />
button就是英語“按鈕”的意思，value的“值”就是按鈕上面顯示的文字，
提交按鈕
<input type="submit" />
submit就是英語“提交”的意思，這個按鈕不需要寫value自動就有“提交”文字，這個按鈕點擊，表單會提交到服務器，
重置按鈕
<input type="reset" />
reset就是“復位”“重置”的意思，可以重置前面各個表單元素中填寫的值，
label標簽
<input type=“radio” name=“sex” id=“nan” /> <label for=“nan”>男</label> <input type=“radio” name=“sex” id=“nv” /> <label for=“nv”>女</label>
input元素要有一個id，然后label標簽就有一個for屬性，和id相同，就表示系結了，這個label和input就有系結關系了，點擊label標簽中的文字就可以選擇相應的單選框
只讀和禁用
只讀：readonly=“readonly”
禁用：disabled="disabled"
<input name="name" type="text" value="張三" readonly="readonly">
<input type="submit " disabled="disabled" value="保存" >
只讀就是不可以更改了只能顯示（案例中的張三就變得不可更改了）
禁用相當于直接作廢了（保存那個提交直接作廢，沒法點擊）
用上面的知識綜合實體效果圖：
完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h2>表單</h2>
<form>
請選擇您的性別：<input type="radio" name="命名" checked="checked" />男 <input type="radio" name="命名" />女<br />
請選擇您的愛好：<input type="checkbox" name="aihao" /> 睡覺 <input type="checkbox" name="aihao" /> 吃飯
<input type="checkbox" name="aihao" /> 乒乓球
<input type="checkbox" name="aihao" /> 籃球<br />
請選擇您的家鄉：
<select>
<option>河南</option>
<option>黑龍江</option>
<option>四川</option>
</select><br />
<input type="submit" />
<input type="reset" /> <br />
請輸入您的用戶名：<input type="text" value="Keafmd" /><br />
請輸入您的密碼：<input type="password"/><br />
<input type="submit" value="登錄"/>
<input type="reset" /> <br />
請輸入您的建議和要求：<br />
<textarea cols="20" rows="10" >Keafmd</textarea>
</from>
</body>
</html>
寫作不易，讀完如果對你有幫助，感謝點贊支持！
如果你是電腦端，看見右下角的“一鍵三連”了嗎，沒錯點它[哈哈]
加油！
共同努力！
Keafmd
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/203351.html
標籤：其他
下一篇：變數解構賦值的7大用途總結