各种样式的table 及 代码
1.模板一
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;padding: 0;
}
body {
font-family: Georgia, serif;
font-size: 20px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
background: #f0f0f0;
}
#content {
background-color: #fff;
width: 750px;
padding: 40px;
margin: 0 auto;
margin: 0px auto;
-moz-box-shadow: 0px 0px 16px #aaa;
}
.head {
font-family: Helvetica, Arial, Verdana;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
font-style: normal;
letter-spacing: 3px;
color: #888;
border-bottom:3px solid #f0f0f0;
padding-bottom: 10px;
margin-bottom: 10px;
}
.head a {
color: #1D81B6;
text-decoration:none;
float:right;
text-shadow:1px 1px 1px #888;
}
.head a: hover {
color: #f0f0f0;
}
#content h1 {
font-family: "Trebuchet MS", sans-serif;
color: #1D81B6;
font-weight:normal;
font-style:normal;
font-size:56px;
text-shadow:1px 1px 1px #aaa;
}
</style>
<style>
/* Table 1 Style */
table.table1{
font-family: "Trebuchet MS", sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.4em;
font-style: normal;
border-collapse:separate;
}
.table1 thead th{
padding:15px;
color:#fff;
text-shadow:1px 1px 1px #568F23;
border:1px solid #93CE37;
border-bottom:3px solid #9ED929;
background-color:#9DD929;
background:-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.02, rgb(123,192,67)),
color-stop(0.51, rgb(139,198,66)),
color-stop(0.87, rgb(158,217,41))
);
background: -moz-linear-gradient(
center bottom,
rgb(123,192,67) 2%,
rgb(139,198,66) 51%,
rgb(158,217,41) 87%
);
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius:5px 5px 0px 0px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.table1 thead th:empty{
background:transparent;
border:none;
}
.table1 tbody th{
color:#fff;
text-shadow:1px 1px 1px #568F23;
background-color:#9DD929;
border:1px solid #93CE37;
border-right:3px solid #9ED929;
padding:0px 10px;
background:-webkit-gradient(
linear,
left bottom,
right top,
color-stop(0.02, rgb(158,217,41)),
color-stop(0.51, rgb(139,198,66)),
color-stop(0.87, rgb(123,192,67))
);
background: -moz-linear-gradient(
left bottom,
rgb(158,217,41) 2%,
rgb(139,198,66) 51%,
rgb(123,192,67) 87%
);
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
.table1 tfoot td{
color: #9CD009;
font-size:32px;
text-align:center;
padding:10px 0px;
text-shadow:1px 1px 1px #444;
}
.table1 tfoot th{
color:#666;
}
.table1 tbody td{
padding:10px;
text-align:center;
background-color:#DEF3CA;
border: 2px solid #E7EFE0;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
color:#666;
text-shadow:1px 1px 1px #fff;
}
.table1 tbody span.check::before{
content : url(images/check0.png)
}
</style>
</head>
<body>
<div id="content"> <table class="table1">
<thead>
<tr>
<th></th>
<th scope="col" abbr="Starter">Smart Starter</th>
<th scope="col" abbr="Medium">Smart Medium</th>
<th scope="col" abbr="Business">Smart Business</th>
<th scope="col" abbr="Deluxe">Smart Deluxe</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Price per month</th>
<td>$ 2.90</td>
<td>$ 5.90</td>
<td>$ 9.90</td>
<td>$ 14.90</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Storage Space</th>
<td>512 MB</td>
<td>1 GB</td>
<td>2 GB</td>
<td>4 GB</td>
</tr>
<tr>
<th scope="row">Bandwidth</th>
<td>50 GB</td>
<td>100 GB</td>
<td>150 GB</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">MySQL Databases</th>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">Setup</th>
<td>19.90 $</td>
<td>12.90 $</td>
<td>free</td>
<td>free</td>
</tr>
<tr>
<th scope="row">PHP 5</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th scope="row">Ruby on Rails</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
</tbody>
</table> </div>
</body>
</html>
template-1
2.模板二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;padding: 0;
}
body {
font-family: Georgia, serif;
font-size: 20px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
background: #f0f0f0;
}
#content {
background-color: #fff;
width: 750px;
padding: 40px;
margin: 0 auto;
margin: 0px auto;
-moz-box-shadow: 0px 0px 16px #aaa;
}
.head {
font-family: Helvetica, Arial, Verdana;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
font-style: normal;
letter-spacing: 3px;
color: #888;
border-bottom:3px solid #f0f0f0;
padding-bottom: 10px;
margin-bottom: 10px;
}
.head a {
color: #1D81B6;
text-decoration:none;
float:right;
text-shadow:1px 1px 1px #888;
}
.head a: hover {
color: #f0f0f0;
}
#content h1 {
font-family: "Trebuchet MS", sans-serif;
color: #1D81B6;
font-weight:normal;
font-style:normal;
font-size:56px;
text-shadow:1px 1px 1px #aaa;
}
</style>
<style>
/* Table 2 Style */
table.table2{
font-family: Georgia, serif;
font-size: 18px;
font-style: normal;
font-weight: normal;
letter-spacing: -1px;
line-height: 1.2em;
border-collapse:collapse;
text-align:center;
}
.table2 thead th, .table2 tfoot td{
padding:20px 10px 40px 10px;
color:#fff;
font-size: 26px;
background-color:#222;
font-weight:normal;
border-right:1px dotted #666;
border-top:3px solid #666;
-moz-box-shadow:0px -1px 4px #000;
-webkit-box-shadow:0px -1px 4px #000;
box-shadow:0px -1px 4px #000;
text-shadow:1px 1px 1px #000;
}
.table2 tfoot th{
padding:10px;
font-size:18px;
text-transform:uppercase;
color:#888;
}
.table2 tfoot td{
font-size:36px;
color:#EF870E;
border-top:none;
border-bottom:3px solid #666;
-moz-box-shadow:0px 1px 4px #000;
-webkit-box-shadow:0px 1px 4px #000;
box-shadow:0px 1px 4px #000;
}
.table2 thead th:empty{
background:transparent;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}
.table2 thead :nth-last-child(1){
border-right:none;
}
.table2 thead :first-child,
.table2 tbody :nth-last-child(1){
border:none;
}
.table2 tbody th{
text-align:right;
padding:10px;
color:#333;
text-shadow:1px 1px 1px #ccc;
background-color:#f9f9f9;
}
.table2 tbody td{
padding:10px;
background-color:#f0f0f0;
border-right:1px dotted #999;
text-shadow:-1px 1px 1px #fff;
text-transform:uppercase;
color:#333;
}
.table2 tbody span.check::before{
content : url(images/check1.png)
}
</style>
</head>
<body>
<div id="content"> <table class="table2">
<thead>
<tr>
<th></th>
<th scope="col" abbr="Starter">Smart Starter</th>
<th scope="col" abbr="Medium">Smart Medium</th>
<th scope="col" abbr="Business">Smart Business</th>
<th scope="col" abbr="Deluxe">Smart Deluxe</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Price per month</th>
<td>$ 2.90</td>
<td>$ 5.90</td>
<td>$ 9.90</td>
<td>$ 14.90</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Storage Space</th>
<td>512 MB</td>
<td>1 GB</td>
<td>2 GB</td>
<td>4 GB</td>
</tr>
<tr>
<th scope="row">Bandwidth</th>
<td>50 GB</td>
<td>100 GB</td>
<td>150 GB</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">MySQL Databases</th>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">Setup</th>
<td>19.90 $</td>
<td>12.90 $</td>
<td>free</td>
<td>free</td>
</tr>
<tr>
<th scope="row">PHP 5</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th scope="row">Ruby on Rails</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
</tbody>
</table> </div>
</body>
</html>
template-2
3.模板三
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;padding: 0;
}
body {
font-family: Georgia, serif;
font-size: 20px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
background: #f0f0f0;
}
#content {
background-color: #fff;
width: 750px;
padding: 40px;
margin: 0 auto;
margin: 0px auto;
-moz-box-shadow: 0px 0px 16px #aaa;
}
.head {
font-family: Helvetica, Arial, Verdana;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
font-style: normal;
letter-spacing: 3px;
color: #888;
border-bottom:3px solid #f0f0f0;
padding-bottom: 10px;
margin-bottom: 10px;
}
.head a {
color: #1D81B6;
text-decoration:none;
float:right;
text-shadow:1px 1px 1px #888;
}
.head a: hover {
color: #f0f0f0;
}
#content h1 {
font-family: "Trebuchet MS", sans-serif;
color: #1D81B6;
font-weight:normal;
font-style:normal;
font-size:56px;
text-shadow:1px 1px 1px #aaa;
}
#content h2 {
font-family: "Trebuchet MS", sans-serif;
font-size: 34px;
font-style: normal;
background-color: #f0f0f0;
margin: 40px 0px 30px -40px;
padding: 0px 40px;
clear: both;
float: left;
width: 100%;
color: #aaa;
text-shadow: 1px 1px 1px #fff;
}
</style>
<style>
/* Table 3 Style */
table.table3{
font-family:Arial;
font-size: 18px;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
letter-spacing: -1px;
line-height: 1.7em;
text-align:center;
border-collapse:collapse;
}
.table3 thead th{
padding:6px 10px;
text-transform:uppercase;
color:#444;
font-weight:bold;
text-shadow:1px 1px 1px #fff;
border-bottom:5px solid #444;
}
.table3 thead th:empty{
background:transparent;
border:none;
}
.table3 thead :nth-child(2),
.table3 tfoot :nth-child(2){
background-color: #7FD2FF;
}
.table3 tfoot :nth-child(2){
-moz-border-radius:0px 0px 0px 5px;
-webkit-border-bottom-left-radius:5px;
border-bottom-left-radius:5px;
}
.table3 thead :nth-child(2){
-moz-border-radius:5px 0px 0px 0px;
-webkit-border-top-left-radius:5px;
border-top-left-radius:5px;
}
.table3 thead :nth-child(3),
.table3 tfoot :nth-child(3){
background-color: #45A8DF;
}
.table3 thead :nth-child(4),
.table3 tfoot :nth-child(4){
background-color: #2388BF;
}
.table3 thead :nth-child(5),
.table3 tfoot :nth-child(5){
background-color: #096A9F;
}
.table3 thead :nth-child(5){
-moz-border-radius:0px 5px 0px 0px;
-webkit-border-top-right-radius:5px;
border-top-right-radius:5px;
}
.table3 tfoot :nth-child(5){
-moz-border-radius:0px 0px 5px 0px;
-webkit-border-bottom-right-radius:5px;
border-bottom-right-radius:5px;
}
.table3 tfoot td{
font-size:38px;
font-weight:bold;
padding:15px 0px;
text-shadow:1px 1px 1px #fff;
}
.table3 tbody td{
padding:10px;
}
.table3 tbody tr:nth-child(4) td{
font-size:26px;
font-weight:bold;
}
.table3 tbody td:nth-child(even){
background-color:#444;
color:#444;
border-bottom:1px solid #444;
background:-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.39, rgb(189,189,189)),
color-stop(0.7, rgb(224,224,224))
);
background:-moz-linear-gradient(
center bottom,
rgb(189,189,189) 39%,
rgb(224,224,224) 70%
);
text-shadow:1px 1px 1px #fff;
}
.table3 tbody td:nth-child(odd){
background-color:#555;
color:#f0f0f0;
border-bottom:1px solid #444;
background:-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.39, rgb(85,85,85)),
color-stop(0.7, rgb(105,105,105))
);
background:-moz-linear-gradient(
center bottom,
rgb(85,85,85) 39%,
rgb(105,105,105) 70%
);
text-shadow:1px 1px 1px #000;
}
.table3 tbody td:nth-last-child(1){
border-right:1px solid #222;
}
.table3 tbody th{
color:#696969;
text-align:right;
padding:0px 10px;
border-right:1px solid #aaa;
}
.table3 tbody span.check::before{
content : url(images/check2.png)
}
</style>
</head>
<body>
<div id="content"> <table class="table3">
<thead>
<tr>
<th></th>
<th scope="col" abbr="Starter">Smart Starter</th>
<th scope="col" abbr="Medium">Smart Medium</th>
<th scope="col" abbr="Business">Smart Business</th>
<th scope="col" abbr="Deluxe">Smart Deluxe</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="row">Price per month</th>
<td>$ 2.90</td>
<td>$ 5.90</td>
<td>$ 9.90</td>
<td>$ 14.90</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Storage Space</th>
<td>512 MB</td>
<td>1 GB</td>
<td>2 GB</td>
<td>4 GB</td>
</tr>
<tr>
<th scope="row">Bandwidth</th>
<td>50 GB</td>
<td>100 GB</td>
<td>150 GB</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">MySQL Databases</th>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<th scope="row">Setup</th>
<td>19.90 $</td>
<td>12.90 $</td>
<td>free</td>
<td>free</td>
</tr>
<tr>
<th scope="row">PHP 5</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
<tr>
<th scope="row">Ruby on Rails</th>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
<td><span class="check"></span></td>
</tr>
</tbody>
</table> </div>
</body>
</html>
template-3
4.模板四
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
margin:0;
padding:20px;
font:13px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
} /* ---- Some Resets ---- */ p,
table, caption, td, tr, th {
margin:0;
padding:0;
font-weight:normal;
} /* ---- Paragraphs ---- */ p {
margin-bottom:15px;
} /* ---- Table ---- */ table {
border-collapse:collapse;
margin-bottom:15px;
width:90%;
} caption {
text-align:left;
font-size:15px;
padding-bottom:10px;
} table td,
table th {
padding:5px;
border:1px solid #fff;
border-width:0 1px 1px 0;
} thead th {
background:#91c5d4;
} thead th[colspan],
thead th[rowspan] {
background:#66a9bd;
} tbody th,
tfoot th {
text-align:left;
background:#91c5d4;
} tbody td,
tfoot td {
text-align:center;
background:#d5eaf0;
} tfoot th {
background:#b0cc7f;
} tfoot td {
background:#d7e1c5;
font-weight:bold;
} tbody tr.odd td {
background:#bcd9e1;
}
</style>
<script src="js/jquery-1.2.6.min.js"></script>
<script>
$(document).ready(function () { $('tbody tr').hover(function() {
$(this).addClass('odd');
}, function() {
$(this).removeClass('odd');
}); });
</script>
</head>
<body>
<table id="travel"> <caption>Travel patterns in London - Travel times to work by main mode (Autumn 2006) - Minutes</caption> <thead>
<tr>
<th scope="col" rowspan="2">Main mode</th>
<th scope="col" colspan="6">Area of workplace</th>
</tr> <tr>
<th scope="col">Central London</th>
<th scope="col">Rest of Inner London</th>
<th scope="col">Outer London</th>
<th scope="col">All London</th>
<th scope="col">Rest of Great Britain</th>
<th scope="col">Great Britain</th>
</tr>
</thead> <tfoot>
<tr>
<th scope="row">All modes</th>
<td>55</td>
<td>39</td>
<td>27</td>
<td>39</td>
<td>20</td>
<td>23</td>
</tr>
</tfoot> <tbody>
<tr class="">
<th scope="row">Car and van</th>
<td>48</td>
<td>32</td>
<td>25</td>
<td>29</td>
<td>20</td>
<td>20</td>
</tr> <tr class="">
<th scope="row">Motorbike, moped, scooter</th>
<td>36</td>
<td>29</td>
<td>27</td>
<td>31</td>
<td>19</td>
<td>21</td>
</tr> <tr class="">
<th scope="row">Bicycle</th>
<td>33</td>
<td>24</td>
<td>20</td>
<td>25</td>
<td>15</td>
<td>17</td>
</tr> <tr>
<th scope="row">Bus and coach</th>
<td>47</td>
<td>39</td>
<td>36</td>
<td>40</td>
<td>33</td>
<td>34</td>
</tr> <tr class="">
<th scope="row">National Rail</th>
<td>69</td>
<td>66</td>
<td>43</td>
<td>66</td>
<td>47</td>
<td>58</td>
</tr> <tr class="">
<th scope="row">Underground, tram, light rail</th>
<td>49</td>
<td>45</td>
<td>37</td>
<td>47</td>
<td>42</td>
<td>46</td>
</tr> <tr class="">
<th scope="row">Walk</th>
<td>21</td>
<td>16</td>
<td>13</td>
<td>15</td>
<td>12</td>
<td>13</td>
</tr> </tbody> </table>
</body>
</html>
template-4
5.模板五
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
/* general styles */
table, td{
font:100% Arial, Helvetica, sans-serif;
}
table{width:100%;border-collapse:collapse;margin:1em 0;}
th, td{text-align:left;padding:.5em;border:1px solid #fff;}
th{background:#328aa4 url(tr_back.gif) repeat-x;color:#fff;}
td{background:#e5f1f4;} /* tablecloth styles */ tr.even td{background:#e5f1f4;}
tr.odd td{background:#f8fbfc;} th.over, tr.even th.over, tr.odd th.over{background:#4a98af;}
th.down, tr.even th.down, tr.odd th.down{background:#bce774;}
th.selected, tr.even th.selected, tr.odd th.selected{} td.over, tr.even td.over, tr.odd td.over{background:#ecfbd4;}
td.down, tr.even td.down, tr.odd td.down{background:#bce774;color:#fff;}
td.selected, tr.even td.selected, tr.odd td.selected{background:#bce774;color:#555;} /* use this if you want to apply different styleing to empty table cells*/
td.empty, tr.odd td.empty, tr.even td.empty{background:#fff;}
</style>
<script>
this.tablecloth = function(){ // CONFIG // if set to true then mouseover a table cell will highlight entire column (except sibling headings)
var highlightCols = true; // if set to true then mouseover a table cell will highlight entire row (except sibling headings)
var highlightRows = false; // if set to true then click on a table sell will select row or column based on config
var selectable = true; // this function is called when
// add your own code if you want to add action
// function receives object that has been clicked
this.clickAction = function(obj){
//alert(obj.innerHTML); }; // END CONFIG (do not edit below this line) var tableover = false;
this.start = function(){
var tables = document.getElementsByTagName("table");
for (var i=0;i<tables.length;i++){
tables[i].onmouseover = function(){tableover = true};
tables[i].onmouseout = function(){tableover = false};
rows(tables[i]);
};
}; this.rows = function(table){
var css = "";
var tr = table.getElementsByTagName("tr");
for (var i=0;i<tr.length;i++){
css = (css == "odd") ? "even" : "odd";
tr[i].className = css;
var arr = new Array();
for(var j=0;j<tr[i].childNodes.length;j++){
if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j]);
};
for (var j=0;j<arr.length;j++){
arr[j].row = i;
arr[j].col = j;
if(arr[j].innerHTML == " " || arr[j].innerHTML == "") arr[j].className += " empty";
arr[j].css = arr[j].className;
arr[j].onmouseover = function(){
over(table,this,this.row,this.col);
};
arr[j].onmouseout = function(){
out(table,this,this.row,this.col);
};
arr[j].onmousedown = function(){
down(table,this,this.row,this.col);
};
arr[j].onmouseup = function(){
up(table,this,this.row,this.col);
};
arr[j].onclick = function(){
click(table,this,this.row,this.col);
};
};
};
}; // appyling mouseover state for objects (th or td)
this.over = function(table,obj,row,col){
if (!highlightCols && !highlightRows) obj.className = obj.css + " over";
if(check1(obj,col)){
if(highlightCols) highlightCol(table,obj,col);
if(highlightRows) highlightRow(table,obj,row);
};
};
// appyling mouseout state for objects (th or td)
this.out = function(table,obj,row,col){
if (!highlightCols && !highlightRows) obj.className = obj.css;
unhighlightCol(table,col);
unhighlightRow(table,row);
};
// appyling mousedown state for objects (th or td)
this.down = function(table,obj,row,col){
obj.className = obj.css + " down";
};
// appyling mouseup state for objects (th or td)
this.up = function(table,obj,row,col){
obj.className = obj.css + " over";
};
// onclick event for objects (th or td)
this.click = function(table,obj,row,col){
if(check1){
if(selectable) {
unselect(table);
if(highlightCols) highlightCol(table,obj,col,true);
if(highlightRows) highlightRow(table,obj,row,true);
document.onclick = unselectAll;
}
};
clickAction(obj);
}; this.highlightCol = function(table,active,col,sel){
var css = (typeof(sel) != "undefined") ? "selected" : "over";
var tr = table.getElementsByTagName("tr");
for (var i=0;i<tr.length;i++){
var arr = new Array();
for(j=0;j<tr[i].childNodes.length;j++){
if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j]);
};
var obj = arr[col];
if (check2(active,obj) && check3(obj)) obj.className = obj.css + " " + css;
};
};
this.unhighlightCol = function(table,col){
var tr = table.getElementsByTagName("tr");
for (var i=0;i<tr.length;i++){
var arr = new Array();
for(j=0;j<tr[i].childNodes.length;j++){
if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j])
};
var obj = arr[col];
if(check3(obj)) obj.className = obj.css;
};
};
this.highlightRow = function(table,active,row,sel){
var css = (typeof(sel) != "undefined") ? "selected" : "over";
var tr = table.getElementsByTagName("tr")[row];
for (var i=0;i<tr.childNodes.length;i++){
var obj = tr.childNodes[i];
if (check2(active,obj) && check3(obj)) obj.className = obj.css + " " + css;
};
};
this.unhighlightRow = function(table,row){
var tr = table.getElementsByTagName("tr")[row];
for (var i=0;i<tr.childNodes.length;i++){
var obj = tr.childNodes[i];
if(check3(obj)) obj.className = obj.css;
};
};
this.unselect = function(table){
tr = table.getElementsByTagName("tr")
for (var i=0;i<tr.length;i++){
for (var j=0;j<tr[i].childNodes.length;j++){
var obj = tr[i].childNodes[j];
if(obj.className) obj.className = obj.className.replace("selected","");
};
};
};
this.unselectAll = function(){
if(!tableover){
tables = document.getElementsByTagName("table");
for (var i=0;i<tables.length;i++){
unselect(tables[i])
};
};
};
this.check1 = function(obj,col){
return (!(col == 0 && obj.className.indexOf("empty") != -1));
}
this.check2 = function(active,obj){
return (!(active.tagName == "TH" && obj.tagName == "TH"));
};
this.check3 = function(obj){
return (obj.className) ? (obj.className.indexOf("selected") == -1) : true;
}; start(); }; /* script initiates on page load. */
window.onload = tablecloth;
</script>
<body>
<div id="container">
<h1>Tablecloth: Example</h1>
<div id="content">
<h2>Table with top headings</h2>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr class="odd">
<th>Title</th>
<th>Title</th>
<th>Title</th>
<th class="">Title</th>
</tr>
<tr class="even">
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
</tr>
<tr class="odd">
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
</tr>
<tr class="even">
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
</tr>
<tr class="odd">
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr class="odd">
<th class="">Title</th>
<th class="">Title</th>
<th class="">Title</th>
<th class="">Title</th>
<th class="">Title</th>
<th class="">Title</th>
<th class="">Title</th>
<th class="">Title</th>
<th class="">Title</th>
<th class="">Title</th>
<th class="">Title</th>
<th class="">Title</th>
</tr>
<tr class="even">
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
</tr>
<tr class="odd">
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
</tr>
<tr class="even">
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
</tr>
<tr class="odd">
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
</tr>
<tr class="even">
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
</tr>
<tr class="odd">
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
</tr>
<tr class="even">
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
</tr>
</tbody>
</table>
<h2>Table with side headings</h2>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr class="odd">
<th class="">Title</th>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
</tr>
<tr class="even">
<th class="">Title</th>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
</tr>
<tr class="odd">
<th class="">Title</th>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
</tr>
<tr class="even">
<th class="">Title</th>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
</tr>
<tr class="odd">
<th class="">Title</th>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
</tr>
</tbody>
</table>
<h2>Table with top and side headings</h2>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr class="odd">
<td class=" empty"> </td>
<th class="">Title</th>
<th class="">Title</th>
<th class="">Title</th>
</tr>
<tr class="even">
<th class="">Title</th>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
</tr>
<tr class="odd">
<th class="">Title</th>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
</tr>
<tr class="even">
<th class="">Title</th>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
</tr>
<tr class="odd">
<th class="">Title</th>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
</tr>
<tr class="even">
<th class="">Title</th>
<td class="">Data</td>
<td class="">Data</td>
<td class="">Data</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
template-5
各种样式的table 及 代码的更多相关文章
- table完美css样式，table的基本样式，table样式
table完美css样式,table的基本样式,table样式 >>>>>>>>>>>>>>>>> ...
- 百度地图API显示多个标注点带百度样式信息检索窗口的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS select样式优化 含jquery代码
CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...
- CSS效果：CSS select样式优化 含jquery代码
CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...
- 整洁的 Table View 代码
Table view 是 iOS 应用程序中非常通用的组件.许多代码和 table view 都有直接或间接的关系,随便举几个例子,比如提供数据.更新 table view,控制它的行为以及响应选择事 ...
- CSS样式写在JSP代码中的几种方法
1.行内样式. 可以直接把css代码写在现有的HTML标签元素的开始标签里面,并且css样式代码要写在style=" "双引号中才可以, 如: <p style=" ...
- JQuery操作元素的属性与样式及位置 复制代码
<script type="text/javascript" src="JQuery/jquery-1.5.1.js"></script> ...
- @media print样式 关于table断页
<html> <head> <style> @media print { table { page-break-after:auto } tr { page-bre ...
- table+css与xhtmL+css实现同一登陆框（代码片段）
1.从网上下载了一个不错的登录框样式(table结合css布局): 2.初学xhtmL,自己改写了一下,希望有用 3. 我怎么不会上传截图呢? 1. [代码]xhtml_css组合 < ...
随机推荐
- Make a DAC with a microcontroller's PWM timer
http://www.edn.com/design/analog/4337128/Make-a-DAC-with-a-microcontroller-s-PWM-timer Many embedded ...
- spring mvc接收数组
(一)前言 对于springmvc接收数组的问题啊,我试验过几次,但是了有时候成功了,有时候失败了,也不知道为啥的,然后现在又要用到了,所以打算具体看看到底怎么回事,但是了我实验成功了顺便找了好多资料 ...
- MVC使用TempData跨控制器传递信息而无需记住key的名称
通常情况下,使用TempData需要记住key的名称,本篇体验:通过帮助类,实现对TempData的设置.获取.删除. 关于传递信息的类: namespace MvcApplication1.Mode ...
- js Date 函数方法
var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???? ...
- Eclipse设置打印线
在调出Preferences之后,选中Text Editors.先选中Show print margin,在Print margin column框中填入180就可以,然后选择以下的Print mar ...
- iptables配置实践
前言 在大企业中防火墙角色主要交给硬件来支持,效果自然没话说只是需要增加一点点成本,但对于大多数个人或者互联网公司来说选择系统自带的iptables或者第三方云防火墙似乎是更加合适的选择,通过一些合理 ...
- C++“窗体”程序设计启蒙（之二）
[摘要]本文适合已经完整学习了C++面向对象机制,但在开发窗体程序方面还是零基础的同学.通过本文的引导进行实践体验,目的是消除同学们开发窗体程序的神奇感,为下一步的自学找到感觉.同一时候,能更深入地体 ...
- selectHelper
转:适有修改并调试OK var Sys = (function (ua) { var s = {}; s.IE = ua.match(/msie ([\d.]+)/) ? true : false; ...
- 在mac上命令行里面如何打开文本编辑器？
在mac上命令行里面如何打开文本编辑器? 在linux命令行terminal上使用gedit直接就可以打开文本文件 那么在mac上面如何操作呢? 使用:open -a TextEdit setti ...
- 【BZOJ】【3670】【NOI2014】动物园
KMP算法 其实就像题面描述的那样……主要还是KMP算法的基础上搞一些DP(递推)之类…… 随便yy一下就可以得到50分了,因为num数组跟next的关系还是很密切的…… f[i]=f[next[i] ...