first commit

This commit is contained in:
Senad Uka
2018-05-07 16:07:00 +02:00
commit 8b4f09f9d5
3368 changed files with 852614 additions and 0 deletions

View File

@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TableSaw Sortable Table</title>
<link rel="stylesheet" href="/tablesaw/dist/tablesaw.css">
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="/tablesaw/dist/tablesaw.js"></script>
<script src="/tablesaw/dist/tablesaw-init.js"></script>
</head>
<body>
<table id="table2" class="tablesaw" data-tablesaw-mode="swipe" data-tablesaw-sortable data-tablesaw-sortable-switch data-tablesaw-minimap data-tablesaw-mode-switch>
<thead>
<tr>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist" data-sortable-numeric="false">Movie Title</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
</tr>
</thead>
<tbody>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
<td>1</td>
<td>2009</td>
<td>83%</td>
<td>$2.7B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
<td>2</td>
<td>1997</td>
<td>88%</td>
<td>$2.1B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
<td>3</td>
<td>2012</td>
<td>92%</td>
<td>$1.5B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></td>
<td>4</td>
<td>2011</td>
<td>96%</td>
<td>$1.3B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">1 Frozen</a></td>
<td>5</td>
<td>2013</td>
<td>89%</td>
<td>$1.2B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
<td>6</td>
<td>2013</td>
<td>78%</td>
<td>$1.2B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">3 Transformers: Dark of the Moon</a></td>
<td>7</td>
<td>2011</td>
<td>36%</td>
<td>$1.1B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></td>
<td>8</td>
<td>2003</td>
<td>95%</td>
<td>$1.1B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
<td>9</td>
<td>2012</td>
<td>92%</td>
<td>$1.1B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
<td>10</td>
<td>2014</td>
<td>18%</td>
<td>$1.0B</td>
</tr>
</tbody>
</table>
</body>
</html>

View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TableSaw Sortable Table</title>
<link rel="stylesheet" href="/tablesaw/dist/tablesaw.css">
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="/tablesaw/dist/tablesaw.js"></script>
<script src="/tablesaw/dist/tablesaw-init.js"></script>
<script>
$( document ).ready(function() {
var mydata = [
{"Name":"A", "P1":"1", "P2":"2", "P3":"3", "P4":"1", "P5":"2", "P6":"3"},
{"Name":"B", "P1":"4", "P2":"5", "P3":"6", "P4":"1", "P5":"2", "P6":"3"},
{"Name":"C", "P1":"7", "P2":"8", "P3":"9", "P4":"1", "P5":"2", "P6":"3"}
];
$( '#ajaxed' ).html( "<table class='tablesaw' data-tablesaw-mode='columntoggle' id='mytable'><thead><tr><th scope='col' data-tablesaw-priority='persist'>Name</th><th scope='col' data-tablesaw-priority='1'>P1</th><th scope='col' data-tablesaw-priority='1'>P2</th><th scope='col' data-tablesaw-priority='2'>P3</th><th scope='col' data-tablesaw-priority='3'>P4</th><th scope='col' data-tablesaw-priority='4'>P5</th><th scope='col' data-tablesaw-priority='5'>P6</th></tr></thead><tbody id='place1'></tbody></table>" );
var tbody = $( '#mytable tbody' ), props = ["Name","P1","P2","P3","P4","P5","P6"];
$.each( mydata, function(i, value){
var tr = $('<tr>');
$.each(props, function(i, prop){
$('<td>').html(value[prop]).appendTo(tr);
});
tbody.append(tr);
});
$(document).trigger( "enhance.tablesaw" );
window.setTimeout(function() {
var mydata = [
{"Name":"D", "P1":"1", "P2":"2", "P3":"3", "P4":"1", "P5":"2", "P6":"3"},
{"Name":"E", "P1":"4", "P2":"5", "P3":"6", "P4":"1", "P5":"2", "P6":"3"},
{"Name":"F", "P1":"7", "P2":"8", "P3":"9", "P4":"1", "P5":"2", "P6":"3"}
];
var tbody = $( '#mytable tbody' ), props = ["Name","P1","P2","P3","P4","P5","P6"];
$.each( mydata, function(i, value){
var tr = $('<tr>');
$.each(props, function(i, prop){
$('<td>').html(value[prop]).appendTo(tr);
});
tbody.append(tr);
$('#mytable').table().data( "table" ).refresh();
});
}, 5000);
});
</script>
</head>
<body cz-shortcut-listen="true">
<div class="docs-main">
<h2>Swipe Table</h2>
<div id="ajaxed"></div>
</div>
</body>
</html>

View File

