html,表格和表單

本文轉載自查看原文 2020-01-09 15:24 1113 html

表格

表格標簽

表格標簽	描述
<table>	表格的最外層容器
<tr>	定義表格行
<th>	定義表頭
<td>	定義表格單元
<caption>	定義表格表題

代碼:

<table>
    <caption>天氣情況</caption>
    <tr>
        <th>日期</th>
        <th>天氣情況</th>
        <th>出行情況</th>
    </tr>
    <tr>
        <td>2020/1/1</td>
        <td><img src="./p/1.jpg" alt=""></td>
        <td>天氣晴朗,適合出行</td>
    </tr>
    <tr>
        <td>2020/1/2</td>
        <td><img src="./p/2.jpg" alt=""></td>
        <td>有小雨,出門請帶傘</td>
    </tr>
</table>

輸出:

天氣情況
日期	天氣情況	出行情況
2020/1/1		天氣晴朗,適合出行
2020/1/2		有小雨,出門請帶傘

語義化標簽

不會產生效果,更會符合html規范

語義化標簽	描述
<thead>	表格頭部
<tbody>	表格主題
<tfoot>	表格結束

代碼:

<table>
    <caption>天氣情況</caption>
    <thead>
        <tr>
            <th>日期</th>
            <th>天氣情況</th>
            <th>出行情況</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2020/1/1</td>
            <td><img src="./p/1.jpg" alt=""></td>
            <td>天氣晴朗,適合出行</td>
        </tr>
        <tr>
            <td>2020/1/2</td>
            <td><img src="./p/2.jpg" alt=""></td>
            <td>有小雨,出門請帶傘</td>
        </tr>
    </tbody>
    <tfoot>
        
    </tfoot>
</table>

其中tbody是可以出現多次的,thead和tfoot只能出現一次

表格屬性:邊框和單元格的大小

屬性	含義
border	表格邊框
cellpadding	單元格內的空間
cellspacing	單元格之間的空間

代碼:

<table border="20" cellpadding="30" cellspacing="20">
    <caption>天氣情況</caption>
    <thead>
        <tr>
            <th>日期</th>
            <th>天氣情況</th>
            <th>出行情況</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2020/1/1</td>
            <td><img src="./p/1.jpg" alt=""></td>
            <td>天氣晴朗,適合出行</td>
        </tr>
        <tr>
            <td>2020/1/2</td>
            <td><img src="./p/2.jpg" alt=""></td>
            <td>有小雨,出門請帶傘</td>
        </tr>
    </tbody>
    <tfoot>
        
    </tfoot>
</table>

輸出:

</tfoot>

天氣情況
日期	天氣情況	出行情況
2020/1/1		天氣晴朗,適合出行
2020/1/2		有小雨,出門請帶傘

表格屬性:單元格的合並

行合並

代碼:

<table border="1" cellpadding="30" cellspacing="1">
    <caption>天氣情況</caption>
    <thead>
        <tr>
            <th colspan="2">日期</th>
            <th>天氣情況</th>
            <th>出行情況</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2020/1/1</td>
            <td>白天</td>
            <td><img src="./p/1.jpg" alt=""></td>
            <td>天氣晴朗,適合出行</td>
        </tr>
        <tr>
            <td>2020/1/2</td>
            <td>白天</td>
            <td><img src="./p/2.jpg" alt=""></td>
            <td>有小雨,出門請帶傘</td>
        </tr>
    </tbody>
</table>

輸出:

天氣情況
日期		天氣情況	出行情況
2020/1/1	白天		天氣晴朗,適合出行
2020/1/2	白天		有小雨,出門請帶傘

合並列

代碼

<table border="1" cellpadding="30" cellspacing="1">
    <caption>天氣情況</caption>
    <thead>
        <tr  align="right">
            <th colspan="2">日期</th>
            <th>天氣情況</th>
            <th>出行情況</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">2020/1/1</td>
            <td>白天</td>
            <td><img src="./p/1.jpg" alt=""></td>
            <td>天氣晴朗,適合出行</td>
        </tr>
        <tr>
            <td>夜晚</td>
            <td><img src="./p/1.jpg" alt=""></td>
            <td>天氣晴朗,適合出行</td>
        </tr>
        <tr>
            <td rowspan="2">2020/1/2</td>
            <td>白天</td>
            <td><img src="./p/2.jpg" alt=""></td>
            <td>有小雨,出門請帶傘</td>
        <tr>
            <td>夜晚</td>
            <td><img src="./p/2.jpg" alt=""></td>
            <td>有小雨,出門請帶傘</td>
        </tr>
    </tbody>
</table>

輸出:

天氣情況
日期		出行情況
2020/1/1	白天	天氣晴朗,適合出行
2020/1/1	夜晚	天氣晴朗,適合出行
2020/1/2	白天	有小雨,出門請帶傘
2020/1/2	夜晚	有小雨,出門請帶傘

表格屬性:單元格對齊方式

align	屬性值
left	左
center	中
right	右

valign	屬性值
top	上
middle	中
bottom	下

這些屬性,放在不同的標簽上,所影響的范圍不同

代碼:

