[精讚] [會員登入]
16771

[CSS] HTML 畫出粗外框表格的方法 (粗框表格)

在畫表格的時候,習慣上表格的外框要比內部的線條來得粗,不但比較美觀,而且看起來比較完整

分享此文連結 //n.sfs.tw/10701

分享連結 [CSS] HTML 畫出粗外框表格的方法 (粗框表格)@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2019-10-25 12:26:12 最後編修
2017-01-27 12:53:00 By 張○○
 

HTML 畫出粗外框表格的方法 (粗框表格) ,需要用到 <table> 的標籤及css。

<table> 中和表格寬度有關的屬性有 border="數字" ,這屬性設定表格內外全部框線的寬度,預設是0,也就是無框表格。

<table border="2">...</table>

如果我們只要有外框線粗,內框線細要怎麼做,這時就需要css的幫助。

以下的範例:

文章編號 名稱 作者 日期 備註
25556 文章表格教學示範 瘦河馬 2010-02-06 這是一篇好文章

而原始碼如下:

<table border="1" cellpadding="3" cellspacing="1" style="border: 3px solid #FFAE7F; 
border-collapse: collapse; width:400px;">
	<tbody>
		<tr>
			<td width="50">文章編號</td>
			<td>名稱</td>
			<td width="60">作者</td>
			<td width="60">日期</td>
			<td width="75">備註</td>
		</tr>
		<tr>
			<td>25556</td>
			<td>文章表格教學示範</td>
			<td>瘦河馬</td>
			<td>2010-02-06</td>
			<td>這是一篇好文章</td>
		</tr>
	</tbody>
</table>

第1行指定外框的粗為3px、實心、顏色為#FFAE7F。這並不會影響到內框,如果要連內框也一起改,就得修改td的"外框",使用css是最快的方法,例如我將內框畫成紅虛線:

table td {
  border:1px dashed red;
}

顯示結果

文章編號 名稱 作者 日期 備註
25556 文章表格教學示範 瘦河馬 2010-02-06 這是一篇好文章

原文編修 2010-02-06 17:57:50

 

END

你可能感興趣的文章

網頁的標頭(head)搜尋引擎和FB最佳化 網頁的標頭(head)搜尋引擎和facebook最佳化

[CSS] HTML 畫出粗外框表格的方法 (粗框表格) 在畫表格的時候,習慣上表格的外框要比內部的線條來得粗,不但比較美觀,而且看起來比較完整

UTF-8 BOM (Byte Order Mark) 的問題 在 Michael Kaplan 那看到 Every character has a story #4: U+feff

[CSS] 將多張圖片合併,製作css spirte 網站中有很多的小圖,如果能把他們合併後再用CSS取用,就能大幅的提升網路效能。

讓radio box 或checkbox 好按 在行動裝置下,radio box及checkbox變得很難按得到

[CSS] 背景 background css 中最常用的特性(property)之一就是 background ,這個有什麼好難的?事實上 backgroun

隨機好文

SELinux 常用指令和檔案 在Redhat系列中,Centos5以後加入了selinux,他並沒有這麼可怕,不必每次看到Selinux ,就想把他

[Freebsd] 定時測試 ADSL 是否斷線並重連 中華電信 ADSL 雖有固定 ip,可是他卻會不定時「斷線」, 使用以下的 方法可以定時測試是否斷線,以及重新撥接。

[JAVA] JWS, JWT, JWE, JOSE是什麼? [JAVA] JWS, JWT, JWE, JOSE是什麼?非常的複雜,儘量來搞清楚..

UTF-8的網頁但IE8一片空白 UTF8編碼的網頁在Firefox 正常顯示、但IE8 就是空白,IE8編碼設定是「自動偵測」可是自動偵測到的是 big5...

維修冰箱 維修冰箱