@@ -0,0 +1,85 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TableSaw Sortable Table</title>
<link rel="stylesheet" href="../../dist/tablesaw.css">
<link rel="stylesheet" href="../demo.css">
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
<!--[if lt IE 9]><script src="../../dist/dependencies/respond.js"></script><![endif]-->
<script src="../../dist/dependencies/jquery.js"></script>
<script src="../../dist/tablesaw.js"></script>
<script src="../../dist/tablesaw-init.js"></script>
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
<script>
$( document ).ready(function() {
var mydata = [
{"Name":"A", "P1":"1", "P2":"2", "P3":"3", "P4":"1", "P5":"2", "P6":"3"},
{"Name":"B", "P1":"4", "P2":"5", "P3":"6", "P4":"1", "P5":"2", "P6":"3"},
{"Name":"C", "P1":"7", "P2":"8", "P3":"9", "P4":"1", "P5":"2", "P6":"3"}
];
var tbody = $( '#mytable tbody' ), props = ["Name","P1","P2","P3","P4","P5","P6"];
$.each( mydata, function(i, value){
var tr = $('<tr>');
$.each(props, function(i, prop){
$('<td>').html(value[prop]).appendTo(tr);
});
tbody.append(tr);
});
$('#mytable').table().data( "table" ).refresh();
});
</script>
</head>
<body>
<div class="demo-header">
<div class="company">
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
</div>
<div class="details">
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
<span class="description">A group of plugins for responsive tables.</span>
</h1>
<ul class="outbound-links">
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
</ul>
</div>
</div>
<div class="docs-main">
<div class="nav-container">
<div class="docs-globalnav">
<nav class="docs-nav">
<a href="kitchensink.html">Kitchen Sink</a>
<a href="modeswitch.html">Mode Switch</a>
<a href="sort.html">Sortable</a>
<a href="stack.html">Stack</a>
<a href="stackonly.html">Stack Only</a>
<a href="swipe.html">Swipe Table</a>
<a href="toggle.html">Toggle</a>
<a href="bare.html">Bare</a>
</nav>
</div>
</div>
<h2>Swipe Table</h2>
<table class='tablesaw' data-tablesaw-mode='swipe' id='mytable'>
<thead>
<tr><th data-tablesaw-priority='persist'>Name</th><th>P1</th><th>P2</th><th>P3</th><th>P4</th><th>P5</th><th>P6</th></tr>
</thead>
<tbody id="place1">
</tbody>
</table>
</div>
</body>
</html>

View File

@@ -0,0 +1,139 @@
<?php
header( "Content-Type:text/html; charset=windows-1250" );
?>
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TableSaw Sortable Table</title>
<link rel="stylesheet" href="../../dist/tablesaw.css">
<link rel="stylesheet" href="../demo.css">
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
<!--[if lt IE 9]><script src="../dist/dependencies/respond.js"></script><![endif]-->
<script src="../../dist/dependencies/jquery.js"></script>
<script src="../../dist/tablesaw.js"></script>
<script src="../../dist/tablesaw-init.js"></script>
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
</head>
<body>
<div class="demo-header">
<div class="company">
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
</div>
<div class="details">
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
<span class="description">A group of plugins for responsive tables.</span>
</h1>
<ul class="outbound-links">
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
</ul>
</div>
</div>
<div class="nav-container">
<div class="docs-globalnav">
<nav class="docs-nav">
<a href="kitchensink.html">Kitchen Sink</a>
<a href="modeswitch.html">Mode Switch</a>
<a href="sort.html" class="current">Sortable</a>
<a href="stack.html">Stack</a>
<a href="stackonly.html">Stack Only</a>
<a href="swipe.html">Swipe Table</a>
<a href="toggle.html">Toggle</a>
<a href="bare.html">Bare</a>
</nav>
</div>
</div>
<div class="docs-main">
<h2>Sortable Table</h2>
<h3 class="docs">Default appearance (with optional sortable-switch)</h3>
<table class="tablesaw" data-tablesaw-sortable data-tablesaw-sortable-switch>
<thead>
<tr>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year</th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross</th>
</tr>
</thead>
<tbody>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">Avatar</a></td>
<td>1</td>
<td>2009</td>
<td>83%</td>
<td>$2.7B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Titanic_(1997_film)">Titanic</a></td>
<td>2</td>
<td>1997</td>
<td>88%</td>
<td>$2.1B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Avengers_(2012_film)">The Avengers</a></td>
<td>3</td>
<td>2012</td>
<td>92%</td>
<td>$1.5B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Harry_Potter_and_the_Deathly_Hallows_%E2%80%93_Part_2">Harry Potter and the Deathly Hallows—Part 2</a></td>
<td>4</td>
<td>2011</td>
<td>96%</td>
<td>$1.3B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Frozen_(2013_film)">Frozen</a></td>
<td>5</td>
<td>2013</td>
<td>89%</td>
<td>$1.2B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Iron_Man_3">Iron Man 3</a></td>
<td>6</td>
<td>2013</td>
<td>78%</td>
<td>$1.2B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Dark_of_the_Moon">Transformers: Dark of the Moon</a></td>
<td>7</td>
<td>2011</td>
<td>36%</td>
<td>$1.1B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/The_Lord_of_the_Rings:_The_Return_of_the_King">The Lord of the Rings: The Return of the King</a></td>
<td>8</td>
<td>2003</td>
<td>95%</td>
<td>$1.1B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Skyfall">Skyfall</a></td>
<td>9</td>
<td>2012</td>
<td>92%</td>
<td>$1.1B</td>
</tr>
<tr>
<td class="title"><a href="http://en.wikipedia.org/wiki/Transformers:_Age_of_Extinction">Transformers: Age of Extinction</a></td>
<td>10</td>
<td>2014</td>
<td>18%</td>
<td>$1.0B</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

