Making the table component look different

Some time you must be wondering, why should I use the same looking Table Component as others. Why can't I have different look. The ideal solution would have been, Sun Java Creator IDE providing a Theme Editor. However, ideal solution seldom exists in the real world. In such situation, it is better to look at other alternatives.

One of the solution is to override the properties of the implicit CSS classes used by the Table Component. But how to find these CSS class names. There are two ways to get hold of these names.

Use the hidden DOM inspector
Use the Table Selectors as expalined in the document Structure of a Theme File

I wanted my table to have a different look than the default theme. I have overriden the following CSS styles in the resources/stylesheet.css. The result was a different looking tabe.

table.Tbl {
   background-color: #ffcc66;
}
caption.TblTtlTxt {
   background-color: #990000;
   background-image: none!important;
   color: #ffffb4;
   font-style: oblique;
   font-weight: bolder
}

.TblHdrTxt {
   background-image: none!important;
}

table.TblLt .TblHdrTxt {
   background-image: none!important;
}

table.Tbl .TblHdrTxt {
   background-image: none!important;
   font-weight: lighter
}

table.Tbl td, table.Tbl th {
   border-color: #ffcc66;
}

table.Tbl th.TblColHdr {
   background-color: #ffcc66;
   border-color: #f2b741
}


table.Tbl a.TblHdrLnk:link, table.Tbl a.TblHdrLnk:visited {
   background-color: #ffcc66;
   background-image: none!important;
   color: #663389;
   font-weight: bold;
}

table.Tbl a.TblHdrImgLnk:link, table.Tbl a.TblHdrImgLnk:visited {
   background-color: #ffcc66;
   background-image: none!important;
   border-color: #f2b741;
}

Dr. Winston Prakash Ph.D.

Personal Website

Making the table component look different