整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
SS 表格屬性可以幫助您極大地改善表格的外觀。
指定CSS表格邊框，使用border屬性。
下面的例子指定了一個表格的Th和TD元素的紅色邊框：
table,th,td｛border: 1px solid red;}
（1）編輯代碼
打開記事本，在<body>標簽中加入以下代碼，并保存為HTML格式文件。代碼如下。
（2)在瀏覽器中瀏覽效果
在瀏覽器中瀏覽效果如圖所示。
請注意，上例中的表格具有雙線條邊框。這是由于 table、th 以及 td 元素都有獨立的邊框。
如果需要把表格顯示為單線條邊框，請使用 border-collapse 屬性。
border-collapse 屬性設置表格的邊框是否被折疊成一個單一的邊框或隔開：
table{border-collapse: collapse;}
table,td,th{border: 1px solid red;}
（1）編輯代碼
打開記事本，在<body>標簽中加入以下代碼，并保存為HTML格式文件。代碼如下。
（2)在瀏覽器中瀏覽效果
在瀏覽器中瀏覽效果如圖所示。
迎觀看 Microsoft Word 中文版教程，小編帶大家學習 Microsoft Word 的使用技巧，了解如何在 Word 中插入表格。
快速插入表格，選擇「插入」-「表格」并將光標移動到網格上方，并選擇所需的列數和行數。
或者自定義表格，依次選擇「插入」-「表格」-「插入表格」。
選擇「列數」和「行數」，選擇「初始列寬」，然后單擊「確定」。
將文檔轉換為表格，如果文檔已存在由段落、逗號、制表符或特殊字符分隔的文本，可將該文本轉換為表格。首先選擇文本。
再選擇「插入」-「表格」，然后選擇「將文本轉換成表格」。
「列數」選擇「3」，「初始列寬」選擇「自動」，選擇「間距」，然后單擊「確定」。
若要繪制自己的表格，選擇「插入」-「表格」-「繪制表格」。
拖動繪制表格，根據需要繪制列和行。
創建表格后，在「表格設計」選項卡上選擇「網格表4 著色5」。
以上就是在 Microsoft Word 中插入表格的方法。
軟件下載地址：Microsoft word 2019 for Mac中文版
https://www.macz.com/mac/4533.html?id=NzY4OTYwJl8mMjcuMTg2LjEyNS4xOTY%3D
windows軟件安裝地址：Microsoft Word 2019
https://soft.macxf.com/soft/365.html?id=MjkzODQ%3D
在HTML/CSS 中，我們經常用HTML來布局和填充內容，用CSS來添加效果，修飾內容和布局，使整個頁面變得更好看。
即在<head></head>標簽內添加CSS樣式表的鏈接：
代碼展示如下：
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Make a Table Frame</title> <link rel="stylesheet" type="text/css" href="CSS/tableframe.css" > </head>
定義：
對帶有指定屬性的 HTML 元素設置樣式。
注意：
只有在規定了 !DOCTYPE 時，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。
功能：
“選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用于網頁中的哪些元素。
CSS中的選擇器有三個：
標簽選擇器、class類選擇器、id選擇器
1.標簽選擇器樣式表：a{}、 div{}、table{} ...
{對全局所有的選中類型標簽的樣式修改}
2.class類選擇器 樣式表： .class{}
{在HTML中每個標簽都可以同時綁定多個類名，每個標簽都可以設置class；同一個界面中class是不可重復}
3. id選擇器樣式表： #d1 {}
{每個標簽都可有id，每個頁面不可重復id，}
【一個HTML標簽只能綁定一個id屬性,一個HTML標簽可以綁定多個class屬性】
單純選擇<div>標簽的時候 是對全局的的（所有的）<div>進行修飾；
選擇器優先級：
id選擇器>class類選擇器>標簽選擇器
所以有id和class 選擇器的標簽將不會被覆蓋。交叉時是按照優先級覆蓋顯示的。
單純的HTML 表格表單內容
標題<caption>標簽：
表格的標題<caption>的內容填充（HTML）：
<caption> 表格標題</caption>
標題<caption>的樣式修飾(CSS)
table.formdata caption
{
text-shadow: #FF00ff;
text-align: center;
padding-bottom: 6px;
font-weight: bold;
}
其他<table>標簽相關內容可參考 HTML中表格的實例應用 一文。
form在網頁中主要負責數據采集功能。
一個表單有三個基本組成部分：
（1）表單標簽：包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。
（2）表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。
（3）表單按鈕：提交按鈕、復位按鈕和一般按鈕；用于將數據傳送到服務器上的CGI腳本或者取消輸入。還可以用表單按鈕來控制其他定義了處理腳本的處理工作。
定義：
<input> 標簽規定用戶可輸入數據的輸入字段。
根據不同的 type 屬性，輸入字段有多種形態。輸入字段可以是文本字段、復選框、密碼字段、單選按鈕、按鈕等等
語法代碼：
<input type="value" >
實例代碼：
<td><input type="text" name="Mainboard 6月" id="Mainboard 6月"></td>
關系展示：
實例代碼：
<p>
<input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn">
<input type="reset" value= "Reset All" class="btn">
</p>
實例展示：
<input>標簽的其他屬性值：
input標簽外是否添加form標簽需要按情形區分：
應用場景的區別：
1.所有向后臺提交數據（包括原生和ajax提交）的<input>都建議用<form>包裹.
2.如果只是用來做前臺交互效果則不推薦使用form包裹。
但提交數據時，其實也可以不用form包裹input標簽：
1.如果有form標簽，在點擊提交銨鈕時，瀏覽器自動收集參數，并打包一個http請求到服務器，完成表單提交。在這一過程中，瀏覽器會根據method的不同，將參數編碼后，放在urI中(get)，或者放在請求的data中(post)。然后發送到服務器。
2.如果沒有form，post方式的提交要使用ajax手工完成。get方式的提交需要自己拼接url。
<form>表單其他相關內容可參考 HTML中 表單 的應用實例 一文。
最后，附帶一下該可輸入的EXCEL表格的源碼。
HTML code：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Make a Table Frame</title> <link rel="stylesheet" type="text/css" href="CSS/tableframe.css" > </head> <body image=""> <form method="psot"> <table border="1px" class="formdata"> <caption>電腦配件管理表2018年5月-8月</caption> <tr> <th></th> <th scope="col">5月</th> <th scope="col">6月</th> <th scope="col">7月</th> <th scope="col">8月</th> </tr> <tr> <th scope="row">Hard Disk</th> <td><input type="text" name="Hard Disk 5月" id="Hard Disk 5月"></td> <td><input type="text" name="Hard Disk 6月" id="Hard Disk 6月"></td> <td><input type="text" name="Hard Disk 7月" id="Hard Disk 7月"></td> <td><input type="text" name="Hard Disk 8月" id="Hard Disk 8月"></td> </tr> <tr> <th scope="row">Mainboard</th> <td><input type="text" name="Mainboard 5月" id="Mainboard 5月"></td> <td><input type="text" name="Mainboard 6月" id="Mainboard 6月"></td> <td><input type="text" name="Mainboard 7月" id="Mainboard 7月"></td> <td><input type="text" name="Mainboard 8月" id="Mainboard 8月"></td> </tr> <tr> <th scope="row">Case</th> <td><input type="text" name="Case 5月" id="Case 5月"></td> <td><input type="text" name="Case 6月" id="Case 6月"></td> <td><input type="text" name="Case 7月" id="Case 7月"></td> <td><input type="text" name="Case 8月" id="Case 8月"></td> </tr> <tr> <th scope="row">Power</th> <td><input type="text" name="Power 5月" id="Power 5月"></td> <td><input type="text" name="Power 6月" id="Power 6月"></td> <td><input type="text" name="Power 7月" id="Power 7月"></td> <td><input type="text" name="Power 8月" id="Power 8月"></td> </tr> <tr> <th scope="row">CPU Fan</th> <td><input type="text" name="CPU Fan 5月" id="CPU Fan 5月"></td> <td><input type="text" name="CPU Fan 6月" id="CPU Fan 6月"></td> <td><input type="text" name="CPU Fan 7月" id="CPU Fan 7月"></td> <td><input type="text" name="CPU Fan 8月" id="CPU Fan 8月"></td> </tr> <tr> <th scope="row">Total</th> <td><input type="text" name="Total 5月" id="Total 5月"></td> <td><input type="text" name="Total 6月" id="Total 6月"></td> <td><input type="text" name="Total7月" id="Total 7月"></td> <td><input type="text" name="Total 8月" id="Total 8月"></td> </tr> </table> <p> <input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn"> <input type="reset" value= "Reset All" class="btn"> </p> </form> </body> </html>
CSS code :
body
{
font-family: Arial;
/*background-image: url(image/mainroad.jpg) no-repeat;*/
background-color: #00ff00;
background-size: 100%;
}
table.formdata
{
width: 300px;
height: 150px;
border: 2px solid #F00;
border-collapse: collapse;
font-family: Arial;
}
table.formdata caption
{
text-shadow: #FF00ff;
text-align: center;
padding-bottom: 6px;
font-weight: bold;
}
table.formdata th
{
border:1px solid #be34hc;
background-color: #E2E2E2;
color:#000000;
text-aglin:center;
font-weight: normal;
padding: 2px 8px 2px 6px;
margin: 0px;
}
table.formdata input
{
width: 100px;
padding: 1px 3px 1px 3px;
margin: 0px;
border:none;
font-family: Arial;
}
.btn
{
width:100px;
background-color: #FF00ee;
border:1px solid #00f2f2;
font-family: Arial;
}
本文部分內容來自網絡，如有侵權，請聯系修改。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
