[精讚] [會員登入]
17192

[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

你可能感興趣的文章

[HTML] 讓表格整欄上色的方法 過去我們要讓表格整欄上色,都得用很不方便的方法:該儲存格設定一個類別,指定他的樣式,現在有更好的方法

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

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

表格如何選取一欄(選取一直行) 表格中要指選擇一列很容易,直接叫用的標籤即可,但是要選取一欄呢?

網頁自動轉址的四種方法 設定網頁自動轉址的四種方法,三種html,一種php

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

隨機好文

沒有非誰做不可的事,也沒有不可被取代的人 沒有非誰做不可的事,也沒有不可被取代的人

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

設計的工作絕不接受比價 拿買陽春麵的價格想買牛肉麵,寧願倒掉也不賣

[Bootstrap] Datepicker使用/Bootstrap日期選日期選擇器的使用 Bootstrap日期選日期選擇器的使用

[AS3] 變數型態 基本類型宣告 as3 有下列幾種基本類型:string, int, number, object, boolean, n