DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 美化表格為細線表格,文字居中顯示
美化表格為細線表格,文字居中顯示
編輯:CSS詳解     
  • 這是個較早時候寫的小教程 ,主要是用CSS來美化表格的,對象是TABle,覺得過時了,所以一直不敢拿出來獻丑,今天整理時候覺得再不發就沒機會了,高手勿笑哦。

    CSS美化Table表格為細線表格,文字居中顯示,示例代碼:

    01 <style type="text/CSS"> 02 table{ 03 border:1px solid #000; 04 border-width:1px 0 0 1px; 05 margin:2px 0 2px 0; 06 text-align:center; 07 border-collapse:collapse; 08 } 09 td,th{ 10 border:1px solid #000; 11 border-width:0 1px 1px 0; 12 margin:2px 0 2px 0; 13 text-align:left; 14 } 15 th{ 16 text-align:center; 17 font-weight:600; 18 font-size:12px; 19 background-color:#F4F4F4; 20 } 21 </style> 22 <table width="236"> 23 <tr> 24 <td>1</td> 25 <td>2</td> 26 <td>3</td> 27 <td>4</td> 28 <td>5</td> 29 <td>6</td> 30 </tr> 31 </table>

    以上CSS對TABle表格的定義,可以縮寫成下面這幾行代碼,裡面一些居中定義可以自己添:

    vIEw source print? 1 table,td,th{ 2 border:1px #000 solid; 3 border-collapse:collapse; 4 }
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved