第5章表格和表單(2)

表格

最簡(jiǎn)單的表格

<table width="400" border="1px">
<tr>
<td>id</td>
<td>用戶名</td>
<td>密碼</td>
</tr>
<tr>
<td>id</td>
<td>用戶名</td>
<td>密碼</td>
</tr>
<tr>
<td>id</td>
<td>用戶名</td>
<td>密碼</td>
</tr>
</table>

列合并 colspan="2" 表示合并幾列

例子

<table width="400" border="1px">
<tr>
<td>id</td>
<td>用戶名</td>
<td>密碼</td>
<td>密碼</td>
</tr>
<tr>
<td>id</td>
<td>用戶名</td>
<td>密碼</td>
<td>密碼</td>
</tr>
<tr>
<td>合計(jì)</td>
<td colspan="3">用戶名</td>
</tr>
</table>

行合并 rowspan="2" 表示合并幾行
注意：rowspan也要寫在td上,合并下面的幾行
課堂練習(xí)

<table border="1" width="300">
<tr>
<td width="20%">1</td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
</tr>
<tr>
<td>2</td>
<td rowspan="2" colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

caption表標(biāo)題 thead表頭,tbody表格體,tfoot 表格腳
代碼可以不按順序放，但是顯示的效果一定是caption---》 thead---》 tbody---》 tfoot 順序

<table border="1" width="300">
        <!-- 標(biāo)題，居中 -->
        <caption>員工信息表</caption>
<tfoot>
<tr>
<td>表格腳</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<thead>
<tr>
<td width="20%">表格頭</td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td rowspan="2" colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
</tr>
</tbody>

</table>

和如下代碼效果相同

<table border="1" width="300">
   <!-- 標(biāo)題各聘，居中 -->
<caption>員工信息表</caption>
<thead>
<tr>
<td width="20%">表格頭</td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
</tr>
</thead>


<tbody>
<tr>
<td>2</td>
<td rowspan="2" colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
</tr>
</tbody>
 <tfoot>
<tr>
<td>表格腳</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>

這里面的tbody重點(diǎn)掌握

表標(biāo)題

<caption>員工信息表</caption>
<th> 字體自動(dòng)加粗脏毯、居中，一般用在thead tfoot里
cellpadding="0" cellspacing="0" 內(nèi)填充和外填充都為0郑诺，表格變?yōu)閷?shí)心
cellpadding--類似margin cellpadding--padding

<table border="1" width="300" cellpadding="0" cellspacing="0">
<caption>員工信息表</caption>
<tfoot>
<tr>
<th>123</th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
<thead>
<tr>
<td width="20%">11</td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td rowspan="2" colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

匯總

table標(biāo)簽（表格）、tr標(biāo)簽（行）、td標(biāo)簽（標(biāo)準(zhǔn)單元格）th標(biāo)簽（表頭單元格）caption表標(biāo)題 thead表頭,tbody表格體,tfoot 表格腳 rowspan 行合并 colspan 列合并

表單

html4.0 用戶的輸入必須放在表單里才能提交到后臺(tái)
表單<form></form>

單選框 radio
多選框 checkbox
下拉列表框 select option
普通文本輸入框 text
密碼輸入框 password
提交按鈕 submit 會(huì)把表單內(nèi)容提交到后臺(tái)處理
重置按鈕 reset 會(huì)把表單內(nèi)容清空

<form action="" >
性別(單選框)：<input type="radio" name="sex" />男
<input type="radio" name="sex" />女<br>
愛(ài)好(復(fù)選框)：
<input type="checkbox" name="hobby" >吃串
<input type="checkbox" name="hobby" >喝酒
<input type="checkbox" name="hobby" >打豆豆<br>
家鄉(xiāng)(下拉列表框)：
<select name="hometon">
<option>請(qǐng)選擇</option>
<option>沈陽(yáng)</option>
<option>撫順</option>
<option>本溪</option>
<option>丹東</option>
</select><br>
賬號(hào)（文本框）:<input type="text" name="username"/><br>
密碼（密碼框）:<input type="password" name="pwd"/><br>
確認(rèn)密碼（密碼框）:<input type="password" name="repwd"/><br>
<input type="submit"/>
<input type="reset"/>
</form>

文本域textarea rows行數(shù) cols列數(shù)
label標(biāo)簽
readonly
disabled
hidden

文本域textarea
個(gè)人簡(jiǎn)介:

<textarea rows="3" cols="50"></textarea>

label標(biāo)簽

readonly：readonly readonly="readonly" readonly="true" 只讀的
disabled:不可用的
hidden:隱藏的

<input type="hidden" name="id" value=""/>

