html 简单的table样式
效果预览：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html 简单的table样式</title>
<style type="text/css">
/* gridtable */
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;
}
/* /gridtable */ /* imagetable */
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;
}
/* /imagetable */
/* altrowstable */ 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;
}
/* /altrowstable */ /* hovertable */
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;
}
/* /hovertable */ </style>
</head>
<body> <h2>table样式1:单像素边框CSS表格</h2>
<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> <h2>table样式2:带背景图的CSS样式表格</h2>
<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> <h2>table样式3:自动换整行颜色的CSS样式表格（需要用到JS）</h2>
<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> <h2>table样式4:鼠标悬停高亮的CSS样式表格 (需要JS)</h2>
<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> <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>
</body>
</html>
素材图片：
cell-blue.jpg
cell-greyjpg
html 简单的table样式的更多相关文章
- 一个简单的TabItem样式。
分享一个以前项目中用到的简单的TabItem样式. 效果图如下: <SolidColorBrush x:Key="TabItemDisabledBackground" Col ...
- 小物件之输出简单的table
如果需要将一个数组输出一个简单的table可以采用以下代码(该数组非空) <?php $thead=array("name"=>"名称"," ...
- table完美css样式，table的基本样式，table样式
table完美css样式,table的基本样式,table样式 >>>>>>>>>>>>>>>>> ...
- 经常使用的两个清爽的table样式
两个我经常使用的table样式: <html> <head> <title></title> <style type="text/css ...
- js简单固定table表头及css问题分析。
<head> <meta name="viewport" content="width=device-width" /> <tit ...
- 通用table样式
<html> <head> <title>通用table样式</title> <style type="text/css"&g ...
- Table样式设置
<table class="listTable"> <tr><th width="40px">序号</th>&l ...
- css table样式
1.table样式首先设置表格边框,属性设置表格的边框是否被合并为一个单一的边框. table{ border-collapse: collapse; border-spacing: 0;} 2.固定 ...
- 好看的table样式
收藏个好看的table样式 <style type="text/css">table.gridtable { font-family: verdana,arial,sa ...
随机推荐
- c#继承中的函数调用实例
using System; namespace Test { public class Base { public void Print() { ...
- kbmMWUnidac直接SQLServer
UniDAC支持SQLServer直联了,当时就测试过在kbmMW中用直联方式,结果不尽人意,kbmMWServer在执行sql时会出地址错误,就一直没有进一步测试.今天听xalion说,是因为当直联 ...
- 复习回顾（String，StringBuffer，Arrays方法总结）
String: String类的对象是一经创建就无法变动内容的字符串常量,创建String类的对象可以使用直接赋值和利用构造方法赋值 String str=“hello”; String str=n ...
- 广播多路访问链路上的OSPF
实验要求:配置OSPF 拓扑如下: 配置如下: R1 enableconfigure terminal interface l0ip address 192.168.10.1 255.255.255. ...
- viewport是左下角开始的
- ix 混合索引
raw_datas #DateFrame diff_index_list = [] #行index #多行所有列索引 raw_datas.ix[diff_index_list] #多行一列索引raw_ ...
- [LeetCode&Python] Problem 283. Move Zeroes
Given an array nums, write a function to move all 0's to the end of it while maintaining the relativ ...
- 实时获取input输入框中的值
//输入框正在输入时 $("#ipt").on('input',function(){ if(!($('#ipt').val()=='')){ $(".cancle_ic ...
- Arrays ---------------copyOf赋值
- 2018.4.2 flask web
from flask import Flask,request from flask import jsonify from flask import render_template app = Fl ...