彩色表格製作

彩色表格

讓表格四邊都呈現不一樣的顏色

及表格內容背景色每一格都不一樣

表格屬性:

• <table></table>----宣告表格的開始與結束
• <tr></tr>----宣告表格中每一列的開始與結束，與td合用可決定有多少列
• <td></td>----宣告表格中每一儲存格的開始與結束
• border----框線粗細
• width----表格的寬度(可指定圖素或百分比)
• bgcolor----背景顏色
• bordercolor----表格邊線顏色
• bordercolordark----表格邊線暗框邊顏色
• bordercolordark----表格邊線亮框邊顏色
• cellspacing----表格與表格的間距
• cellpadding----邊框和文字的間距
• align----水平的對齊方式(可運用的參數有：=left、center、right)
• valign----垂直的對齊方式(可運用的參數有：=top、middle、bottom、baseline)
• colspan----格子往右合併的格數 ；rowspan 格子往下合併的格數

上方表格範例程式碼如下(讓四邊顏色不同需加上CSS式樣設定如紅色字地方)

<table align="center" border="10" width="186" height="100" style="border-top-color:#FF00FF;

border-bottom-color:#008000;

border-left-color:#FFFF00;

border-right-color:#00FFFF">
<tr bordercolor="#FF00FF"bgcolor="#ECFFEC">
<td bordercolor="#0000FF"bgcolor="#FFFFE8" >　</td>
<td>　</td>
</tr>
<tr bordercolor="#00FF00" >
<td bordercolor="#FF9900"bgcolor="#FFEEFF">　</td>
<td bordercolor="#00CC00"bgcolor="#D2FFF7">　</td>
</tr>
<tr bordercolor="#00FF00" >
<td bordercolor="#00FFFF"bgcolor="#FFD2C8">　</td>
<td bordercolor="#800040"bgcolor="#D9D9FF">　</td>
</tr>
</table>
　

讓表格外框每一邊顏色不同框線須使用CSS式樣設定語法在

<table　這裡面>加上下方語法

style="border-top-color:#色碼;

border-bottom-color:#色碼;

border-left-color:#色碼;

border-right-color:#色碼"
　

在<tr>中加上 bgcolor="#色碼" 是讓橫的列中每一個表格內背景色一樣

如要讓每一格不一樣背景顏色在<td>加上 bordercolor="#色碼"