{"id":231,"date":"2023-02-23T06:39:37","date_gmt":"2023-02-22T22:39:37","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=231"},"modified":"2023-04-30T15:22:00","modified_gmt":"2023-04-30T07:22:00","slug":"four-good-looking-css-style-tables","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/02\/23\/four-good-looking-css-style-tables\/","title":{"rendered":"\u56db\u4e2a\u597d\u770b\u7684CSS\u6837\u5f0f\u8868\u683c"},"content":{"rendered":"

\u53c2\u8003\uff1ahttps:\/\/www.textfixer.com\/tutorials\/css-tables.php<\/a><\/p>\n

\u5355\u50cf\u7d20\u8fb9\u6846CSS\u8868\u683c<\/h2>\n

\u8fd9\u662f\u4e00\u4e2a\u5f88\u5e38\u7528\u7684\u8868\u683c\u6837\u5f0f\u3002<\/p>\n

<\/p>\n

\"\u5355\u50cf\u7d20\u8fb9\u6846CSS\u8868\u683c\"<\/p>\n

<!-- CSS goes in the document HEAD or added to your external stylesheet -->\n<style type="text\/css">\ntable.gridtable {\n    font-family: verdana,arial,sans-serif;\n    font-size:11px;\n    color:#333333;\n    border-width: 1px;\n    border-color: #666666;\n    border-collapse: collapse;\n}\ntable.gridtable th {\n    border-width: 1px;\n    padding: 8px;\n    border-style: solid;\n    border-color: #666666;\n    background-color: #dedede;\n}\ntable.gridtable td {\n    border-width: 1px;\n    padding: 8px;\n    border-style: solid;\n    border-color: #666666;\n    background-color: #ffffff;\n}\n<\/style>\n\n<!-- Table goes in the document BODY -->\n<table class="gridtable">\n<tr>\n    <th>Info Header 1<\/th><th>Info Header 2<\/th><th>Info Header 3<\/th>\n<\/tr>\n<tr>\n    <td>Text 1A<\/td><td>Text 1B<\/td><td>Text 1C<\/td>\n<\/tr>\n<tr>\n    <td>Text 2A<\/td><td>Text 2B<\/td><td>Text 2C<\/td>\n<\/tr>\n<\/table><\/code><\/pre>\n
\u5e26\u80cc\u666f\u56fe\u7684CSS\u6837\u5f0f\u8868\u683c<\/h2>\n
\u548c\u4e0a\u9762\u5dee\u4e0d\u591a\uff0c\u4e0d\u8fc7\u6bcf\u4e2a\u683c\u5b50\u91cc\u591a\u4e86\u80cc\u666f\u56fe\u3002<\/p>\n
\"\u5e26\u80cc\u666f\u56fe\u7684CSS\u6837\u5f0f\u8868\u683c\"<\/p>\n
\"cell-blue\"
\n\"cell-grey\"<\/p>\n
    \n
  1. \u4e0b\u8f7d\u4e0a\u9762\u4e24\u5f20\u56fe\uff0c\u547d\u540d\u4e3acell-blue.jpg<\/code>\u548ccell-grey.jpg<\/code><\/li>\n
  2. \u62f7\u8d1d\u4e0b\u9762\u7684\u4ee3\u7801\u5230\u9759\u6001\u8d44\u6e90\u76ee\u5f55\uff0c\u8bb0\u5f97\u4fee\u6539\u56fe\u7247url<\/li>\n<\/ol>\n
    <!-- CSS goes in the document HEAD or added to your external stylesheet -->\n<style type="text\/css">\ntable.imagetable {\n    font-family: verdana,arial,sans-serif;\n    font-size:11px;\n    color:#333333;\n    border-width: 1px;\n    border-color: #999999;\n    border-collapse: collapse;\n}\ntable.imagetable th {\n    background:#b5cfd2 url('cell-blue.jpg');\n    border-width: 1px;\n    padding: 8px;\n    border-style: solid;\n    border-color: #999999;\n}\ntable.imagetable td {\n    background:#dcddc0 url('cell-grey.jpg');\n    border-width: 1px;\n    padding: 8px;\n    border-style: solid;\n    border-color: #999999;\n}\n<\/style>\n\n<!-- Table goes in the document BODY -->\n<table class="imagetable">\n<tr>\n    <th>Info Header 1<\/th><th>Info Header 2<\/th><th>Info Header 3<\/th>\n<\/tr>\n<tr>\n    <td>Text 1A<\/td><td>Text 1B<\/td><td>Text 1C<\/td>\n<\/tr>\n<tr>\n    <td>Text 2A<\/td><td>Text 2B<\/td><td>Text 2C<\/td>\n<\/tr>\n<\/table><\/code><\/pre>\n
    \u81ea\u52a8\u6362\u6574\u884c\u989c\u8272\u7684CSS\u6837\u5f0f\u8868\u683c\uff08\u9700\u8981JS\uff09<\/h2>\n
    \u8fd9\u4e2aCSS\u6837\u5f0f\u8868\u683c\u81ea\u52a8\u5207\u6362\u6bcf\u4e00\u884c\u7684\u989c\u8272\uff0c\u5728\u6211\u4eec\u9700\u8981\u9891\u7e41\u66f4\u65b0\u4e00\u4e2a\u5927\u8868\u683c\u7684\u65f6\u5019\u5f88\u6709\u7528\u3002<\/p>\n
    \"\u81ea\u52a8\u6362\u6574\u884c\u989c\u8272\u7684CSS\u6837\u5f0f\u8868\u683c\uff08\u9700\u8981JS\uff09\"<\/p>\n
    <!-- Javascript goes in the document HEAD -->\n<script type="text\/javascript">\nfunction altRows(id){\n    if(document.getElementsByTagName){  \n\n        var table = document.getElementById(id);  \n        var rows = table.getElementsByTagName("tr"); \n\n        for(i = 0; i < rows.length; i++){          \n            if(i % 2 == 0){\n                rows[i].className = "evenrowcolor";\n            }else{\n                rows[i].className = "oddrowcolor";\n            }      \n        }\n    }\n}\n\nwindow.\u03bfnl\u03bfad=function(){\n    altRows('alternatecolor');\n}\n<\/script>\n\n<!-- CSS goes in the document HEAD or added to your external stylesheet -->\n<style type="text\/css">\ntable.altrowstable {\n    font-family: verdana,arial,sans-serif;\n    font-size:11px;\n    color:#333333;\n    border-width: 1px;\n    border-color: #a9c6c9;\n    border-collapse: collapse;\n}\ntable.altrowstable th {\n    border-width: 1px;\n    padding: 8px;\n    border-style: solid;\n    border-color: #a9c6c9;\n}\ntable.altrowstable td {\n    border-width: 1px;\n    padding: 8px;\n    border-style: solid;\n    border-color: #a9c6c9;\n}\n.oddrowcolor{\n    background-color:#d4e3e5;\n}\n.evenrowcolor{\n    background-color:#c3dde0;\n}\n<\/style>\n\n<!-- Table goes in the document BODY -->\n<table class="altrowstable" id="alternatecolor">\n<tr>\n    <th>Info Header 1<\/th><th>Info Header 2<\/th><th>Info Header 3<\/th>\n<\/tr>\n<tr>\n    <td>Text 1A<\/td><td>Text 1B<\/td><td>Text 1C<\/td>\n<\/tr>\n<tr>\n    <td>Text 2A<\/td><td>Text 2B<\/td><td>Text 2C<\/td>\n<\/tr>\n<\/tr>\n<tr>\n    <td>Text 3A<\/td><td>Text 3B<\/td><td>Text 3C<\/td>\n<\/tr>\n<tr>\n    <td>Text 4A<\/td><td>Text 4B<\/td><td>Text 4C<\/td>\n<\/tr>\n<tr>\n    <td>Text 5A<\/td><td>Text 5B<\/td><td>Text 5C<\/td>\n<\/tr>\n<\/table>\n\n<!--  The table code can be found here: http:\/\/www.textfixer\/resources\/css-tables.php#css-table03 --><\/code><\/pre>\n
    \u9f20\u6807\u60ac\u505c\u9ad8\u4eae\u7684CSS\u6837\u5f0f\u8868\u683c\uff08\u9700\u8981JS\uff09<\/h2>\n
    \u7eafCSS\u663e\u793a\u8868\u683c\u9ad8\u4eae\u5728IE\u4e2d\u663e\u793a\u6709\u95ee\u9898\uff0c\u6240\u4ee5\u8fd9\u8fb9\u4f7f\u7528\u4e86JS\u6765\u505a\u9ad8\u4eae\uff0c\u6ce8\u610f\u4e0d\u8981\u5b9a\u4e49\u683c\u5b50\u7684\u80cc\u666f\u8272\u3002<\/p>\n
    \"\u9f20\u6807\u60ac\u505c\u9ad8\u4eae\u7684CSS\u6837\u5f0f\u8868\u683c\uff08\u9700\u8981JS\uff09\"<\/p>\n
    <!-- CSS goes in the document HEAD or added to your external stylesheet -->\n<style type="text\/css">\ntable.hovertable {\n    font-family: verdana,arial,sans-serif;\n    font-size:11px;\n    color:#333333;\n    border-width: 1px;\n    border-color: #999999;\n    border-collapse: collapse;\n}\ntable.hovertable th {\n    background-color:#c3dde0;\n    border-width: 1px;\n    padding: 8px;\n    border-style: solid;\n    border-color: #a9c6c9;\n}\ntable.hovertable tr {\n    background-color:#d4e3e5;\n}\ntable.hovertable td {\n    border-width: 1px;\n    padding: 8px;\n    border-style: solid;\n    border-color: #a9c6c9;\n}\n<\/style>\n\n<!-- Table goes in the document BODY -->\n<table class="hovertable">\n<tr>\n    <th>Info Header 1<\/th><th>Info Header 2<\/th><th>Info Header 3<\/th>\n<\/tr>\n<tr \u03bfnm\u03bfuse\u03bfver="this.style.backgroundColor='#ffff66';" \u03bfnm\u03bfuse\u03bfut="this.style.backgroundColor='#d4e3e5';">\n    <td>Item 1A<\/td><td>Item 1B<\/td><td>Item 1C<\/td>\n<\/tr>\n<tr \u03bfnm\u03bfuse\u03bfver="this.style.backgroundColor='#ffff66';" \u03bfnm\u03bfuse\u03bfut="this.style.backgroundColor='#d4e3e5';">\n    <td>Item 2A<\/td><td>Item 2B<\/td><td>Item 2C<\/td>\n<\/tr>\n<tr \u03bfnm\u03bfuse\u03bfver="this.style.backgroundColor='#ffff66';" \u03bfnm\u03bfuse\u03bfut="this.style.backgroundColor='#d4e3e5';">\n    <td>Item 3A<\/td><td>Item 3B<\/td><td>Item 3C<\/td>\n<\/tr>\n<tr \u03bfnm\u03bfuse\u03bfver="this.style.backgroundColor='#ffff66';" \u03bfnm\u03bfuse\u03bfut="this.style.backgroundColor='#d4e3e5';">\n    <td>Item 4A<\/td><td>Item 4B<\/td><td>Item 4C<\/td>\n<\/tr>\n<tr \u03bfnm\u03bfuse\u03bfver="this.style.backgroundColor='#ffff66';" \u03bfnm\u03bfuse\u03bfut="this.style.backgroundColor='#d4e3e5';">\n    <td>Item 5A<\/td><td>Item 5B<\/td><td>Item 5C<\/td>\n<\/tr>\n<\/table><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    \u53c2\u8003\uff1ahttps:\/\/www.textfixer.com\/tutorials\/css-tables.php \u5355 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[85],"class_list":["post-231","post","type-post","status-publish","format-standard","hentry","category-frontend-basic","tag-css"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=231"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/231\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}