一、表格

在現(xiàn)實(shí)生活中，經(jīng)常要表格來表示格式化的數(shù)據(jù)課程表，人名單。。。通過table標(biāo)簽來創(chuàng)建表格<table border="1" width='50%' align="center"> <!-- 在table中使用tr表示表格中一行，有幾個tr就有幾行--><tr><!-- 在tr中需要td，一個td表示一個單元格,有幾個td就有幾個單元格--><td>A1</td><td>A2</td><td>A3</td></tr><tr><td>B1</td><!-- colspan 表示橫向合并單元格。rowspan 表示縱向合并單元格。--><td colspan="2">B2</td></tr></table>

長表格

可以將一個表格分成三個部分頭部 thead主體 tbody底部 tfootth表示頭部單元格<table border="1" width='50%' align="center"><thead><tr><th>日期</th><th>收入</th><th>支出</th><th>合計(jì)</th></tr></thead><tbody><tr><td>2001.1.1</td><td>500</td><td>200</td><td>300</td></tr><tr><td>2001.1.1</td><td>500</td><td>200</td><td>300</td></tr><tr><td>2001.1.1</td><td>500</td><td>200</td><td>300</td></tr><tr><td>2001.1.1</td><td>500</td><td>200</td><td>300</td></tr></tbody><tfoot><tr><td></td><td></td><td>合計(jì)</td><td>300</td></tr></tfoot> </table>

表格的樣式

table{margin: 0 auto;width: 50%;border: 1px solid black;/* border-spacing表示邊框之間的距離*//* boder-collapse：collapse 設(shè)置邊框的合并*//* border-spacing: 0px; */border-collapse: collapse;}td{border: 1px solid black;height: 100px;/* 默認(rèn)情況下元素在td中是垂直居中的 可以通過vertical-align來修改*/vertical-align: top;}/* 如果表格中沒有使用tbody而是直接使用tr那么瀏覽器會自動創(chuàng)建一個tbody，并且將tr全部放到tbody里tr不是table的子元素，所以用table > tr無法選中tr*/tr:nth-child(2n){background-color: #bfa;}.box1{width: 300px;height: 300px;background-color: orange;/* 想元素設(shè)置為單元格td */display: table-cell;vertical-align: middle;}

二、表單

表單在現(xiàn)實(shí)生活中用于提交數(shù)據(jù)在網(wǎng)頁中也可以使用表單，網(wǎng)頁中的表單用于將本地?cái)?shù)據(jù)提交給遠(yuǎn)程服務(wù)器使用form標(biāo)簽來創(chuàng)建表單<!-- form中必須要有的屬性action指定表單要提交的服務(wù)器的地址--> <form action="target.html"><!-- 添加表單項(xiàng)：文本框數(shù)據(jù)提交到服務(wù)器中，必須指定一個name值-->文本框 <input type="text" name="username"><br><br><!-- 密碼框 -->密碼框<input type="password" name="password"><br><br><!-- 單選按鈕必須有相同的name屬性才能選一個還必須指定一個value屬性 會作為最終用戶填寫的值checked 可以將單選按鈕設(shè)置為默認(rèn)選中-->單選按鈕<input type="radio" name="hello" value="a"><input type="radio" name="hello" value="b" checked><br><br><!-- 多選框和單選框差不多--><input type="checkbox" name="test" value="1"><input type="checkbox" name="test" value="2"><input type="checkbox" name="test" value="3"><br><br><!-- 下拉列表select里必須有option才有選項(xiàng)--><select name="haha"><option value="i">選項(xiàng)1</option><option value="ii">選項(xiàng)2</option><option value="iii">選項(xiàng)3</option></select><br><br><!-- 提交按鈕value指定內(nèi)容 --><input type="submit" value="登錄"> </form>

表單補(bǔ)充

<form action="target.html"><input type="text" name="username" value="hello"><br><br><!-- 關(guān)閉自動補(bǔ)全 autocomplete="off"--><input type="text" name="a" autocomplete="off"><br><br><!-- readonly 將表單項(xiàng)設(shè)置為只讀（數(shù)據(jù)會提交）disable 將表單項(xiàng)設(shè)置為禁用（數(shù)據(jù)不會提交）autofocus 表單自動獲取焦點(diǎn)--><input type="text" name="b" value="hello" readonly><br><br><input type="submit" ><!-- 選擇顏色 --><input type="color"><!-- 普通的按鈕 --><input type="button" value="按鈕" ><!-- 重置按鈕表單值改為默認(rèn)按鈕--><input type="reset" ><br><br><!-- 電子郵件會提示輸入格式是否正確--><input type="email"><!-- 與上邊不同的是下邊的按鈕標(biāo)簽是成對的 --><button type="submit">提交</button><button type="reset">重置</button><button type="button">按鈕</button></form>

總結(jié)

以上是生活随笔為你收集整理的CSS表格和表单的样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。