From the Dreamweaver's insert toolbar, select Layout tab and click on table icon.
Create a table with three columns and five rows.
Click OK.
Your table is now added to your document.
Select the table using the properties panel or the Tag Inspector panel add "alter_rows" ID to the table.
Create CSS rules
First we will create a style for the table header row.
1. Click on the New CSS rule button on the CSS Panel and create a class called .tableheader.
2 In the font category add color:#ffffff
3. In the background category add background-color:#000000 and click OK.
Next repeat steps 1 -3 to create two more classes: one for each alternating row.
Name the first class .color_one and give it a color:#000000 and a background-color:#cccccc.
The second class can be called .color_two and have a color:#000000 and a background-color:#eeeeee;
Apply table header style to the first table row
Save your HTML file as 'alter_table.html' and your CSS file as alter_table.css'.
Create Javascript file with alternatecolor function
While Dreamweaver is open, press CTRL+N to bring up a new document dialog box.
Under Category make sure Basic page is selected and double-click on JavaScript.
Blank JavaSript file opens.
Add following code to your JavaScript.
function alternatecolor(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 = "color_one";
}else{
rows[i].className = "color_two";
}
}
}
}
Save the document as alternate_color.js.
JavaScript code breakdown
As you can see this JavaScript code is fairly simple. It contains only one function
that takes a table ID as a parameter.
if(document.getElementsByTagName){
This line ensures compatibility with older browsers
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
In these two lines we are getting table rows based on the table ID parameter
passed to this function, and assigning those table rows to a variable called rows.
Next is a FOR loop that iterates through all rows (rows.lenght). By using modules (%)
operator we are assuring that all rows with even (i) numbers get assigned color_one class
and all odd (i) numbers get assigned color_two class.
Applying JavaScript function to the table
First we need to attach the javasctipt file to our HTML page.
Make sure your HTML page is current working document in Dreamweaver. In the
document window toolbar, click on View Options button and select Head Content.
Head content toolbar displays.
Click anywhere on the Head Content toolbar to activate it. The toolbar turns white.
On the insert toolbar select HTML and click on Script button. This opens a Script dialog box.
Make sure Language field is set to JavaScript. Using a small folder icon add the alternate_color.js file.
Click OK.
Your Head Content toolbar should now include the script icon.
Implementing the function
While your HTML file is still open and active in Dreamwaver, right-click on the <body> tag
located on the Document Window status bar. In the right-click menu select "Quick Tag Editor"
and add onload attribute with following value:
onload="javascript:alternatecolor('alter_rows');
Save your files and while the HTML file is active press F12 to preview.
And we are DONE!
discuss this topic to forum
