.表格的制作
1、表格元素–<table>
表格中的行–<tr>
表格中的列–<td>
表格中的表頭–【居中/加粗】
table標記的邊框–border
table標記的寬度–width
table標記的高度–height
table標記的水平對齊方式–align
table標記的表格背景色–bgcolor
table標記的表格邊框色–bordercolor
table標記的表格中的內容與邊框之間的距離–cellpadding
table標記的表格中的邊框與邊框之間的距離–cellspacing【默認是1px】
tr標記的align屬性–設置當前行的水平對齊方式
tr標記的bgcolor屬性–設置當前行的背景色
tr標記的valign屬性–設置當前行的垂直對齊方式【top/middle/bottom】
td標記的align屬性–設置當前列的水平對齊方式
td標記的bgcolor屬性–設置當前列的背景色
td標記的valign屬性–設置當前列的垂直對齊方式【top/middle/bottom】
合并單元格
水平方向合并單元格–跨列—colspan
以下是計算器的控制面板代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>計算器的控制面板</title>
</head>
<body>
<table border="1" cellspacing="10px" cellpadding="20px"
align="center" bgcolor="aliceblue">
<tr><td colspan="5" height="40px" align="right"><font size="7"><b>0</b></font></td></tr>
<tr align="center">
<td>MC</td>
<td>MR</td>
<td>MS</td>
<td>M+</td>
<td>M-</td>
</tr>
<tr align="center">
<td><-</td>
<td>CE</td>
<td>C</td>
<td>+/-</td>
<td>√</td>
</tr>
<tr align="center">
<td>7</td>
<td>8</td>
<td>9</td>
<td>/</td>
<td>%</td>
</tr>
<tr align="center">
<td>4</td>
<td>5</td>
<td>6</td>
<td>*</td>
<td>1/x</td>
</tr>
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
<td>-</td>
<td rowspan="2" bgcolor="yellow">=
</td>
</tr>
<tr align="center">
<td colspan="2">0</td>
<td>.</td>
<td>+</td>
</tr>
</table>
</body>
</html>
看成品:
2. 列表元素
2.1 有序列表
ol—有序列表
li—列表中的每一項【條目】
默認的標志是有順序的數字
我們可以通過ol的type屬性來修改標志
1–有順序的數字
a–有順序的小寫字母
A–有順序的大寫字母
i–有順序的小寫羅馬數字
I–有順序的大寫羅馬數字
start屬性設置書順序的開始值
2.2 無序列表
ul—無序列表
li—列表中的每一項【條目】
默認的標志是實心點
我們可以通過ul的type屬性來修改標志
circle–圓形【?!?/p>
disc----實心點[默認]
square–正方形
none–沒有標志
2.3 自定義列表
dl—自定義列表
dt—自定義列表的頭
dd—子項目
以下是有序,無序,和自定義列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<ul type="none">
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
<ol type="A">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<dl>
<dt>自定義列表</dt>
<dt>自定義列表</dt>
<dt>自定義列表</dt>
</dl>
</body>
</html>
3. 表單<form>
主要負責采集信息的,可以將采集的信息提交。
form的屬性
action—指定表單數據的后端處理程序
method----指定表單數據的提交方式【get[默認]/post】
get提交數據會將被處理的數據跟隨在請求地址之后
被提交的數據255個字符
https://www.baidu.com/s?&wd=html
post提交數據會將被處理的數據封裝到http協議的頭
https://www.baidu.com/s
被提交的數據沒有限制
通常情況下提交文件只能用post
enctype屬性規定在將表單數據發送到服務器之前如何對其進行編碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" align="center" cellpadding="20px" cellspacing="0">
<tr>
<td>application/x-www-form-urlencoded</td>
<td>在發送前對所有字符進行編碼(默認)。</td>
</tr>
<tr>
<td>multipart/form-data</td>
<td>不對字符編碼。當使用有文件上傳控件的表單時,該值是必需的。
</td>
</tr>
<tr>
<td>text/plain</td>
<td>將空格轉換為 "+" 符號,但不編碼特殊字符。</td>
</tr>
</table>
</body>
</html>
表單元素
input 文本框/密碼框/單選按鈕/復選框…
seletc 下拉列表
textarea 文本域—富文本編輯器
著WPS開始使用JS宏,我也開始嘗試使用JavaScript(簡稱JS)在WPS表內進行自動化開發,實現一些小功能。今天的講的是如何自動清除表格內容。
做表格自動化開發,例如統計等等,每次運行腳本都需要清除之前運行得出的內容,否則新舊結構擠在一起就出現混亂了,分不清那個是最新的結果,這里我以我正在做的的一個折舊計算器為例進行說明。
JS宏和VBA宏本質上都是一樣的工具,只不過JS宏可以實現跨平臺,但相關功能還沒有VBA那么完善。以上的效果其實就是兩行代碼實現的。代碼如下:
function catl(){
var urow=Application.Worksheets.Item("計算器").Range("A65535").End(xlUp).Row
Application.Worksheets.Item("計算器").Range("A5:D"+urow).Delete()
}
第一句,獲得當前表格中A列用了多少行,由于我這個表格用的是前四列,用這個語句就可以制定用了多少行,第二句是清除前四列第四行以后的所有內容,也就是保留表頭,表格其他部分。
金山在做WPS的JS相關接口的時候已經盡量向原來VBA的接口靠攏了,例如var urow=Application.Worksheets.Item("計算器").Range("A65535").End(xlUp).Row中的Application.Worksheets.部分和.Range("A65535").End(xlUp).Row部分幾乎要就是VBA語句,只不過官方文檔還不是很完善,這個End(xlUp)在文檔中壓根就沒有提這個用法。是我自己試出來的。
我是且行且思,一個程序員/數據分析師/金山辦公KVP,終身學習者,不定時和大家分享知識和好
格是頁面中常見的一中標簽,通常是用來數據展示的,而不是用來布局。
<table>
<tr>
<td>單元格內的文字</td>
...
</tr>
...
</table>
設置表格的外觀樣式
<table border=1>
<tr>
<th>姓名</th>
<th>性別</th>
<th>電話</th>
</tr>
<tr>
<th>張三</th>
<td>女</td>
<td>18611110000</td>
</tr>
<tr>
<th>李四</th>
<td>男</td>
<td>18711110000</td>
</tr>
<tr>
<th>王五</th>
<td>男</td>
<td>18811110000</td>
</tr>
</table>
表格標題標簽,為表格添加標題,跟隨表格的位置而移動。設置標題,我們用的是caption標簽。
<table border="1">
<caption style="text-align:left">My savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
</table>
將標題定位在表格的左|右|上|下位置。
跨行合并 rowspan=“合并單元格的個數”
跨列合并 colspan=“合并單元格的個數”
合并順序:先上后下,先左后右
...
姓名 | 張三 | 性別 | 李四 | 照片 |
家庭住址 | 張三 | 性別 | 李四 | 照片 |
```
(1)先確定是跨行還是跨列合并
(2)根據先上后下,先左后右的原則,找到目標單元格,寫上合并方式(rowspan/colspan)和要合并的單元格數量
(3)刪除多余的單元格
表格的結構劃分,使用thead、tbody 、tfoot 三種標簽
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>0</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>0</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
</tbody>
</table>
(1) 元素內部必須包含一個或者多個 標簽。
(2) thead, tbody, 和 tfoot 元素默認不會影響表格的布局。用途主要是可以使用 CSS 來為這些元素定義樣式,從而改變表格的外觀。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。