Plug-in tools, to know table borders in IE Browser

posted in: Css | 0

Summary:

Plug-in tools, to know table borders in IE Browser

1)  Introduction
2)  Tools (css files)
3)  Process
4)  Output
5)  Usage

1) Introduction :
These tools are IE based and written in css coding and specific to IE. These files are useful for web design alignments for  all the  platform(Java/PHP/.NET/designer) developers.

2) Tools (css files) :

I)TableInline.css
TABLE {border: 4px solid purple !important; margin: 5px !important;
border-collapse: separate !important; border-spacing: 1px !important; empty-cells: show !important;}
TH {border: 1px solid blue !important; padding: 3px !important;}
TD {border: 1px solid red !important; padding: 3px !important;}

II)TableOutline.css
TD IMG, TH IMG {opacity: 25% !important;}
IMG {border: 5px solid white !important;}
IMG[alt] {border-width: 0 !important;}

TABLE {border: 4px solid purple !important; margin: 5px !important;
border-collapse: separate !important; border-spacing: 1px !important; empty-cells: show !important;}
TH {border: 1px solid white !important; padding: 3px !important;}
TD {border: 1px solid white !important; padding: 3px !important;}

3) Process :

Save the above two css files.

How to apply on browser:-
Open IE browser
——->Click on Tools on Tool Bar
——->Click on Internet options
——->Click on Accessbility(in General)
——->Check the radio button of User Style Sheet
——->Click on Browse button
——->Select tool kits (css files)
——->click on Ok button

4) Output :
I) shows table structures with colors.
II) when we apply ‘”TableInline.css” file, the output shows table borders along with columns and rows.
III) when we apply “TableOutline.css” file, the output shows table border only.

5) Usage :
Main use of these tools are  to identify table column,row structure/borders in the web page.  While developing we can  fix alignment issues using this tool. It is very dynamic tool, which we can apply in our project sites and other sites.

For example : open www.google.com, apply these tools see what happens..?

Next Post

Leave a Reply