用語句來實現圓角表格可以省去製作圓角圖片之苦! _經驗交流
PHP中文网
發布: 2016-05-16 12:08:05
原創
1296 人瀏覽過

語句來實現圓角表格可以省去製作圓角圖片之苦! _經驗交流

語句:

你要写的文字、图片、或表格

登入後複製

雖然程式碼看起來很長,其實原理很簡單,昨天我把原程式碼精簡了一下,將嵌套的表格從四個減少到兩個,應該更好理解了吧。需要指出一點,「cellpadding=3」是避免表格內文字過於貼近表格邊框而刻意添加的!

製作這個圓角表格的主要目的有兩個:一是可以用來作為帶有背景色的日誌模板,實例參考教程(一);二是可以製作自己日誌標題檔或簽名檔,用處還是很大的。用

語句製作圓角表格,和網路上其他常見方法相比,不僅省去了製作、使用圓角圖片的麻煩,而且此圓角表格具有「自適應性」——因為語句中使用的是相對寬度(width=100%),所以此表格會隨著發布日誌列的寬度變化而自我調節,這比一般圖片做出來的圓角表格更具靈活性!

(一)表格基本語句格式

...
—— 表格指令 ... —— 表格行 ... —— 表格栏 ... —— 表格主体部分 ... —— 表格标题 ... —— 表格栏标题(粗体字)
登入後複製

這五個表格基本語句是構成一個表格的骨架,其中

語句:

收支表
公司 收入 支出
a ¥100000 ¥60000
登入後複製

效果:


收支表

用<TABLE>語句來實現圓角表格可以省去製作圓角圖片之苦! _經驗交流p>

(二)表格相關屬性

1、

語句常用屬性

示範語句:

登入後複製

具體說明:

79399894567

2、

語句常用屬性

示範語句:

登入後複製

具體說明:

align="right",表格行内文字的摆放位置(水平),可选值为: left, right, center。 valign="middle",表格行内图文的摆放位置(垂直),可选值为: top, middle, bottom。 background="background.gif",表格行内背景图案,不要与 bgcolor 同用。 bgcolor="#0000ff",表格行内背景色,不要与 background 同用。 bordercolor="#ff00ff",表格行内边框颜色。
登入後複製

3、phpcn p>

示範語句:

登入後複製

具體說明:

width="50%",单元格宽度,接受绝对值(如 300)及相对值(如 50%)。 height="300",单元格高度,接受绝对值(如 300)及相对值(如 50%)。 colspan="2",单元格向右合并栏数,只需写在合并起始单元格中。 rowspan="3",单元格向下合并栏数,只需写在合并起始单元格中。 align="left",单元格内文字的摆放位置(水平),可选值为: left, right, center。 valign="bottom",单元格内图文的摆放位置(垂直),可选值为: top, middle, bottom。 background="background.gif",单元格内背景图案,不要与 bgcolor 同用。 bgcolor="#0000ff",单元格内背景色,不要与 background 同用。 bordercolor="#ff00ff",单元格内边框颜色。 其他单元格属性,因为有些不是很常用,或者有些对浏览器类型有要求,并未列出
登入後複製

(三)表格簡單的例子

1、去掉phpcnltphptablephpcn的 border 參數即可得到無邊框表格。

語句:

收支表
公司 收入 支出
a ¥100000 ¥60000
登入後複製

效果:


收支表

用<TABLE>語句來實現圓角表格可以省去製作圓角圖片之苦! _經驗交流p>

2、透過 border、bordercolor,改變表格邊框的大小與顏色。

語句:

公司 收入 支出
a ¥100000 ¥60000
登入後複製

效果:

用<TABLE>語句來實現圓角表格可以省去製作圓角圖片之苦! _經驗交流

3、透過 cellspacing 也能調節單元格間距。

語句:

公司 收入 支出
a ¥100000 ¥60000
登入後複製

效果:

用<TABLE>語句來實現圓角表格可以省去製作圓角圖片之苦! _經驗交流

4、colspan 與 rowspan 的使用。

語句:

公司 收支 盈利 !
A ¥100000 ¥60000
登入後複製

效果:

用<TABLE>語句來實現圓角表格可以省去製作圓角圖片之苦! _經驗交流

這裡對表格的基本介紹,主要是為了下一篇教學做個鋪墊。在下一篇教學中,將給出一些表格在 msn space 裡的具體應用實例,例如:文繞圖結構、多欄文字、為文字添加背景等。

以上就是用

語句來實現圓角表格可以省去製作圓角圖片之苦! _經驗交流的內容,更多相關內容請關注php中文網(m.sbmmt.com)!


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!