漂亮的HTML表格 - ebirdfighter的日志 - 网易博客

首页 > 代码库 > 漂亮的HTML表格 - ebirdfighter的日志 - 网易博客

漂亮的HTML表格 - ebirdfighter的日志 - 网易博客

2024-07-31 22:15:35 218人阅读

一个像素边框的表格：

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.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表格 - ebirdfighter的日志 - 网易博客

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 漂亮的HTML表格 - ebirdfighter的日志 - 网易博客

漂亮的HTML表格 - ebirdfighter的日志 - 网易博客

看完仍有疑问？有类似问题直接问程序猿