17277

[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

你可能感興趣的文章

如何讓瀏覽器每次都重新載入css、js、圖檔 不管怎麼刷新網頁,他總是跑出來舊的內容,這對開發的人來說很困擾...

[HTLM5] html元件上的 data-* 屬性 html5 中元件中多了一個 data-*的屬性,這個屬性超級好用

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

[HTML5] script 的新增屬性 defer, async script 的新增屬性 defer, async

textarea計算字數和行數 textarea可以大量的放入文字,但要如何計算字數和行數呢?

[CSS] 改變文字選擇的顏色(反選的顏色) 我們會用滑鼠選取一小段文字,可能是為了複製或是為了看他清楚點,這篇來改變他選擇時的背影色。

隨機好文

[MAC] 截取螢幕畫面的方法 截取螢幕畫面的方法,在MAC中叫作螢幕快照,英文是screenshot

[Freebsd] 使用 ADSL 撥接上網 Freebsd上要使用 ADSL 撥接上網,該如何設定?

安裝SPHINX支援中文 新版本的 sphinx 和舊版不同,網路上很多範例和教學是不能用的。此文是安裝和設定方法分享

PHP for sphinx 函式庫安裝 PECL/sphinx PHP>= 5.2.2 已經能原生支援 sphinx,可是預設的沒有裝,我們得自己裝才能用

精讚的版面變化 ▓此文僅作為舊文的記錄▓ 這篇文章為了紀念改版完成而撰寫。 原本的部落格是民國97年的作品,那時還是用舊有的技術來寫,很

精讚::