[精讚] [會員登入]
15655

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

[CSS] placeholder 屬性的CSS怎麼設定? 常會用到的placeholder可以在沒填值時有提示的文字,想要改變格式該怎麼做?

關閉瀏覽器表單的自動完成autocomplete 什麼是自動完成?就是當我們在網頁的輸入文字欄位中打入文字時,瀏覽器會把曾輸入過歷史記錄中找出來讓我們選擇。

CSS 垂直中文字 要把文字垂直顯示的處理中文字正轉或逆轉90度的css設定

[HTLM5] 表單number和range輸入類型 介紹HTML5和數字有關的輸入類型number/range 等類型

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

我有話要說

>>

限制:留言最高字數1000字。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

[jQuery] select 元件的取值及給值 html中的元件select,在jquery中要如何使用?

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

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

[bc] linux 的計算機 bc 設定小數位數、計算π、次方根 linux 的計算機 bc 設定小數位數、計算π、次方根

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