表格和表單

阿新 • • 發佈：2020-08-01

目錄：1.表格 2.表單 3.例子

一、表格(接近淘汰)

長表格

使用場景：有一些情況下表格是非常地長的，這時就需要將表格分為三個部分，表頭、表格的主體、表格底部。

三個標籤：

　　1. thead 表頭： thead 中的內容，永遠會顯示在表格的頭部

　　2. tbody 表格主體：tbody 中的內容，永遠會顯示在表格的中間

　　3. tfoot 表格底部：tfoot 中的內容，永遠會顯示在表格的底部

如果表格中沒有寫 tbody，瀏覽器會自動在表格中新增 tbody，並且將所有的 tr 都放到 body 中。

二、表單

　　在表單中可以接受 fieldset 來為表單項進行分組，可以將表單項中的同一組放到 fieldset 中。在 fieldset 可以使用 legend 子標籤，來指定組名。

三、例子

最終實現的效果

詳細步驟

為表單項進行分組，指定組名。

在分組裡填充資訊

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="app">
            <!-- 第一部分 -->
            <fieldset>
                <!-- 分組名稱 -->
                < 
legend>錄入系統</legend>
                <div>
                    <span>姓名：</span>
                    <input type="text" placeholder="請輸入姓名"/>
                </div>
                <div>
                    <span>年齡：</span>
                    <input  
type="text" placeholder="請輸入年齡"/>
                </div>
                <div>
                    <span>性別：</span>
                    <select>
                        <option value ="男">男</option>
                        <option value ="女">女</option>
                    </select>
                </div>
                <div>
                    <span>手機：</span>
                    <input type="text" placeholder="請輸入手機號碼"/>
                </div>
                <input type="submit" value="建立新使用者"/>
            </fieldset>
        </div>
    </body>
</html>

程式碼

在分組下寫一個表格，先寫個表頭

寫表格主體

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="app">
            <!-- 第一部分 -->
            <fieldset>
                <!-- 分組名稱 -->
                <legend>錄入系統</legend>
                <div>
                    <span>姓名：</span>
                    <input type="text" placeholder="請輸入姓名"/>
                </div>
                <div>
                    <span>年齡：</span>
                    <input type="text" placeholder="請輸入年齡"/>
                </div>
                <div>
                    <span>性別：</span>
                    <select>
                        <option value ="男">男</option>
                        <option value ="女">女</option>
                    </select>
                </div>
                <div>
                    <span>手機：</span>
                    <input type="text" placeholder="請輸入手機號碼"/>
                </div>
                <input type="submit" value="建立新使用者"/>
            </fieldset>
            <!-- 第二部分 -->
            <table>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>性別</th>
                        <th>年齡</th>
                        <th>手機</th>
                        <th>刪除</th>
                    </tr>
                    <tbody>
                        <tr>
                            <td>許一</td>
                            <td>女</td>
                            <td>30</td>
                            <td>13539511111</td>
                            <td><button>刪除</button></td>
                        </tr>
                        <tr>
                            <td>許二</td>
                            <td>男</td>
                            <td>20</td>
                            <td>13539522222</td>
                            <td><button>刪除</button></td>
                        </tr>
                        <tr>
                            <td>許三</td>
                            <td>女</td>
                            <td>25</td>
                            <td>13539533333</td>
                            <td><button>刪除</button></td>
                        </tr>
                    </tbody>
                </thead>
            </table>
        </div>
    </body>
</html>

程式碼

下面完成樣式。

讓整個表單上下外邊距為 50px，左右空白自適應並且相等。

設定 fieldset 的邊框跟下外邊距，設定 fieldset 中的 input 寬高跟外邊距。

設定 table 的寬度、邊框，設定文字對齊方式為居中。設定表格的表頭 thead 的背景顏色跟字型顏色。設定表格的行 tr 的行高為 40 px。

至此，完成了一個簡單的表單。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #app{
                margin: 50px auto;
                width: 600px;
            }
            fieldset{
                border: 2px solid orange;
                margin-bottom: 20px;
            }
            fieldset input{
                width: 200px;
                height: 30px;
                margin: 10px 0;
            }
            table{
                width: 100%;
                border: 10px solid orange;
                text-align: center;
            }
            table thead{
                background-color: orange;
                color: #fff;
            }
            table tr{
                line-height: 40px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- 第一部分 -->
            <fieldset>
                <!-- 分組名稱 -->
                <legend>錄入系統</legend>
                <div>
                    <span>姓名：</span>
                    <input type="text" placeholder="請輸入姓名"/>
                </div>
                <div>
                    <span>年齡：</span>
                    <input type="text" placeholder="請輸入年齡"/>
                </div>
                <div>
                    <span>性別：</span>
                    <select>
                        <option value ="男">男</option>
                        <option value ="女">女</option>
                    </select>
                </div>
                <div>
                    <span>手機：</span>
                    <input type="text" placeholder="請輸入手機號碼"/>
                </div>
                <input type="submit" value="建立新使用者"/>
            </fieldset>
            <!-- 第二部分 -->
            <table>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>性別</th>
                        <th>年齡</th>
                        <th>手機</th>
                        <th>刪除</th>
                    </tr>
                    <tbody>
                        <tr>
                            <td>許一</td>
                            <td>女</td>
                            <td>30</td>
                            <td>13539511111</td>
                            <td><button>刪除</button></td>
                        </tr>
                        <tr>
                            <td>許二</td>
                            <td>男</td>
                            <td>20</td>
                            <td>13539522222</td>
                            <td><button>刪除</button></td>
                        </tr>
                        <tr>
                            <td>許三</td>
                            <td>女</td>
                            <td>25</td>
                            <td>13539533333</td>
                            <td><button>刪除</button></td>
                        </tr>
                    </tbody>
                </thead>
            </table>
        </div>
    </body>
</html>