再來(lái)個(gè)實(shí)例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="#">
        <table border="1px" cellpadding="0px" cellspacing="0px" width="80%">
            
            <tr>
                <td width="20%">性質(zhì)</td>
                <td><input type="radio" name="cate" value="">人</input>  
                <input type="radio" name="cate" value="">公司</input> 
                </td>
            </tr>
            
            <tr>
                <td width="20%">愛(ài)好</td>
                <td><input type="checkbox" name="hobby" value="">看電視</input>  
                <input type="checkbox" name="hobby" value="">寫代碼</input> 
                <input type="checkbox" name="hobby" value="">學(xué)習(xí)</input> 
                <input type="checkbox" name="hobby" value="">打籃球</input>
                </td>
            </tr>
            
            
            <tr>
                <td>昵稱：</td>
                <td>
                    <!-- type="text"普通文本框 -->
                    <input type="text" />
                </td>
            </tr>
            <tr>
                <td>密碼：</td>
                <!-- type="password"密碼輸入框 隱藏用戶輸入真實(shí)值 -->
                <td><input type="password" /></td>
            </tr>
            <tr>
                <td>確認(rèn)密碼：</td>
                <td> <input type="password" /></td>
            </tr>
            <tr>
                <td>電子郵箱：</td>
                <!-- type="email"郵箱類型輸入框 h5新增加的類型-->
                <td><input type="email" /></td>
            </tr>
            <tr>
                <td>單位（個(gè)人）名稱：</td>
                <td><input type="text" /></td>
            </tr>
            <tr>
                <td>上傳頭像：</td>
                <!-- type="file"文件上傳,可以選擇本地文件夾下的文件  -->
                <td><input type="file"/></td>
            </tr>
            <tr>
                <td>所屬國(guó)家：</td>
                <td>
                <select name="country">
                   <option value=""> 請(qǐng)選擇</option>
                   <option value="1">中華人民共和國(guó)</option>
                   <option value="2">日本</option>
                   <option value="3">韓國(guó)</option>
                </select>
                
                </td>
            </tr>
            <tr>
                <td>所屬省份：</td>
                <td></td>
            </tr>
            <tr>
                <td>所屬城市：</td>
                <td></td>
            </tr>
            <tr>
                <td>手機(jī)：</td>
                <td><input type="tel" name="tel"/></td>
            </tr>
            <tr>
                <td>固定電話：</td>
                <td><input type="text" name="phone"/></td>
            </tr>
            <tr>
                <td>想要留言：</td>
                <td><textarea cols="100" rows="5"></textarea></td>
            </tr>
            <tr>
                <td><input type="submit"/></td>
                <td><input type="reset"/></td>
            </tr>
        </table>
        </form>
        
    
    </body>
</html>

下表列出了輸入限制

image.png

上面的標(biāo)簽匯總

       <!-- type="text"普通文本框 -->
    <!-- type="password"密碼輸入框 隱藏用戶輸入真實(shí)值 -->
    <!-- type="email"郵箱類型輸入框 h5新增加的類型-->
    <!-- type="file"文件上傳,可以選擇本地文件夾下的文件  -->
    <!-- <input type="submit"/> 提交按鈕-->
    <!-- <input type="reset"/> 重新輸入-->
    <!-- <select name="country">  上拉列表框 
        <option value=""> 請(qǐng)選擇</option>   下拉列表選項(xiàng)
    </select> -->
    <!-- textarea文本域 cols列數(shù) rows行數(shù)
    <textarea cols="100" rows="5"></textarea> -->
    <!-- radio 單選框通過(guò)name屬性確定選項(xiàng)為一組
    <input type="radio" name="cate">人</input>  
    <input type="radio" name="cate">公司</input> -->

最后編輯于：2020.02.14 15:18:25

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末曾沈，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子鸥昏，更是在濱河造成了極大的恐慌塞俱，老刑警劉巖，帶你破解...
沈念sama閱讀 219,366評(píng)論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件吏垮，死亡現(xiàn)場(chǎng)離奇詭異障涯，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)膳汪，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,521評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門唯蝶，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人遗嗽，你說(shuō)我怎么就攤上這事粘我。” “怎么了痹换？”我有些...
開(kāi)封第一講書人閱讀 165,689評(píng)論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵征字，是天一觀的道長(zhǎng)都弹。經(jīng)常有香客問(wèn)我，道長(zhǎng)匙姜，這世上最難降的妖魔是什么缔杉？我笑而不...
開(kāi)封第一講書人閱讀 58,925評(píng)論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮搁料，結(jié)果婚禮上或详，老公的妹妹穿的比我還像新娘。我一直安慰自己郭计，他們只是感情好霸琴，可當(dāng)我...
茶點(diǎn)故事閱讀 67,942評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著昭伸，像睡著了一般梧乘。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上庐杨，一...
開(kāi)封第一講書人閱讀 51,727評(píng)論 1贊 305
城市分裂傳說(shuō)
那天选调，我揣著相機(jī)與錄音，去河邊找鬼灵份。笑死仁堪，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的填渠。我是一名探鬼主播弦聂，決...
沈念sama閱讀 40,447評(píng)論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼氛什！你這毒婦竟也來(lái)了莺葫？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書人閱讀 39,349評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤枪眉，失蹤者是張志新（化名）和其女友劉穎捺檬，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體贸铜，經(jīng)...
沈念sama閱讀 45,820評(píng)論 1贊 317
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡堡纬，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,990評(píng)論 3贊 337
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了萨脑。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片隐轩。...
茶點(diǎn)故事閱讀 40,127評(píng)論 1贊 351
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖渤早，靈堂內(nèi)的尸體忽然破棺而出职车，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 35,812評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布悴灵，位于F島的核電站扛芽，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏积瞒。R本人自食惡果不足惜川尖，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,471評(píng)論 3贊 331
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望茫孔。院中可真熱鬧叮喳，春花似錦、人聲如沸缰贝。這莊子的主人今日做“春日...
開(kāi)封第一講書人閱讀 32,017評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)剩晴。三九已至锣咒，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間赞弥，已是汗流浹背毅整。一陣腳步聲響...
開(kāi)封第一講書人閱讀 33,142評(píng)論 1贊 272
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留绽左，地道東北人悼嫉。一個(gè)月前我還...
沈念sama閱讀 48,388評(píng)論 3贊 373
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像妇菱，于是被迫代替她去往敵國(guó)和親承粤。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,066評(píng)論 2贊 355

第5章表格和表單(2)

第5章表格和表單(2)

相關(guān)標(biāo)簽

表格

表標(biāo)題

表單

再來(lái)個(gè)實(shí)例

下表列出了輸入限制

上面的標(biāo)簽匯總

推薦閱讀更多精彩內(nèi)容