View File

@@ -0,0 +1,83 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TableSaw Stack Table</title>
<link rel="stylesheet" href="../../dist/tablesaw.css">
<link rel="stylesheet" href="../demo.css">
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
<!--[if lt IE 9]><script src="../../dist/dependencies/respond.js"></script><![endif]-->
<script src="../../dist/dependencies/jquery.js"></script>
<script src="../../dist/tablesaw.js"></script>
<script src="../../dist/tablesaw-init.js"></script>
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
</head>
<body>
<div class="demo-header">
<div class="company">
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
</div>
<div class="details">
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
<span class="description">A group of plugins for responsive tables.</span>
</h1>
<ul class="outbound-links">
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
</ul>
</div>
</div>
<div class="nav-container">
<div class="docs-globalnav">
<nav class="docs-nav">
<a href="kitchensink.html">Kitchen Sink</a>
<a href="modeswitch.html">Mode Switch</a>
<a href="sort.html">Sortable</a>
<a href="stack.html" class="current">Stack</a>
<a href="stackonly.html">Stack Only</a>
<a href="swipe.html">Swipe Table</a>
<a href="toggle.html">Toggle</a>
</nav>
</div>
</div>
<div class="docs-main">
<h2>Stack Table</h2>
<p>The Stack Table stacks the table headers to a two column layout with headers on the left. Resize your viewport to across the 40em (640px) breakpoint to see the change.</p>
<table class="tablesaw" data-tablesaw-mode="stack" data-tablesaw-hide-empty>
<thead>
<tr>
<th>Skill</th>
<th>Last Entry</th>
<th>Alphabet</th>
<th>More Alphabet</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bartender</td>
<td>May 2, 1:34p John K.</td>
<td>A, B, C, D</td>
<td>E, F, G, H</td>
</tr>
<tr>
<td>Host</td>
<td>May 11, 12:45a</td>
<td>A, B, C, D</td>
<td>E, F, G, H</td>
</tr>
<tr>
<td>Waiter</td>
<td>May 10, 1:15a</td>
<td></td>
<td>E, F, G, H</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

View File

@@ -0,0 +1,83 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TableSaw Stack Table</title>
<link rel="stylesheet" href="../../dist/tablesaw.css">
<!--[if lt IE 9]><script src="../../dist/dependencies/respond.js"></script><![endif]-->
<script src="../../dist/dependencies/jquery.js"></script>
<script src="../../dist/tablesaw.js"></script>
<script src="../../dist/tablesaw-init.js"></script>
</head>
<body>
<div class="demo-header">
<div class="company">
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
</div>
<div class="details">
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
<span class="description">A group of plugins for responsive tables.</span>
</h1>
<ul class="outbound-links">
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
</ul>
</div>
</div>
<div class="nav-container">
<div class="docs-globalnav">
<nav class="docs-nav">
<a href="kitchensink.html">Kitchen Sink</a>
<a href="modeswitch.html">Mode Switch</a>
<a href="sort.html">Sortable</a>
<a href="stack.html" class="current">Stack</a>
<a href="stackonly.html">Stack Only</a>
<a href="swipe.html">Swipe Table</a>
<a href="toggle.html">Toggle</a>
<a href="bare.html">Bare</a>
</nav>
</div>
</div>
<div class="docs-main">
<h2>Stack Table</h2>
<p>The Stack Table stacks the table headers to a two column layout with headers on the left. Resize your viewport to across the 40em (640px) breakpoint to see the change.</p>
<table class="tablesaw" data-tablesaw-mode="stack">
<thead>
<tr>
<th>Skill</th>
<th>Last Entry</th>
<th>Alphabet</th>
<th>More Alphabet</th>
</tr>
</thead>
<tfoot>
<tr data-tablesaw-no-labels>
<td>Footer</td>
<td>May 11, 12:45a</td>
<td>A, B, C, D</td>
<td>E, F, G, H</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Bartender</td>
<td>May 2, 1:34p John K.</td>
<td>A, B, C, D</td>
<td>E, F, G, H</td>
</tr>
<tr>
<td>Host</td>
<td>May 11, 12:45a</td>
<td>A, B, C, D</td>
<td>E, F, G, H</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

View File

