OJPeters Busness Applications Consultants with the most creative ideas

Little CSS implementations can save you some time, make you some money and potentially increase click through rate on your website. This tip is not only for webmasters but also to blog enthusiasts who want to improve user experience on their web properties. Yes your website is your property.

While trying to implement something for my client, I came across the need to make every table row clickable. It sounded simple but when I searched and searched, I saw lots of suggestions but most of them were either complicated or requires that you write JavaScript codes. You can probably do this with JQuery too but again its JavaScript

My tip below confirms that that you can do this by adding a few lines of CSS.

Here is what I needed to do:

I wanted each row once clicked to go to its own URL. This would have been easier if  each  <a href=”#”> can be wrapped around a <tr> . Unfortunately, this is not allowed

The tools that  I used were <span> and display: block; features in html .

Step 1:

Create a CSS file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<style>

#premlist {

font-size:36pt;

display:block;

width:100%;

}

#premlist .a{

}

</style>

Step 2:

Create a DIV to hold the elements. You will notice that the key driver of the css element #premlist is the display:block

What this does is to give you a box that you can use to wrap any  number of elements that you might want to enclose.

The DIV will look like this

1

<div id=”#premlist”> My  Ring tones</div>

Step3:

Make the Products inside the div element click able:

1

<div id=”#premlist”><a href=”#”> My  Ring tones<.a></div>

Step 4:

Add a <span> tag, it is allowed to enclose a <span> tag inside <a href=#> tag.

The HTML will now look like:

1

<div id=”#premlist”><a href=”#”> <span>My  Ring tones</span></a></div>

 Step 5:

I am hoping that you are not lost so far. You can now create your normal table and enclose it in span to create your columns as required.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div id=”#premlist”>

<a href=”#”>

<span>

<table>

<tr><td>My  Ring tones</td><td>Price</td>/tr>

<tr><td>Beauty Products</td><td>Free</td></tr>

<tr><td>Free Audio tones</td><td>Free</td></tr>

</table>

</span>

</a>

</div>

I hope this tutorial saves someone’s time especially those who are shy away from adding too many JavaScripts on the page.

You can see it in action below: