整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML表格制作

          .表格的制作

          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

          • 垂直方向合并單元格–跨行—rowspan
          • 刪除多余的單元格*

          以下是計算器的控制面板代碼

          <!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>&lt;-</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 標簽:定義一個表
            • tr 標簽:定義表格中的一行,必須嵌套在table標簽中,有幾對,表示表格有幾行
            • td 標簽:定義表格中的單元格,必須嵌套在標簽中,一對 中包含幾對,就表示該行中有多少列(或多少個單元格)

          • 注意
            • 中只能嵌套
            • 標簽,就像一個容器,可以容納所有的元素

          表格屬性

          設置表格的外觀樣式

          表頭標簽

          • 說明
          • 表頭一般位于表格的第一行或第一列,其文本加粗居中,如下圖所示,即為設置了表頭的表格。設置表頭非常簡單,只需用表頭標簽<th></th>替代相應的單元格標簽<td></td>即可
          • 示例

          • 代碼

          <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 三種標簽

          • 說明
          • 標簽用于組合 HTML 表格的表頭內容 元素應該與和元素結合起來使用,用來規定表格的各個部分(表頭、主體、頁腳)
          • 語法

          <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 來為這些元素定義樣式,從而改變表格的外觀。


          主站蜘蛛池模板: 免费国产在线精品一区| 亚洲国产精品一区| 亚洲欧洲一区二区| 无码日韩AV一区二区三区| 香蕉免费一区二区三区| 国产主播一区二区三区| 精品一区二区三区四区在线播放 | 亚洲免费视频一区二区三区 | 国产日韩一区二区三区在线播放| 免费高清在线影片一区| 国产精品一级香蕉一区| 91久久精品国产免费一区| 日本欧洲视频一区| 久久婷婷色一区二区三区| 久久99国产精品一区二区| 亚洲综合色一区二区三区小说| 免费一区二区视频| 国产精品一区二区电影| 午夜一区二区在线观看| 日韩aⅴ人妻无码一区二区| 麻豆AV天堂一区二区香蕉| 亚洲日韩中文字幕无码一区| 蜜臀Av午夜一区二区三区| 日韩精品视频一区二区三区| 亚洲视频一区调教| 无码人妻一区二区三区一| 国精无码欧精品亚洲一区| 一区二区免费在线观看| 国产一区在线视频观看| 日韩AV片无码一区二区不卡| 亚洲av无码成人影院一区| 国产av一区最新精品| 波多野结衣中文字幕一区二区三区| 国产综合视频在线观看一区| 在线观看日韩一区| 91一区二区三区| 国产美女一区二区三区| 国产一区二区精品在线观看| 中文字幕久久久久一区| 日本一区二区在线播放| 无码一区二区三区爆白浆|