Creating Table Rulers - The table ruler's full source code
(Page 4 of 4 )
As I stated in the previous section, below I've listed the full source code of this simple table ruler. You can introduce your own improvements into it if you choose:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example on building a table ruler</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 20pt Arial, Helvetica, sans-serif;
color:#000;
}
table{
width: 60%;
border: 1px solid #000;
border-collapse: collapse;
font: normal 10pt Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}
th{
background: #9cf;
}
th,td{
border: 1px solid #000;
border-collapse:collapse;
padding: 2px;
}
#ruledtable tr:hover,#ruledtable .ruler{
background: #fc0;
}
</style>
<script language="javascript">
// example on implementing table ruler with one table
function displayTableRuler(){
// get ruled table
var table=document.getElementById('ruledtable');
if(!table){return};
// get all <tr> elements of ruled table
var trs=table.getElementsByTagName('tr');
// loop over <tr> elements of ruled table
for(var i=0;i<trs.length;i++){
// display table ruler
trs[i].onmouseover=function(){
this.className='ruler';
}
// remove table ruler
trs[i].onmouseout=function(){
this.className='';
}
}
}
// display table ruler when the web page has been loaded
window.onload=function(){
if(document.getElementById&&document.
getElementsByTagName&&document.createElement){
// display table ruler
displayTableRuler();
}
}
</script>
</head>
<body>
<h1>Example on building a table ruler</h1>
<table id="ruledtable">
<thead>
<tr>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alejandro</td>
<td>Gervasio</td>
<td>alejandro@domain.com</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@domain.com</td>
</tr>
<tr>
<td>Susan</td>
<td>Norton</td>
<td>susan@domain.com</td>
</tr>
<tr>
<td>Marian</td>
<td>Wilson</td>
<td>marian@domain.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Smith</td>
<td>mary@domain.com</td>
</tr>
<tr>
<td>Amanda</td>
<td>Bears</td>
<td>amanda@domain.com</td>
</tr>
<tr>
<td>Jodie</td>
<td>Foster</td>
<td>jodie@domain.com</td>
</tr>
<tr>
<td>Laura</td>
<td>Linney</td>
<td>laura@domain.com</td>
</tr>
<tr>
<td>Alice</td>
<td>Dern</td>
<td>alice@domain.com</td>
</tr>
<tr>
<td>Jennifer</td>
<td>Aniston</td>
<td>jennifer@domain.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Here you have it. That's all the source code that you'll need to get the table ruler working as expected in most modern browsers. But wait a minute! You still haven't seen how this highlighting effect really looks. Take a look at the following picture, which shows the table ruler in action. Here it is:
And to wrap up this introductory tutorial, feel free to tweak all the code samples shown before to acquire a more solid grounding in building a table ruler with CSS and JavaScript.
Final thoughts
In this first chapter of the series, I walked you through creating a simple table ruler by using a combination of CSS and JavaScript. As you saw before, the whole procedure was pretty straightforward, so I guess that you shouldn't have major problems improving its current functionality.
In the forthcoming article, I'll be explaining how to build a table ruler that only uses JavaScript to function correctly; it'll be displayed consistently by most modern browsers as well.
Don't miss the next part!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