@@ -0,0 +1,526 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TableSaw Sortable Table</title>
<link rel="stylesheet" href="../../dist/tablesaw.css">
<style>
/* .spec-detail-table {
width: 100%;
border-collapse: collapse;
border: solid 1px #c9c9c9;
text-align: left;
}
.spec-detail-table td, .spec-detail-table th {
border-right: solid 1px #c9c9c9;
border-bottom: solid 1px #c9c9c9;
border-top: solid 1px #ffffff;
vertical-align: top;
background-color: #ffffff;
font-size: 16px;
color: #000000;
line-height: 22px;
padding: 15px;
text-align: inherit;
white-space: inherit;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 400;
}
.spec-detail-table td.column-1, .spec-detail-table th.column-1 {
background-color: #e2e2e2;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
}
.spec-detail-table td:nth-child(last), .spec-detail-table th:nth-child(last) {
border-right: none;
width: 150px;
}*/
</style>
<!--[if lt IE 9]><script src="../../dist/dependencies/respond.js"></script><![endif]-->
<script src="../../dist/dependencies/jquery.js"></script>
<script src="../../dist/tablesaw.js"></script>
<script src="../../dist/tablesaw-init.js"></script>
</head>
<body>
<h1>Issue 32</h1>
<table class="tablesaw" data-tablesaw-mode="swipe">
<tbody>
<tr>
<th class="column-1" data-tablesaw-priority="persist">
Ad Type
</th>
<th class="column-2">
Desktop Billboard
</th>
<th class="column-3">
Desktop Tablet / Rectangle
</th>
<th class="column-4">
Tablet Leaderboard
</th>
<th class="column-5">
Smart Phone<br />
Standart Wide<br/>
Banner
</th>
<th class="column-6">
Smarth Phone<br />
Rectangle
</th>
<th class="column-7">
Data point
</th>
</tr>
<tr>
<td class="column-1" data-tablesaw-priority="persist">
Ad Size
</td>
<td class="column-2">
970x250
</td>
<td class="column-3">
300x250
</td>
<td class="column-4">
728x90
</td>
<td class="column-5">
320x50
</td>
<td class="column-6">
300x250
</td>
<td class="column-7">
Data point
</td>
</tr>
<tr>
<td class="column-1" data-tablesaw-priority="persist">
Retina Ad Size
</td>
<td class="column-2">
970x250
</td>
<td class="column-3">
300x250
</td>
<td class="column-4">
728x90
</td>
<td class="column-5">
320x50
</td>
<td class="column-6">
300x250
</td>
<td class="column-7">
Data point
</td>
</tr>
<tr>
<td class="column-1" data-tablesaw-priority="persist">
Expanded Size
</td>
<td class="column-2">
N/A
</td>
<td class="column-3">
N/A
</td>
<td class="column-4">
N/A
</td>
<td class="column-5">
N/A
</td>
<td class="column-6">
640x960
</td>
<td class="column-7">
Data point
</td>
</tr>
<tr>
<td class="column-1" data-tablesaw-priority="persist">
Expanded Direction
</td>
<td class="column-2">
None(Leave behind 970x90)
</td>
<td class="column-3">
N/A
</td>
<td class="column-4">
N/A
</td>
<td class="column-5">
Up
</td>
<td class="column-6">
N/A
</td>
<td class="column-7">
Data point
</td>
</tr>
<tr>
<td class="column-1" data-tablesaw-priority="persist">
Looping & Max. Length of Anim.
</td>
<td class="column-2">
:15max
</td>
<td class="column-3">
3 loop limit, 15 sec max
</td>
<td class="column-4">
3 loop limit, 15 sec max
</td>
<td class="column-5">
3 loop limit, 15 sec max
</td>
<td class="column-6">
3 loop limit, 15 sec max
</td>
<td class="column-7">
Datapoint
</td>
</tr>
<tr>
<td class="column-1" data-tablesaw-priority="persist">
Frames per Second
</td>
<td class="column-2">
18fps
</td>
<td class="column-3">
24fps
</td>
<td class="column-4">
24fps
</td>
<td class="column-5">
24fps
</td>
<td class="column-6">
24fps
</td>
<td class="column-7">
Data point
</td>
</tr>
<tr>
<td class="column-1" data-tablesaw-priority="persist">
Max Initial Load File Size(k)
</td>
<td class="column-2">
60k
</td>
<td class="column-3">
50k
</td>
<td class="column-4">
50k
</td>
<td class="column-5">
100k
</td>
<td class="column-6">
200k
</td>
<td class="column-7">
Data point
</td>
</tr>
<tr>
<td class="column-1" data-tablesaw-priority="persist">
Max Full Load File Size Flash/Rich Media (k)
</td>
<td class="column-2">
100k (1.2MB for video)
</td>
<td class="column-3">
100k (2.2MB for video)
</td>
<td class="column-4">
100k (2.2MB for video)
</td>
<td class="column-5">
60k
</td>
<td class="column-6">
60k
</td>
<td class="column-7">
Data point
</td>
</tr>
<tr>
<td class="column-1" data-tablesaw-priority="persist">
Max Expanded File Size
</td>
<td class="column-2">
60k
</td>
<td class="column-3">
60k
</td>
<td class="column-4">
60k
</td>
<td class="column-5">
60k
</td>
<td class="column-6">
60k
</td>
<td class="column-7">
Data point
</td>
</tr>
<tr>
<td class="column-1" data-tablesaw-priority="persist">
Max Expanded File Size: HQ, Double Density/Retina
</td>
<td class="column-2">
N/A
</td>
<td class="column-3">
N/A
</td>
<td class="column-4">
N/A
</td>
<td class="column-5">
60k
</td>
<td class="column-6">
60k
</td>
<td class="column-7">
Data point
</td>
</tr>
<tr>
<td class="column-1" data-tablesaw-priority="persist">
Accepted formats
</td>
<td class="column-2">
Panel: Layered PSDs built to size
or fla's & swf's (both fla & swf
needed together)
Video: .mov or .avi
(.mov preferred)
</td>
<td class="column-3">
gif/.jpeg, .swf, rich media, html
</td>
<td class="column-4">
.gif/.jpeg, .
swf, rich
media, html
</td>
<td class="column-5">
GIF, JPG,
Animating
GIF, PNG
</td>
<td class="column-6">
GIF, JPG,
Animating
GIF, PNG
</td>
<td class="column-7">
Data point
</td>
</tr>
<tr>
<td class="column-1" data-tablesaw-priority="persist">
3rd Party Tracking
Accepted
</td>
<td class="column-2">
yes
</td>
<td class="column-3">
yes
</td>
<td class="column-4">
yes
</td>
<td class="column-5">
Y (1 click & 1
impression
tracker per
each ad size,
both standard
& expanded
states)
</td>
<td class="column-6">
Y (1 click & 1
impression
tracker per
each ad size,
both standard
& expanded
states)
</td>
<td class="column-7">
Data point
</td>
</tr>
<tr>
<td class="column-1" data-tablesaw-priority="persist">
Sound Allowed
</td>
<td class="column-2">
Yes, on click
</td>
<td class="column-3">
Yes, on click
</td>
<td class="column-4">
Yes, on click
</td>
<td class="column-5">
N/A
</td>
<td class="column-6">
N/A
</td>
<td class="column-7">
Data point
</td>
</tr>
<tr>
<td class="column-1" data-tablesaw-priority="persist">
Video Allowed
</td>
<td class="column-2">
See Notes
</td>
<td class="column-3">
Yes, on click
</td>
<td class="column-4">
Yes, on click
</td>
<td class="column-5">
N/A
</td>
<td class="column-6">
N/A
</td>
<td class="column-7">
Data point
</td>
</tr>
<tr>
<td class="column-1" data-tablesaw-priority="persist">
Notes
</td>
<td class="column-2">
CTA: Include a "(X) close"
button at the top right of the
panel
<br />
970x90 leave-behind: include
applicable branding. Format:
.gif or .jpg.
<br />
Video: Panel should be
designed with an area reserved
for video. Must have coding for
player controls (minimum of
stop/play, mute/unmute).
Video files cannot be third-party
served.
<br />
For more information, including
style guides please visit :
<a href="www.iab.net/risingstars">www.iab.net/risingstars</a>
</td>
<td class="column-3">
Cannot expand on Homepage or
Leaderboard. (For Video Enabled
300x250s: Minimum required
controls = Play, Pause, Mute
(volume control to zero (0)
output may be included instead
of or in addition to Mute control).
<br />
Audio must be user initiated
(on click: mute/ un-mute);
default state is muted.)
</td>
<td class="column-4">
Cannot
expand on
Leaderboard.
<br />
Must provide
backup .gif/
.jpg along
with any
swf/html
5 creative
</td>
<td class="column-5">
Expandable
Ads Should
be HTML5.
<br />
Please see
list of certified
vendors for
Mobile Rich
Media.
</td>
<td class="column-6">
Expandable
Ads Should
be HTML5.
<br />
Please see
list of certified
vendors for
Mobile Rich
Media.
</td>
<td class="column-7">
Data point
</td>
</tr>
</tbody>
</table>
</body>
</html>

