스타일시트로 배경에 그래디언트 효과내기

<style type="text/css">
.color1 {filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=yellowgreen, EndColorStr=#FFFFFF)';font-size: 9pt; border:0 solid #000000;height:40px;}
.color2 {filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=skyblue, EndColorStr=#FFFFFF)';font-size: 9pt; border:0 solid #000000;height:40px;}
.color3 {filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=white, EndColorStr=orange)';font-size: 9pt; border:0 solid #000000;height:40px;}
.color4 {filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=white, EndColorStr=orange)';font-size: 10px; border:0 solid #000000;height:17px;}
</style>
<table width="300" height="300" class='color1'>
        <tr>
                <td>
                class='color1'
                </td>
        </tr>
</table>
<table width="300" height="300" class='color2'>
        <tr>
                <td>
                class='color2'
                </td>
        </tr>
</table>
<table width="300" height="300" class='color3'>
        <tr>
                <td>
                class='color3'
                </td>
        </tr>
</table>
<table width="300" height="300" class='color4'>
        <tr>
                <td>
                class='color4'
                </td>
        </tr>
</table>