[精讚] [會員登入]
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

你可能感興趣的文章

[HTLM5] 表單時間日期date/time輸入類型 介紹HTML5和時間有關的輸入類型date/datetime/datetime-local/month/time/week

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

[CSS] 多個 class 的表示法和寫法 網頁設計中常會用到CSS,他的一般格式是這樣的:

[HTML] 影像地圖 使用HTML的MAP標籤製作影像地圖

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

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

我有話要說

>>

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

訪客留言

[無留言]

隨機好文

為什麼要買長達二十年的保單? 為什麼要買長達二十年的保單?找一個可以說服我買二十年保單的理由。

如何在linux下執行java 原生的java應用程式可以使用簡單的方法在console下面寫出來,適合作簡單的應用

為什麼要重造輪子? 什麼輪子?造什麼輪子?我為什麼要重造輪子?

世紀帝國征服者新版本--被遺忘的帝國 世紀帝國征服者新版本--被遺忘的帝國 世紀二代的征服者是精典遊戲中的精典,aofe更好玩...

[AS3] 我做的唯一一個Flash As3遊戲UFO INVADSION [AS3] 我做的唯一一個Flash As3遊戲,是第一個也是最後一個,後來就沒再寫as3,不過as3還滿好玩的。