qileilove

          blog已經(jīng)轉(zhuǎn)移至github,大家請訪問 http://qaseven.github.io/

          CSS 表格

          CSS 表格屬性可以幫助您極大地改善表格的外觀。

          表格邊框

          如需在 CSS 中設(shè)置表格邊框,請使用 border 屬性。

          下面的例子為 table、th 以及 td 設(shè)置了藍(lán)色邊框:

          table, th, td   {   border: 1px solid blue;   } 

          親自試一試

          請注意,上例中的表格具有雙線條邊框。這是由于 table、th 以及 td 元素都有獨立的邊框。

          如果需要把表格顯示為單線條邊框,請使用 border-collapse 屬性。

          折疊邊框

          border-collapse 屬性設(shè)置是否將表格邊框折疊為單一邊框:

          table   {   border-collapse:collapse;   }  table,th, td   {   border: 1px solid black;   } 

          親自試一試

          表格寬度和高度

          通過 width 和 height 屬性定義表格的寬度和高度。

          下面的例子將表格寬度設(shè)置為 100%,同時將 th 元素的高度設(shè)置為 50px:

          table   {   width:100%;   }  th   {   height:50px;   } 

          親自試一試

          表格文本對齊

          text-align 和 vertical-align 屬性設(shè)置表格中文本的對齊方式。

          text-align 屬性設(shè)置水平對齊方式,比如左對齊、右對齊或者居中:

          td   {   text-align:right;   } 

          親自試一試

          vertical-align 屬性設(shè)置垂直對齊方式,比如頂部對齊、底部對齊或居中對齊:

          td   {   height:50px;   vertical-align:bottom;   } 

          親自試一試

          表格內(nèi)邊距

          如需控制表格中內(nèi)容與邊框的距離,請為 td 和 th 元素設(shè)置 padding 屬性:

          td   {   padding:15px;   } 

          親自試一試

          表格顏色

          下面的例子設(shè)置邊框的顏色,以及 th 元素的文本和背景顏色:

          table, td, th   {   border:1px solid green;   }  th   {   background-color:green;   color:white;   } 

          親自試一試

          CSS Table 屬性

          屬性描述
          border-collapse設(shè)置是否把表格邊框合并為單一的邊框。
          border-spacing設(shè)置分隔單元格邊框的距離。
          caption-side設(shè)置表格標(biāo)題的位置。
          empty-cells設(shè)置是否顯示表格中的空單元格。
          table-layout設(shè)置顯示單元、行和列的算法。

          親自試一試 - 更多實例

          制作一個漂亮的表格
          本例演示如何創(chuàng)造一個漂亮的表格。
          顯示表格中的空單元
          本例演示是否顯示表格中的空單元。
          設(shè)置表格邊框之間的空白
          本例演示如何設(shè)置單元格邊框之間的距離。
          設(shè)置表格標(biāo)題的位置
          本例演示如何定位表格的標(biāo)題。

          posted on 2014-04-17 14:35 順其自然EVO 閱讀(195) 評論(0)  編輯  收藏 所屬分類: CSS 教程


          只有注冊用戶登錄后才能發(fā)表評論。


          網(wǎng)站導(dǎo)航:
           
          <2025年6月>
          25262728293031
          1234567
          891011121314
          15161718192021
          22232425262728
          293012345

          導(dǎo)航

          統(tǒng)計

          常用鏈接

          留言簿(55)

          隨筆分類

          隨筆檔案

          文章分類

          文章檔案

          搜索

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 武夷山市| 梁平县| 寿宁县| 青河县| 民丰县| 万山特区| 辰溪县| 长岛县| 临武县| 澎湖县| 荣成市| 英德市| 宁乡县| 西盟| 吉木乃县| 台中市| 望都县| 子洲县| 崇州市| 罗山县| 开化县| 赞皇县| 施甸县| 鲁山县| 富锦市| 丹寨县| 寿宁县| 轮台县| 汶上县| 左贡县| 敖汉旗| 来宾市| 西青区| 余干县| 紫金县| 克拉玛依市| 锦州市| 台州市| 邓州市| 东源县| 东乡县|