Библиотека Javascript. SE@RCHER

смотреть оглавление

примерразмер кода

<html>
<head>
<title>Линк просмотра кода заключенного в тег PRE</title> 
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<script type="text/javascript">
<!--
// Jeff
// www.huntingground.freeserve.co.uk

offsetX=30
offsetY=100

last_id=""

function frameData(id,data){
displayEl=document.getElementById("display")
if(id!=last_id){
displayEl.style.left=document.body.clientWidth-parseInt(displayEl.style.width)-offsetX
displayEl.style.top=document.getElementById(id).offsetTop+offsetY
displayEl.style.display = "block"
last_id=id
}
else{
displayEl.style.display = "none"
last_id=""
}

tempStr=document.getElementById(data).innerHTML

pattern1 = new RegExp ('<', 'g')
pattern2 = new RegExp ('>', 'g')

tempStr=tempStr.replace(pattern1,'<')
tempStr=tempStr.replace(pattern2,'>')

displayEl.innerHTML=tempStr

//self.scrollTo(0,parseInt(container.style.top)-100)

}

// -->
</script>

</HEAD>
<BODY>
<h1><span>Styling a Table</span></h1>
<div id="display" style="position:absolute;width:315px;height:90px;display:none"></div>

<P>This first example shows a table using a standard border to set 1.
<center><a href="#null" id="lnk1" onclick="frameData(this.id,'d1');return false">View Example 1</a></center>
<pre>
<div id="d1">
<table border="1" height="100px">
<tbody>
<tr>
<td>Cell 1 content</td>
<td>Cell 2 content</td>
<td>Cell 3 content</td>
</tr>
<tr>
<td>Cell 4 content</td>
<td>Cell 5 content</td>
<td>Cell 6 content</td>
</tr>
</tbody>
</table>
</div>
</pre>

<P>Applying a border colour using the table attribute bordercolor gives you
<center><a href="#null" id="lnk2" onclick="frameData(this.id,'d2');return false">View Example 2</a> </center>
<pre>
<div id="d2">
<table border="1" height="100px" bordercolor="red">
<tbody>
<tr>
<td>Cell 1 content</td>
<td>Cell 2 content</td>
<td>Cell 3 content</td>
</tr>
<tr>
<td>Cell 4 content</td>
<td>Cell 5 content</td>
<td>Cell 6 content</td>
</tr>
</tbody>
</table>
</div>
</pre>

<P>With the tables border set to zero a border is applied using css. You will notice that there are no cell borders.
<center><a href="#null" id="lnk3" onclick="frameData(this.id,'d3');return false">View Example 3</a> </center>
<pre>
<div id="d3">
<table border="0" style="height:100px;border:1px solid blue">
<tbody>
<tr>
<td>Cell 1 content</td>
<td>Cell 2 content</td>
<td>Cell 3 content</td>
</tr>
<tr>
<td>Cell 4 content</td>
<td>Cell 5 content</td>
<td>Cell 6 content</td>
</tr>
</tbody>
</table>
</div>
</pre>

<P>If you set the tables border and also apply a border using css this is what you see.<br>
In Mozilla the tables bordercolor is not applied.
<center><a href="#null" id="lnk4" onclick="frameData(this.id,'d4');return false">View Example 4</a> </center>
<pre>
<div id="d4">
<table border="1" bordercolor="red" style="height:100px;border:1px solid blue">
<tbody>
<tr>
<td>Cell 1 content</td>
<td>Cell 2 content</td>
<td>Cell 3 content</td>
</tr>
<tr>
<td>Cell 4 content</td>
<td>Cell 5 content</td>
<td>Cell 6 content</td>
</tr>
</tbody>
</table>
</div>
</pre>

<P>You could apply a different colour, width, or type to each of the
tables sides by using the individual border attributes.<BR>
<b>border-top:</b>2px solid green
<b>border-right:</b>4px solid yellow
<b>border-bottom:</b>6px solid red
<b>border-left:</b>8px solid border
<center><a href="#null" id="lnk5" onclick="frameData(this.id,'d5');return false">View Example 5</a> </center>
<pre>
<div id="d5">
<table border="0" style="height:100px;border-top:2px solid green;border-right:4px solid yellow;
border-bottom:6px solid red;border-left:8px solid blue">
<tbody>
<tr>
<td>Cell 1 content</td>
<td>Cell 2 content</td>
<td>Cell 3 content</td>
</tr>
<tr>
<td>Cell 4 content</td>
<td>Cell 5 content</td>
<td>Cell 6 content</td>
</tr>
</tbody>
</table>
</div>
</pre>

