好看的php表格样式,四个好看的CSS样式表格 | 学步园
1. 單像素邊框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;
}
| Text 1A | Text 1B | Text 1C |
| Text 2A | Text 2B | Text 2C |
2. 帶背景圖的CSS樣式表格
和上面差不多，不過每個格子里多了背景圖。
cell-blue.jpg
cell-grey.jpg
1. 下載上面兩張圖，命名為cell-blue.jpg和cell-grey.jpg
2. 拷貝下面的代碼到你想要的地方，記得修改圖片url
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-blue.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;
}
| Text 1A | Text 1B | Text 1C |
| Text 2A | Text 2B | Text 2C |
3. 自動換整行顏色的CSS樣式表格(需要用到JSP)
這個CSS樣式表格自動切換每一行的顏色，在我們需要頻繁更新一個大表格的時候很有用。
代碼：
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.οnlοad=function(){
altRows('alternatecolor');
}
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;
}
| 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 |
4. 鼠標懸停高亮的CSS樣式表格 (需要JSP)
純CSS顯示表格高亮在IE中顯示有問題，所以這邊使用了JSP來做高亮。
有一點要小心的是，不要定義格子的背景色。
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;
}
| 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樣式表格都在這了，希望對大家有幫助
總結
以上是生活随笔為你收集整理的好看的php表格样式,四个好看的CSS样式表格 | 学步园的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HDU-6103
- 下一篇： php网页表格样式,HTML的表格样式