<table border="1" cellpadding="30" cellspacing="1">
    <caption>天氣情況</caption>
    <thead>
        <tr  align="right">
            <th colspan="2"  align="left">日期</th>
            <th>天氣情況</th>
            <th>出行情況</th>
        </tr>
    </thead>
    <tbody valign="bottom">
        <tr>
            <td rowspan="2">2020/1/1</td>
            <td>白天</td>
            <td><img src="./p/1.jpg" alt=""></td>
            <td>天氣晴朗,適合出行</td>
        </tr>
        <tr>
            <td>夜晚</td>
            <td><img src="./p/1.jpg" alt=""></td>
            <td>天氣晴朗,適合出行</td>
        </tr>
        <tr>
            <td rowspan="2">2020/1/2</td>
            <td>白天</td>
            <td><img src="./p/2.jpg" alt=""></td>
            <td>有小雨,出門請帶傘</td>
        <tr>
            <td>夜晚</td>
            <td><img src="./p/2.jpg" alt=""></td>
            <td>有小雨,出門請帶傘</td>
        </tr>
    </tbody>
    <tfoot>

    </tfoot>
</table>

輸出:

</tfoot>

天氣情況
日期		出行情況
2020/1/1	白天	天氣晴朗,適合出行
2020/1/1	夜晚	天氣晴朗,適合出行
2020/1/2	白天	有小雨,出門請帶傘
2020/1/2	夜晚	有小雨,出門請帶傘

表單

表單標簽

form標簽: 表單的最外層容器
input標簽: 用於搜集用戶信息,根據不同的type屬性值,展示不同的控件

type屬性	含義
text	普通的文本輸入框
password	密碼輸入框
checkbox	復選框
radio	單選框
file	上傳文件
submit	提交按鈕
reset	重置按鈕

代碼

<!-- 表單 -->
<form action="http://www.sunlizhao.cn">
    輸入框: 
    <input type="text"> <br>
    密碼框: 
    <input type="password"> <br>
    復選框: 
    <input type="checkbox">蘋果
    <input type="checkbox">香蕉
    <input type="checkbox">葡萄 <br>
    單選框: 
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女  <br>
    上傳文件: 
    <input type="file"> <br>
    提交按鈕: 
    <input type="submit">
    重置按鈕: 
    <input type="reset"> <br>
</form>

輸出:

表單屬性

action 提交的位置

action屬性點擊提交按鈕后,數據的提交位置

<form action="http://www.sunlizhao.cn">

checked 設置默認值

代碼

<form action="http://www.sunlizhao.cn">
    復選框: 
    <input type="checkbox" checked>蘋果
    <input type="checkbox" checked>香蕉
    <input type="checkbox">葡萄 <br>
    單選框: 
    <input type="radio" name="gender">男
    <input type="radio" name="gender" checked>女  <br>
</form>

輸出:

disabled 禁止選擇某一項

代碼:

<form action="http://www.sunlizhao.cn">
    復選框: 
    <input type="checkbox" checked>蘋果
    <input type="checkbox" checked>香蕉
    <input type="checkbox" disabled>葡萄 <br>
    單選框: 
    <input type="radio" name="gender">男
    <input type="radio" name="gender" checked>女  <br>
</form>

輸出:

placeholder在數據框中添加提示信息

代碼:

<form action="http://www.sunlizhao.cn">
    用戶名: 
    <input type="text" placeholder="請輸入用戶名"> <br>
    密碼框: 
    <input type="password" placeholder="請輸入密碼"> <br>
</form>

輸出:

表單相關標簽

textarea 多行文本框

textarea屬性	描述
cols	列
rows	行

代碼:

<form action="http://www.sunlizhao.cn">
    <textarea cols="30" rows="10"></textarea> <hr>
</form>

輸出

select下拉菜單

默認選擇第一行,selected屬性設置默認值
代碼:

<form action="http://www.sunlizhao.cn">
    下拉菜單
    <select>
        <option>北京</option>
        <option selected>上海</option>
        <option>廣州</option>
    </select>   
</form>

輸出:

通過selected 和disabled實現提示信息,且不可選擇

代碼:

<form action="http://www.sunlizhao.cn">
    下拉菜單
    <select>
        <option selected disabled>請選擇</option>
        <option>北京</option>
        <option>上海</option>
        <option>廣州</option>
    </select>
</form>

輸出

size屬性設置下拉菜單展示的行數,默認為1
代碼:

<form action="http://www.sunlizhao.cn">
    下拉菜單
    <select size="2">
        <option>北京</option>
        <option>上海</option>
        <option>廣州</option>
    </select>
</form>

輸出

multiple多選屬性
代碼:

<form action="http://www.sunlizhao.cn">
    下拉菜單
    <select multiple>
        <option>北京</option>
        <option>上海</option>
        <option>廣州</option>
    </select>
</form>

輸出:

multiple屬性還支持在上傳文件中使用
代碼

    <input type="file" multiple>

輸出

label輔助表單

通過label標簽可以實現單選框或復選框中,符號和文字是一個整體

代碼:

<form action="http://www.sunlizhao.cn">
    單選框: 
    <input type="radio" name="gender" checked id="man">
    <label for="man">男</label>
    <input type="radio" name="gender" id="woman">
    <label for="woman">女</label>
    <br>
    復選框: 
    <input type="checkbox" id="apples">
    <label for="apples">蘋果</label> 
    <input type="checkbox" id="banana">
    <label for="banana">香蕉</label> 
    <input type="checkbox" id="grape">
    <label for="grape">葡萄</label> <br>
</form>

輸出:

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 【HTML基礎】表格和表單 HTML--表格與表單 HTML 表單和表格 HTML的表格、表單和框架 HTML之表格標簽和form表單 HTML中表格的使用和表單的使用【HTML】--- 列表、表格、form表單標簽 html-表格和表單（詳細講解） HTML&CSS精選筆記_表格與表單制作Html標簽以及表單、表格內容