View File

@@ -0,0 +1,83 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TableSaw Stack Table</title>
<link rel="stylesheet" href="../../dist/tablesaw.css">
<!--[if lt IE 9]><script src="../../dist/dependencies/respond.js"></script><![endif]-->
<script src="../../dist/dependencies/jquery.js"></script>
<script src="../../dist/tablesaw.js"></script>
<script src="../../dist/tablesaw-init.js"></script>
</head>
<body>
<div class="demo-header">
<div class="company">
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
</div>
<div class="details">
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
<span class="description">A group of plugins for responsive tables.</span>
</h1>
<ul class="outbound-links">
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
</ul>
</div>
</div>
<div class="nav-container">
<div class="docs-globalnav">
<nav class="docs-nav">
<a href="kitchensink.html">Kitchen Sink</a>
<a href="modeswitch.html">Mode Switch</a>
<a href="sort.html">Sortable</a>
<a href="stack.html" class="current">Stack</a>
<a href="stackonly.html">Stack Only</a>
<a href="swipe.html">Swipe Table</a>
<a href="toggle.html">Toggle</a>
<a href="bare.html">Bare</a>
</nav>
</div>
</div>
<div class="docs-main">
<h2>Stack Table</h2>
<p>The Stack Table stacks the table headers to a two column layout with headers on the left. Resize your viewport to across the 40em (640px) breakpoint to see the change.</p>
<table style="width: 100%">
<tbody>
<tr>
<td>
<table class="tablesaw" data-tablesaw-mode="stack">
<thead>
<tr>
<th>Skill</th>
<th>Last Entry</th>
<th>Alphabet</th>
<th>More Alphabet</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bartender</td>
<td>May 2, 1:34p John K.</td>
<td>A, B, C, D</td>
<td>E, F, G, H</td>
</tr>
<tr>
<td>Host</td>
<td>May 11, 12:45a</td>
<td>A, B, C, D</td>
<td>E, F, G, H</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

