赤焰之心

1. 基本範例

<!--  CSS  開始 需放於 HEAD 內
.tablex tr:first-child td:first-child {...} 作用 : 讓表格外角變為圓角
.tablex tr:nth-child(odd) {...} 作用 : 讓表格奇偶列背景色不同

 -->

<style type="text/css">

.tablex tr:first-child td:first-child{
  border-top-left-radius: 10px;
}

.tablex tr:last-child td:first-child{
  border-bottom-left-radius: 10px;
}

.tablex tr:first-child td:last-child{
  border-top-right-radius: 10px;
}

.tablex tr:last-child td:last-child{
  border-bottom-right-radius: 10px;

}
.tablex tr:nth-child(odd){
    background-color:#E0E0E0;
}
.tablex tr:nth-child(even){
    background-color:#FCFCFC;
}

</style>

<!--  CSS  結束  -->

<!--  TABLE  開始  

class="tablex"  於CSS使用

border="0" 外框線 寬度

width="100%" 表格寬度

style="...." CSS 效果
(

line-height : 行高

font-size : 字體大小

border-color : 外框線顏色

)

-->

<table class="tablex" border="0" width="100%"  style="line-height:35px; font-size:25px;border-color:#1678E6;" >
<tr ><td width="50%" align="right" > <!-- width 欄位寬度  align 欄位內物件位置 -->
帳 號&nbsp;&nbsp;</td>
<td width="50%">
X123
</td></tr>
<tr><td align="right"> 
姓 名</td>

<td width="50%">
李四
</td></tr>

</table>

<!--  TABLE  結束  -->

2. 常用参數說明

table  :  定義表格
caption  :  定義表格標題
border :   設定外框尺寸
cellpadding  :  設定內容與內邊的距離
cellspacing  :  設定表格內框線與外框線間的距離
bgcolor  :  設定背景顏色
bordercolor  :  設定邊框顏色
bordercolorlight  :  設定暗面邊界顏色
background  :  設定整個表格之背景使用圖檔
bordercolordark  :  設定光面邊界顏色
tr  :  定義行
td  :  定義內容
width  :  定義表格寬度
high  :  定義表格高度
rowspan  :  設定跨列數
align  :  設定資料內容置於表格左(left)、右(right)、中(center)位置
valign  :  設定資料內容置於表格上(top)、中(middle)、下(bottom)位置
colspan  :  設定跨欄數
rules  :  內框線 ( none 沒有線條  / groups 位於行組和列組之間的線條  /  rows 位於行之間的線條 /  cols 位於列之間的線條 /  all 位於行和列之間的線條 )