10顶吮、HTML&CSS-高級表單社牲、表格

每天一句: 如果你不能打敗對手,那你就加入對手悴了。

一搏恤、表單高級

  • 表單字段集
 語法:
    <fieldset> </fieldset>
 說明:
    相當于一個方框,在字段集中可以包含文本和其他元素湃交。該元素用于對表單中的元素進行分組并在文檔中區(qū)別標出文本熟空。fieldset元素可以嵌套,在其內(nèi)部可以在設(shè)置多個fieldset對象;
  • 字段級標題
語法:
    <legend align="left/center/right/justify">個人信息</legend>
 說明: 
    legend元素可以在fieldset對象繪制的方框內(nèi)插入一個標題,legend元素必須是fieldset內(nèi)的第一個元素;
  • 上傳文件框
語法:
    <input type="file" multiple="multiple" />
 說明:
    type屬性值新增的類型有: file文件類型巡揍,可進行文件的選擇痛阻,multiple屬性可實現(xiàn)多選;
  • required屬性
  語法: 
    <input type=“text” required=“required”/>
    <input type=“text” required />
  說明: 
    設(shè)置必填屬性腮敌,即此項必填項阱当;

二、表格屬性

  • 單元格間距(cellspacing)
 語法:
    border-spacing:value;
 說明:
     單元格間距(該屬性必須給table添加)糜工,表示單元格邊框之間的距離弊添,不可取負值;
  • 合并相鄰單元格邊框
 語法:
    border-collapse:separate/collapse;
 說明:
    合并相鄰單元格邊框(該屬性必須給table添加);
    separate(邊框分開)默認值;
    collapse(邊框合并);
  • 無內(nèi)容時單元格的設(shè)置
 語法:
    empty-cells:show/hide;
 說明:
    定義當單元格無內(nèi)容時,是否顯示該單元格的邊框捌木;
    show:顯示;
    hide:隱藏;
    【不要使用border-collapse:collapse;否則無效】
  • 顯示單元油坝、行和列的算法(加快運行的速度)
 語法:
    table-layout:auto/fixed; (默認是auto)
 說明:
    定義表格的布局算法,設(shè)置fixed,文本為英文字母且無空格時澈圈,內(nèi)容超出單元格寬度則固定不變彬檀;如沒設(shè)寬則平均分配;設(shè)置auto時瞬女,則隨內(nèi)容寬度而定;
    fixed:固定寬窍帝,不會隨內(nèi)容多少改變單元格寬,寬度可以明確定義,沒有定義時則寬度會平均分配诽偷,高度則會隨內(nèi)容變化;
    auto自動表格布局: 優(yōu)點(靈活)坤学、缺點(較慢,因為要確定布局前要先訪問表格中所有數(shù)據(jù));
    fixed固定表格布局: 優(yōu)點(加快運行速度报慕,允許瀏覽器更快的對表格進行布局)深浮、缺點(不太靈活)
  • 設(shè)置表格標題的位置
 語法:
    caption-side:top/right/bottom/left
 說明:
    定義表格的caption對象放于表格的哪個位置,與caption元素一起使用;
    top為默認值;
    left,right位置只有火狐識別;
    top,bottom IE6以上版本支持眠冈,IE6以下版本不支持其它屬性值飞苇,只識別top;
  • 隔行變色設(shè)置
 語法:
    雙數(shù)行: tr:nth-child(2n){ }
    單數(shù)行: tr:nth-child(2n+1){ }
 說明:
    設(shè)置單數(shù)單元格的樣式和雙數(shù)單元格的樣式
  • 數(shù)據(jù)行分組
 <thead></thead>      表頭
 <tbody></tbody>      表體
 <tfoot></tfoot>      表尾
 說明:一個Table中,只能包含一個thead,一個tfoot,但可包含多個tbody;
 
 備注:
   thead 元素應(yīng)該與 tbody 和 tfoot 元素結(jié)合起來使用;
   tbody 元素用于對 HTML 表格中的主體內(nèi)容進行分組洋闽, tfoot 元素用于對 HTML 表格中的表注(頁腳)內(nèi)容進行分組;
   如果要使用 thead玄柠、tfoot 以及 tbody 元素,就必須使用全部的元素;
   它們的出現(xiàn)次序是:thead诫舅、tfoot羽利、tbody,這樣瀏覽器就可以在收到所有數(shù)據(jù)前呈現(xiàn)頁腳了;
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末刊懈,一起剝皮案震驚了整個濱河市这弧,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌虚汛,老刑警劉巖匾浪,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異卷哩,居然都是意外死亡蛋辈,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進店門将谊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來冷溶,“玉大人,你說我怎么就攤上這事尊浓〕哑担” “怎么了?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵栋齿,是天一觀的道長苗胀。 經(jīng)常有香客問我襟诸,道長,這世上最難降的妖魔是什么基协? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任歌亲,我火速辦了婚禮,結(jié)果婚禮上堡掏,老公的妹妹穿的比我還像新娘应结。我一直安慰自己刨疼,他們只是感情好泉唁,可當我...
    茶點故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著揩慕,像睡著了一般亭畜。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上迎卤,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天拴鸵,我揣著相機與錄音,去河邊找鬼蜗搔。 笑死劲藐,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的樟凄。 我是一名探鬼主播聘芜,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼间聊,長吁一口氣:“原來是場噩夢啊……” “哼辜贵!你這毒婦竟也來了描函?” 一聲冷哼從身側(cè)響起搓茬,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤衣形,失蹤者是張志新(化名)和其女友劉穎渠啊,沒想到半個月后值漫,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體乡数,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡炼绘,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年嗅战,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片俺亮。...
    茶點故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡驮捍,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出铅辞,到底是詐尸還是另有隱情厌漂,我是刑警寧澤,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布斟珊,位于F島的核電站苇倡,受9級特大地震影響富纸,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜旨椒,卻給世界環(huán)境...
    茶點故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一晓褪、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧综慎,春花似錦涣仿、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至米罚,卻和暖如春钧汹,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背录择。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工拔莱, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人隘竭。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓塘秦,卻偏偏與公主長得像,于是被迫代替她去往敵國和親动看。 傳聞我的和親對象是個殘疾皇子尊剔,可洞房花燭夜當晚...
    茶點故事閱讀 43,472評論 2 348

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

  • HTML標簽解釋大全 一、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,229評論 1 41
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案弧圆? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 13,737評論 1 92
  • 表格式化 我們先來看看組裝表的基本方法赋兵,并了解表中的元素相互之間有什么關(guān)系。這稱為表格式化搔预。 表的視覺編排 CSS...
    exialym閱讀 677評論 0 4
  • 一.有序列表 (ordered list) 格式: 語義及運用:給一堆數(shù)據(jù)添加列表語義拯田,數(shù)據(jù)有先后之分历造。常運用于歌...
    饑人谷_劉沖閱讀 1,644評論 0 1
  • 據(jù)新華社報道,今年上半年船庇,河北去產(chǎn)能進度快于往年吭产,好于預(yù)期。鋼鐵去產(chǎn)能實現(xiàn)“雙過千”鸭轮,壓減退出煉鋼產(chǎn)能1572萬噸...
    摩爾金融閱讀 208評論 0 0