View File

@@ -0,0 +1,44 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TableSaw Stack Table</title>
<link rel="stylesheet" href="../../dist/tablesaw.css">
<!--[if lt IE 9]><script src="../../dist/dependencies/respond.js"></script><![endif]-->
<script src="../../dist/dependencies/jquery.js"></script>
<script src="../../dist/tablesaw.js"></script>
<script src="../../dist/tablesaw-init.js"></script>
</head>
<body>
<!-- <div style="position:relative;"> -->
<table class="tablesaw" data-tablesaw-mode="swipe">
<thead>
<tr>
<th data-tablesaw-priority="persist">rental unit address</th>
<th>rooms</th>
<th>fee</th>
</tr>
</thead>
<tbody>
<tr>
<td>1600 Pennsylvania Ave NW, Washington</td>
<td>200 i imagine i've seen the west wing</td>
<td>$200,000</td>
</tr>
<tr>
<td>10 downing street , London</td>
<td>20 i imagine, I've seen ouse of Cards</td>
<td>$200,000</td>
</tr>
</tbody>
</table>
<!-- </div> -->
</body>
</html>

View File

@@ -0,0 +1,159 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TableSaw Stack Table</title>
<link rel="stylesheet" href="../../dist/tablesaw.css">
<!--[if lt IE 9]><script src="../../dist/dependencies/respond.js"></script><![endif]-->
<script src="../../dist/dependencies/jquery.js"></script>
<script src="../../dist/tablesaw.js"></script>
<script src="../../dist/tablesaw-init.js"></script>
</head>
<body>
<table class="tablesaw tablesaw-stack" data-tablesaw-mode="stack">
<caption>Table 3: Summary of Evidence—Mammography Trials for Women Younger than 50 Years—Breast Cancer Mortality</caption>
<thead>
<tr>
<th colspan="1" rowspan="2">Study</th>
<th colspan="1" rowspan="2">Age at entry (years)</th>
<th colspan="1" rowspan="2">Screening interval (months)</th>
<th colspan="1" rowspan="2">Year study began</th>
<th colspan="2" rowspan="1">Total study sample size</th>
<th colspan="3" rowspan="1">Breast cancer mortality<sup><a class="footnote-ref" href="#fn-iii">iii</a></sup> at mid-range follow-up (6 to 8 years)</th>
<th colspan="3" rowspan="1">Breast cancer mortality<sup><a class="footnote-ref" href="#fn-iii">iii</a></sup> at 14-year follow-up</th>
</tr>
<tr>
<th>Study group</th>
<th>Control group</th>
<th>Study group</th>
<th>Control group</th>
<th>RR (95% CI)</th>
<th>Study group</th>
<th>Control group</th>
<th>RR (95% CI)</th>
</tr>
</thead>
<tbody>
<tr>
<td>HIP<sup><a class="footnote-ref" href="#fn-66">66</a></sup></td>
<td>4049</td>
<td>12</td>
<td>1963</td>
<td>13,740</td>
<td>13,740</td>
<td>19</td>
<td>20</td>
<td>0.95 (0.511.78)</td>
<td>64</td>
<td>82</td>
<td>0.78 (0.561.08)</td>
</tr>
<tr>
<td>Malmö<sup><a class="footnote-ref" href="#fn-58">58</a></sup></td>
<td>4554</td>
<td>1824</td>
<td>1976</td>
<td>13,568</td>
<td>12,279</td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
<td>53</td>
<td>66</td>
<td>0.73 (0.511.04)</td>
</tr>
<tr>
<td>Östergötland (E-County)<sup><a class="footnote-ref" href="#fn-65">65</a></sup></td>
<td>4049</td>
<td>24</td>
<td>1977</td>
<td>10,285</td>
<td>10,459</td>
<td>15</td>
<td>15</td>
<td>1.03 (0.502.11)</td>
<td>31</td>
<td>30</td>
<td>1.05 (0.641.73)</td>
</tr>
<tr>
<td>Kopparberg (W-County)<sup><a class="footnote-ref" href="#fn-65">65</a></sup></td>
<td>4049</td>
<td>24</td>
<td>1977</td>
<td>9,582</td>
<td>5,031</td>
<td>13</td>
<td>9</td>
<td>0.76 (0.321.77)</td>
<td>22</td>
<td>16</td>
<td>0.72 (0.381.37)</td>
</tr>
<tr>
<td>CNBSS-1<sup><a class="footnote-ref" href="#fn-56">56</a></sup></td>
<td>4049</td>
<td>12</td>
<td>1980</td>
<td>25,214</td>
<td>25,216</td>
<td>38</td>
<td>28</td>
<td>1.36 (0.842.21)</td>
<td>105</td>
<td>108</td>
<td>0.97 (0.741.27)</td>
</tr>
<tr>
<td>Stockholm<sup><a class="footnote-ref" href="#fn-64">64</a></sup></td>
<td>4049</td>
<td>28</td>
<td>1981</td>
<td>14,303</td>
<td>8,021</td>
<td>16</td>
<td>8</td>
<td>1.09 (0.403.00)</td>
<td>34</td>
<td>13</td>
<td>1.47 (0.772.78)</td>
</tr>
<tr>
<td>Göteborg<sup><a class="footnote-ref" href="#fn-63">63</a></sup></td>
<td>3949</td>
<td>18</td>
<td>1982</td>
<td>11,724</td>
<td>14,217</td>
<td>16</td>
<td>33</td>
<td>0.59 (0.331.06)</td>
<td>34</td>
<td>59</td>
<td>0.70 (0.461.06)</td>
</tr>
<tr>
<td>UK AGE<sup><a class="footnote-ref" href="#fn-61">61</a></sup></td>
<td>3941</td>
<td>12</td>
<td>1991</td>
<td>53,884</td>
<td>106,956</td>
<td>26</td>
<td>65</td>
<td>0.79 (0.481.27)</td>
<td>105</td>
<td>251</td>
<td>0.83 (0.661.04)</td>
</tr>
</tbody>
</table>
</body>
</html>

