一個(gè)像素邊框的表格：Info Header 1Info Header 2Info 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.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 1Info Header 2Info 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 1Info Header 2Info 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>

鼠標(biāo)停留時(shí)高亮行的表格：

Info Header 1Info Header 2Info 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)

總結(jié)

以上是生活随笔為你收集整理的漂亮的HTML表格 - ebirdfighter的日志 - 网易博客的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。