一個像素邊框的表格：

<!-- CSS goes in the document HEAD or added to your external stylesheet --><style type="text/css">table.gridtable {    font-family: verdana,arial,sans-serif;    font-size:11px;    color:#333333;    border-width: 1px;    border-color: #666666;    border-collapse: collapse;}table.gridtable th {    border-width: 1px;    padding: 8px;    border-style: solid;    border-color: #666666;    background-color: #dedede;}table.gridtable td {    border-width: 1px;    padding: 8px;    border-style: solid;    border-color: #666666;    background-color: #ffffff;}</style><!-- Table goes in the document BODY --><table class="gridtable"><tr>    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th></tr><tr>    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td></tr><tr>    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td></tr></table>

有背景圖片的表格：



Info Header 1
Info Header 2
Info Header 3


Text 1A
Text 1B
Text 1C


Text 2A
Text 2B
Text 2C



代碼如下：

<!-- CSS goes in the document HEAD or added to your external stylesheet -->

<style type="text/css">

table.imagetable {

    font-family: verdana,arial,sans-serif;

    font-size:11px;

    color:#333333;

    border-width: 1px;

    border-color: #999999;

    border-collapse: collapse;

}

table.imagetable th {

    background:#b5cfd2 url('cell-grey.jpg');


    border-width: 1px;

    padding: 8px;

    border-style: solid;

    border-color: #999999;

}

table.imagetable td {

    background:#dcddc0 url('cell-grey.jpg');


    border-width: 1px;

    padding: 8px;

    border-style: solid;

    border-color: #999999;

}

</style>



<!-- Table goes in the document BODY -->

<table class="imagetable">

<tr>

    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>

</tr>

<tr>

    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>

</tr>

<tr>

    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>

</tr>

</table>
間隔彩色行表格：



Info Header 1
Info Header 2
Info Header 3


Text 1A
Text 1B
Text 1C


Text 2A
Text 2B
Text 2C


Text 3A
Text 3B
Text 3C


Text 4A
Text 4B
Text 4C


Text 5A
Text 5B
Text 5C



代碼如下：

<!-- Javascript goes in the document HEAD -->

<script type="text/javascript">

function altRows(id){

    if(document.getElementsByTagName){  

        

        var table = document.getElementById(id);  

        var rows = table.getElementsByTagName("tr"); 

         

        for(i = 0; i < rows.length; i++){          

            if(i % 2 == 0){

                rows[i].className = "evenrowcolor";

            }else{

                rows[i].className = "oddrowcolor";

            }      

        }

    }

}



window.onload=function(){

    altRows('alternatecolor');

}

</script>





<!-- CSS goes in the document HEAD or added to your external stylesheet -->

<style type="text/css">

table.altrowstable {

    font-family: verdana,arial,sans-serif;

    font-size:11px;

    color:#333333;

    border-width: 1px;

    border-color: #a9c6c9;

    border-collapse: collapse;

}

table.altrowstable th {

    border-width: 1px;

    padding: 8px;

    border-style: solid;

    border-color: #a9c6c9;

}

table.altrowstable td {

    border-width: 1px;

    padding: 8px;

    border-style: solid;

    border-color: #a9c6c9;

}

.oddrowcolor{

    background-color:#d4e3e5;

}

.evenrowcolor{

    background-color:#c3dde0;

}

</style>





<!-- Table goes in the document BODY -->

<table class="altrowstable" id="alternatecolor">

<tr>

    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>

</tr>

<tr>

    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>

</tr>

<tr>

    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>

</tr>

</tr>

<tr>

    <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>

</tr>

<tr>

    <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>

</tr>

<tr>

    <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>

</tr>

</table>
鼠標停留時高亮行的表格：



Info Header 1
Info Header 2
Info Header 3


Item 1A
Item 1B
Item 1C


Item 2A
Item 2B
Item 2C


Item 3A
Item 3B
Item 3C


Item 4A
Item 4B
Item 4C


Item 5A
Item 5B
Item 5C



代碼如下：

<!-- CSS goes in the document HEAD or added to your external stylesheet -->

<style type="text/css">

table.hovertable {

    font-family: verdana,arial,sans-serif;

    font-size:11px;

    color:#333333;

    border-width: 1px;

    border-color: #999999;

    border-collapse: collapse;

}

table.hovertable th {

    background-color:#c3dde0;

    border-width: 1px;

    padding: 8px;

    border-style: solid;

    border-color: #a9c6c9;

}

table.hovertable tr {

    background-color:#d4e3e5;

}

table.hovertable td {

    border-width: 1px;

    padding: 8px;

    border-style: solid;

    border-color: #a9c6c9;

}

</style>



<!-- Table goes in the document BODY -->

<table class="hovertable">

<tr>

    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>

</tr>

<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">

    <td>Item 1A</td><td>Item 1B</td><td>Item 1C</td>

</tr>

<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">

    <td>Item 2A</td><td>Item 2B</td><td>Item 2C</td>

</tr>

<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">

    <td>Item 3A</td><td>Item 3B</td><td>Item 3C</td>

</tr>

<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">

    <td>Item 4A</td><td>Item 4B</td><td>Item 4C</td>

</tr>

<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">

    <td>Item 5A</td><td>Item 5B</td><td>Item 5C</td>

</tr>

</table>
來自為知筆記(Wiz)

                            
總結
                            

                                以上是生活随笔為你收集整理的漂亮的HTML表格的全部內容，希望文章能夠幫你解決所遇到的問題。
                            
                            

                                如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。