View File

@@ -0,0 +1,180 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TableSaw Sortable Table</title>
<link rel="stylesheet" href="../../dist/tablesaw.css">
<link rel="stylesheet" href="../demo.css">
<link rel="stylesheet" href="//filamentgroup.github.io/demo-head/demohead.css">
<!--[if lt IE 9]><script src="../../dist/dependencies/respond.js"></script><![endif]-->
<script src="../../dist/dependencies/jquery.js"></script>
<script src="../../dist/tablesaw.js"></script>
<script src="../../dist/tablesaw-init.js"></script>
<script src="//filamentgroup.github.io/demo-head/loadfont.js"></script>
</head>
<body>
<div class="demo-header">
<div class="company">
<img src="http://filamentgroup.com/images/fg-logo-positive-sm-crop.png">
</div>
<div class="details">
<h1 class="description-container">Demo of <span class="repo-name">Tablesaw</span>
<span class="description">A group of plugins for responsive tables.</span>
</h1>
<ul class="outbound-links">
<li><a href="https://github.com/filamentgroup/tablesaw">Code</a></li>
<li><a href="https://github.com/filamentgroup/tablesaw/issues">Issues</a></li>
</ul>
</div>
</div>
<div class="nav-container">
<div class="docs-globalnav">
<nav class="docs-nav">
<a href="kitchensink.html">Kitchen Sink</a>
<a href="modeswitch.html">Mode Switch</a>
<a href="sort.html" class="current">Sortable</a>
<a href="stack.html">Stack</a>
<a href="stackonly.html">Stack Only</a>
<a href="swipe.html">Swipe Table</a>
<a href="toggle.html">Toggle</a>
<a href="bare.html">Bare</a>
</nav>
</div>
</div>
<div class="docs-main">
<h2>Sortable Table</h2>
<h3 class="docs">Default appearance (with optional sortable-switch &lt;select&gt;)</h3>
<table class="tablesaw" data-tablesaw-sortable data-tablesaw-sortable-switch>
<thead>
<tr>
<th data-tablesaw-sortable-col data-tablesaw-sortable-default-col>Rank</th>
<th data-tablesaw-sortable-col>Movie Title</th>
<th id="third" data-tablesaw-sortable-col>Year</th>
<th data-tablesaw-sortable-col><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th>Reviews</th>
<th data-tablesaw-sortable-col data-sortable-numeric>Box Office</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
<td>1941</td>
<td>100%</td>
<td>74</td>
<td>$2M</td>
</tr>
<tr>
<th>1</th>
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">citizen kane</a></td>
<td>1941</td>
<td>100%</td>
<td>74</td>
<td>$1M</td>
</tr>
<tr>
<th>1.2</th>
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">citizen blane</a></td>
<td>1941</td>
<td>100%</td>
<td>74</td>
<td>$12M</td>
</tr>
<tr>
<th>1.3</th>
<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">citizen Lane</a></td>
<td>1941</td>
<td>100%</td>
<td>74</td>
<td>$4.2M</td>
</tr>
<tr>
<th>2</th>
<td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
<td>1942</td>
<td>97%</td>
<td>64</td>
<td>$1M</td>
</tr>
<tr>
<th>3</th>
<td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
<td>1972</td>
<td>97%</td>
<td>87</td>
<td>$1M</td>
</tr>
<tr>
<th>4</th>
<td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
<td>1939</td>
<td>96%</td>
<td>87</td>
<td>$1M</td>
</tr>
<tr>
<th>5</th>
<td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
<td>1962</td>
<td>94%</td>
<td>87</td>
<td>$1M</td>
</tr>
<tr>
<th>6</th>
<td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove ...</a></td>
<td>1964</td>
<td>92%</td>
<td>74</td>
<td>$1M</td>
</tr>
<tr>
<th>7</th>
<td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
<td>1967</td>
<td>-91%</td>
<td>122</td>
<td>$1M</td>
</tr>
<tr>
<th>8</th>
<td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
<td>1939</td>
<td>+90%</td>
<td>72</td>
<td>$1M</td>
</tr>
<tr>
<th>9</th>
<td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
<td>1952</td>
<td>89%</td>
<td>85</td>
<td>$1M</td>
</tr>
<tr>
<th>9</th>
<td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
<td>1952</td>
<td>-89%</td>
<td>85</td>
<td>$1M</td>
</tr>
<tr>
<th>10</th>
<td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
<td>2010</td>
<td>84%</td>
<td>78</td>
<td>$1M</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

