[19/06/08-星期六] CSS基礎_表格&表單

時間 2019-11-16

標籤星期六 css 基礎表格表單欄目 CSS 简体版

原文原文鏈接

1、表格css

　　如生活中的Excel表格，用途就是同來表示一些格式化的數據，如課程表、工資條、成績單。html

　　在網頁中也能夠建立出不一樣的表格，在HTML中使用table標籤來建立一個表格。table是個塊元素。瀏覽器

　　在表格中使用tr（table-row 行）來表示表格中的一行，在tr中使用td（table data cell ，表格數據元素）來建立單元格，幾個td就是幾個單元格。服務器

td表示列名（table Header，頭部信息，如「姓名」、「年齡」），也是位於一行當中，即tr之間，th就是一個特殊的td。默認居中加粗。框架

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格</title>
        <style type="text/css">
            table{/*爲表格設置樣式*/
                width:300px;
                margin: 0 auto;
                border: 1px solid black; /*只是單元格外邊有框*/
                border-spacing: 0;/*table和td邊框之間默認有距離，看起來好像雙線，這個屬性能夠設置去掉*/
                border-collapse: collapse;/*能夠用來設置表格的邊框合併
                若是設置了邊框合併，border-spacing自動失效，無論你設置的數值有多大。
                * */
                /*background-color: #BBFFAA;/*設置table的背景顏色,全部的td和tr都變色*/
            }
            td{/*這樣看起來好像雙線邊框*/
                border: 1px solid black;
            }
            th{
                border: 1px solid black;
            }
            tr:nth-child(even){/*使用僞類隔行變色，這裏是讓偶數行(表頭也算在內)變色*/
                background-color: #BBFFAA;
            }
            tr:hover{/*鼠標放在哪行哪行變成黃色*/
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <!--<table border="" cellspacing="" cellpadding=""> 這裏跟css差很少-->
        <table>
            <tr>
                <th>姓名</th> <!--表頭-->
                <th>年齡</th>
                <th>性別</th>                
            </tr>
            <tr>
                <td>A1</td> <!--元素-->
                <td>B1</td>
                <!--rowspan 縱向合併單元格也就是行的合併-->
                <td rowspan="2">C1</td>                
            </tr>
            <tr>
                <td>A2</td>
                <td>B2</td>
                        
            </tr>
            <tr>
                <td>A3</td>
                <!--合併B3和C3意味着第3行只有2個單元格
                    想合併須要在B3上加個屬性colspan 橫向合併單元格也就是列合併,值設置爲要合併單元格的個數。
                -->
                <td colspan="2">B3</td>
                
                <!-- <td>C3</td>    -->            
            </tr>
            <tr>
                <td>A4</td>
                <td>B4</td>
                <td>C4</td>
            </tr>
            <tr>
                <td>A5</td>
                <td>B5</td>
                <td>C5</td>
            </tr>
            <tr>
                <td>A6</td>
                <td>B6</td>
                <td>C6</td>
            </tr>
        
        </table>
        
        
    </body>
</html>

【擴展】長表格（如銀行流水）佈局

　　有些時候表格很長，這時將表格分爲3部分：表頭（thead）、主體（tbody）、底部（tfoot）3個標籤。url

　　這3個標籤的做用就是區別表格的部分，都是table的子標籤。spa

　　區分開3部分以後打印時很方便，能夠在每一頁都加上表頭和底部。thead的內容永遠會在最上邊，tfoot永遠在最下邊，tbody永遠都在中間。code

　　若是表格沒有寫tbody，瀏覽器會自動添加tbody，而且把全部的tr都放在tbody中。因此tr並非table的子元素，經過table>tr子元素選中器沒法選中tr.orm

　　之前能夠用表格來進行頁面佈局，如今不多用了，它已經被css所取代了。由於它維護很難。

　　表格是能夠相互嵌套的。

　　使用table能夠將父元素和子元素的外邊距隔開，阻止他們外邊距的重疊。

　　display：table能夠將一個元素設置爲表格顯示。還能夠解決高度塌陷的問題。table也是塊元素。

　　使用.claerfix:after{

　　　　content：""；

　　　　display：table；

　　　　clear：both；

　　}既能夠解決高度塌陷，又能夠確保父元素和子元素的垂直外邊距不會重疊。在加個 zoom:1 兼容IE6

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>長表格</title>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>日期</th> <th>收入</th> <th>支出</th> <th>合計</th>                    
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>181024</td> <td>+500</td> <td>-300</td> <td>+200</td>
                </tr>
                <tr>
                    <td>181025</td> <td>+700</td> <td>-600</td> <td>+100</td>
                </tr>
                <tr>
                    <td>181026</td> <td>+800</td> <td>-900</td> <td>-100</td>
                </tr>
                <tr>
                    <td>181027</td> <td>+600</td> <td>-700</td> <td>-100</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td></td> <td></td> <td>合計</td> <td>+100</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

2、表單

　　網頁中的表單就是用來向服務器提交信息的，最經常使用的表單就是百度的搜索框，輸入關鍵字後將信息提交給百度服務器，而後服務器返回相應的信息。

還有如註冊頁、登陸、發帖等都須要填寫表單。使用form標籤。必須指定一個action屬性，該屬性指向一個服務器的地址。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表單</title>
    </head>
    <body>
        
        <form action="26-2 模擬服務器.html" >
            用戶：
            <input type="text" name="username" /> <br/> <!--文本框，內聯元素-->
            <!--若是但願表單項的信息提交給服務器須要加個name屬性 name表示提交內容的名字 如username
                用戶填寫的信息會附在url後邊的以查詢字符串的形式發給服務器。如url地址?明值對
                多個值的提交以&隔開。
                文本框中也能夠指定默認值，不是提示文字。
                還能夠使用label專門選中表單中的提示文字。這樣能夠用提示文字設置樣式
              該標籤還能夠指定一個for屬性，該屬性的值須要對應於一個表單項的id值。當點擊郵件是光標直接跳到選擇框
                        
            -->
            <label for="mail">郵件:</label>
            <input id="mail" type="text" name="email" /> <br/>
            
            密碼：
            <input type="password" name="pwd" />  <!--密碼框-->
                        
            <input type="submit" value="註冊"/> <br/><!--提交按鈕能夠把表單內信息提交給服務器-->
            
            <!--單選radio(收音機) 和多選按鈕 checkbox
                單選按鈕經過name來分組，name相同按鈕的是一組,只能選擇其一。
                像這樣須要用戶選擇可是不須要用戶填寫的表單，必須指定一個value屬性，這樣被選中的value屬性值
            會最終提交給服務器
                checked="checked" 默認選中，單選和多選均可以設置默認值。
            -->
            <input type="radio" name="sex" value="1"/>男
            <input type="radio" name="sex" value="0" checked="checked"/>女 <br />
            
            <input type="checkbox" name="address" value="bj"/>北京
            <input type="checkbox" name="address" value="sh"/>上海
            <input type="checkbox" name="address" value="nj"/>南京 <br />
            
            <!--下拉列表 select
                name:須要指定給select
                value：須要指定給option
                默認選中 selected="selected"
                multiple="multiple" 直接展開，不用下拉。下拉列表變成一個多選的下拉列表。
                optgroup能夠對選項進行分組 label來指定分組的名字。
            -->
            省份
            <select name="sf">
                <optgroup label="華中地區"><!--這個華中地區是不能選的，就是個名字-->
                    <option value="hb">湖北省</option>
                    <option value="sx">安徽省</option>
                    <option value="hn">河南省</option>
                </optgroup >
                <optgroup label="華東地區">
                    <option value="ah">浙江省</option>
                    <option value="ah">江蘇省</option>
                </optgroup>                
            </select> <br />
            
            <!--文本域 textarea 建立一個多行的文本框-->                                        
            自我介紹
            <textarea name="intro"></textarea>
            
            <!--重置按鈕
                點擊重置後表單中的內容會變成默認值
            -->
            <input type="reset" value="重置" /> <br />
            
            <!--一個單純按鈕，惟一的做用就是被人點,能夠結合js一塊兒用-->
            <input type="button" value="點擊一下"/> <br />
            <!--使用button也能夠建立按鈕 這種方式更加靈活，能夠放個圖片交互效果更好-->
            <button type="button">提交</button>
            
            <!--fillset 做用是爲表單項進行分組，將表單項中同一組放在一個fillset中 
                使用legend這個子標籤來指定組的名字
            -->
            
            <!--框架集能夠引入多個頁面，而內聯框架只能引入一個，推薦使用框架集
                使用frameset來建立一個框架集。但它與不能與body出如今同一頁面中。
                使用frame子標籤來指定須要引入的頁面。
                <frame src="01.html" />
                須要在frameset中指定 rows屬性 ，讓引入的一行一行的排列
                        cols一列一列的排列。這兩個屬性必須選擇其一，須要在屬性中指定大小如百分比。
                能夠相互嵌套。
            -->
        </form>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。