<P>As with the table each cell can have its own border
<center><a href="#null" id="lnk6" onclick="frameData(this.id,'d6');return false">View Example 6</a></center>
<pre>
<div id="d6">
<table border="0" style="height:100px">
<tbody>
<tr>
<td style="border:1px solid blue">Cell 1 content</td>
<td style="border:1px solid blue">Cell 2 content</td>
<td style="border:1px solid blue">Cell 3 content</td>
</tr>
<tr>
<td style="border:1px solid blue">Cell 4 content</td>
<td style="border:1px solid blue">Cell 5 content</td>
<td style="border:1px solid blue">Cell 6 content</td>
</tr>
</tbody>
</table>
</div>
</pre>

<P>So now you could have the table and its cells with individual borders
<center><a href="#null" id="lnk7" onclick="frameData(this.id,'d7');return false">View Example 7</a></center>
<pre>
<div id="d7">
<table border="0" style="height:100px;border:2px solid white">
<tbody>
<tr>
<td style="border:1px solid green">Cell 1 content</td>
<td style="border:1px solid black">Cell 2 content</td>
<td style="border:1px solid yellow">Cell 3 content</td>
</tr>
<tr>
<td style="border:1px solid red">Cell 4 content</td>
<td style="border:1px solid black">Cell 5 content</td>
<td style="border:1px solid blue">Cell 6 content</td>
</tr>
</tbody>
</table>
</div>
</pre>

<P>As well as colouring the borders you can also add a background color and/or images
<center><a href="#null" id="lnk8" onclick="frameData(this.id,'d8');return false">View Example 8</a></center>
<pre>
<div id="d8">
<table border="0" style="height:100px;border:2px solid white;background-color:gold">
<tbody>
<tr>
<td>Cell 1 content</td>
<td>Cell 2 content</td>
<td>Cell 3 content</td>
</tr>
<tr>
<td>Cell 4 content</td>
<td>Cell 5 content</td>
<td>Cell 6 content</td>
</tr>
</tbody>
</table>
</div>
</pre>

<P>Either to the entire table or individual cells
<center><a href="#null" id="lnk9" onclick="frameData(this.id,'d9');return false">View Example 9</a></center>
<pre>
<div id="d9">
<table border="0" style="height:100px;border:2px solid white">
<tbody>
<tr>
<td style="background-color: green">Cell 1 content</td>
<td style="background-color: silver">Cell 2 content</td>
<td style="background-color: yellow">Cell 3 content</td>
</tr>
<tr>
<td style="background-color: red">Cell 4 content</td>
<td style="background-color: white">Cell 5 content</td>
<td style="background-color: blue">Cell 6 content</td>
</tr>
</tbody>
</table>
</div>
</pre>

<P>With images
<center><a href="#null" id="lnk10" onclick="frameData(this.id,'d10');return false">View Example 10</a></center>
<pre>
<div id="d10">
<table border="0" style="height:120px;border:4px solid white;padding:10px;background-color:#800000">
<tbody>
<tr>
<td style="background-image:url(../imagery/image000.jpg)">Cell 1 content</td>
<td style="background-image:url(../imagery/image001.jpg)">Cell 2 content</td>
<td style="background-image:url(../imagery/image003.jpg)">Cell 3 content</td>
</tr>
<tr >
<td style="border:1px solid white;background-image:url(../imagery/image004.jpg)">Cell 4 content</td>
<td style="border:1px solid white;background-image:url(../imagery/image006.jpg)">Cell 5 content</td>
<td style="border:1px solid white;background-image:url(../imagery/image031.jpg)">Cell 6 content</td>
</tr>
</tbody>
</table>
</div>
</pre>

<P>Note.<br>
While many CSS attibutes can be applied to the table and its cells the margin attribute does not work on the table cells so cellspacing still has to be used.

<P>All the above examples use inline styles, if you only have one table in your page or you want all the tables in the page to be the same you can create style rules and embed them in the head section.

table{
border:1px solid red;
}

td{
border:1px solid blue;
}

</style>
</pre>

<style>

#table1{
border:1px solid red;
}

#table1 td{
border:1px solid blue;
}

</style>

<table id="table1" border="0">
<tbody>
<tr>
<td>Cell 1 content</td>
<td>Cell 2 content</td>
<td>Cell 3 content</td>
</tr>
<tr>
<td>Cell 4 content</td>
<td>Cell 5 content</td>
<td>Cell 6 content</td>
</tr>
</tbody>
</table>

<P>To style individual tables give them an ID and create ID selector rules to suit

#table1{
border:1px solid green;
}

#table1 td{
border:1px solid yellow;
}

#table2{
border:1px solid red;
}

#table2 td{
border:1px solid blue;
}

</style>

<table border="0" id="table1>
<tbody>
<tr>
<td>Cell 1 content</td>
<td>Cell 2 content</td>
</tr>
<tr>
<td>Cell 3 content</td>
<td>Cell 4 content</td>
</tr>
</tbody>
</table>

<table border="0" id="table2>
<tbody>
<tr>
<td>Cell 1 content</td>
<td>Cell 2 content</td>
</tr>
<tr>
<td>Cell 3 content</td>
<td>Cell 4 content</td>
</tr>
</tbody>
</table>
</pre>

</BODY>
</HTML>