View File

@@ -0,0 +1,207 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="../../dist/tablesaw.css">
<script src="../../dist/dependencies/jquery.js"></script>
<script src="../../dist/tablesaw.js"></script>
<script src="../../dist/tablesaw-init.js"></script>
</head>
<body>
<br/>
<br/>
<br/>
<br/>
<!-- <table class="table-saw tablesaw tablesaw-swipe" data-mode="swipe" style="margin:0 auto;"> -->
<table class="tablesaw" data-tablesaw-mode="swipe" style="margin:0 auto;">
<thead>
<tr>
<th data-tablesaw-priority="persist"></th>
<th class="text-center">
<a href="#"><span class="primary" data-icon="F" style="float:right;top:5px;right:5px; font-size:1.2em;"></span></a>
<br>
<img src="http://placehold.it/100x100&text=1">
<br>
<h5 class="item-name-table">Diamond Solitaire Ring &frac12; ct. Princess-cut, 14k White Gold</h5>
<small class="small">In Stock, Online Only</small>
<h5>$4,299.99</h5>
<br>
<div class="row">
<div class="small-6 column">
<span class="button expand secondary">Add to Wishlist</span>
</div>
<div class="small-6 column">
<span class="button expand">Add to Cart</span>
</div>
</div>
</th>
<th class="text-center">
<a href="#"><span class="primary" data-icon="F" style="float:right;top:5px;right:5px; font-size:1.2em;"></span></a>
<br>
<img src="http://placehold.it/100x100&text=1">
<br>
<h3 class="item-name-table">Le Vian Necklace 1 &frac78; ct tw Diamonds 14k Vanilla Gold</h3>
<small class="small">In Stock, Online Only</small>
<h5>$5,299.99</h5>
<br>
<div class="row">
<div class="small-6 column">
<span class="button expand secondary">Add to Wishlist</span>
</div>
<div class="small-6 column">
<span class="button expand">Add to Cart</span>
</div>
</div>
</th>
<th class="text-center">
<a href="#"><span class="primary" data-icon="F" style="float:right;top:5px;right:5px; font-size:1.2em;"></span></a>
<br>
<img src="http://placehold.it/100x100&text=1">
<br>
<h3 class="item-name-table">Diamond Earrings &frac34; ct tw Round-cut 14K White Gold</h3>
<small class="small">In Stock, Online Only</small>
<h5>$2,299.99</h5>
<br>
<div class="row">
<div class="small-6 column">
<span class="button expand secondary">Add to Wishlist</span>
</div>
<div class="small-6 column">
<span class="button expand">Add to Cart</span>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<!-- <tr class="head">
<th>Product Information</th>
<th></th>
<th></th>
<th></th>
</tr> -->
<tr>
<td>Product Information</td>
<td>1</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Product Information</td>
<td>1</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Product Information</td>
<td>1</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Product Information</td>
<td>1</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Product Information</td>
<td>1</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Product Information</td>
<td>1</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Product Information</td>
<td>1</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Product Information</td>
<td>1</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Product Information</td>
<td>1</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Product Information</td>
<td>1</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Product Information</td>
<td>1</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Product Information</td>
<td>1</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Product Information</td>
<td>1</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Product Information</td>
<td>1</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Product Information</td>
<td>1</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Product Information</td>
<td>1</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Product Information</td>
<td>1</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Product Information</td>
<td>1</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Product Information</td>
<td>1</td>
<td>2</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>