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