一、表格

在現實生活中，經常要表格來表示格式化的數據課程表，人名單。。。通過table標簽來創建表格<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>合計</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>合計</td><td>300</td></tr></tfoot> </table>

表格的樣式

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

二、表單

表單在現實生活中用于提交數據在網頁中也可以使用表單，網頁中的表單用于將本地數據提交給遠程服務器使用form標簽來創建表單<!-- form中必須要有的屬性action指定表單要提交的服務器的地址--> <form action="target.html"><!-- 添加表單項：文本框數據提交到服務器中，必須指定一個name值-->文本框 <input type="text" name="username"><br><br><!-- 密碼框 -->密碼框<input type="password" name="password"><br><br><!-- 單選按鈕必須有相同的name屬性才能選一個還必須指定一個value屬性 會作為最終用戶填寫的值checked 可以將單選按鈕設置為默認選中-->單選按鈕<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才有選項--><select name="haha"><option value="i">選項1</option><option value="ii">選項2</option><option value="iii">選項3</option></select><br><br><!-- 提交按鈕value指定內容 --><input type="submit" value="登錄"> </form>

表單補充

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。