« [Tip] How to run multiple instances of Servoy from within the same directory on Mac OSX | Main | [Tip] How to run multiple instances of Servoy (Windows) »
May 26, 2005
[Tip] Fancy table borders in HTML
by Robert Ivens
ROCLASI Software Solutions
As you probably know you can use HTML formatting in Servoy fields when set to HTML_AREA.
Ever tried to use borders in your HTML tables using the regular border property? Quite a display of beauty isn't it?
If you are like me and have a different taste for these borders then here is a way to do that.
Lets call it the table-in-table approach. Because that's what it is.
<html>
<body>
<table cellpadding=1>
<tr>
<td bgcolor=#000000>
<table>
<tr>
<td width=100 height=100 align=center bgcolor=#ffffff>
Your data
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
This will get you the following result:
By changing the cellpadding in the outer table you control the width of the border.
Well this takes care of the outer border of a table. Now what if you also wanted to use borders between cells, columns or rows?
If you already played around with this then you know there are some problems with making thin lines.
Let me demonstrate this:
<html>
<body>
<table cellpadding=0>
<tr>
<td>data 1.1</td>
<td width=1 bgcolor=#000000></td>
<td>data 1.2</td>
</tr>
<tr>
<td colspan=3 height=1 bgcolor=#000000></td>
</tr>
<tr>
<td>data 2.1</td>
<td width=1 bgcolor=#000000></td>
<td>data 2.2</td>
</tr>
</table>
</body>
</html>
This will get you the following result:
As you can see the lines are pretty thick. Even though we didn't put any text in the table cells we use for the lines the render engine still calculates the size of the used font. So to solve this issue we have to set the font size of those cells to 1 pixel (1 point to be exact).
Lets use CSS styles for that since this will reduce our HTML coding dramatically. In this example I set the font-size of every table cell to 1pt and give it a black background color. And for the data cells I defined a class that sets the font-size to 12px and a white background.
<html>
<head>
<style type=text/css>
td { font-size: 1pt; background-color: #000000;}
td.normal { font-size:12px; background-color: #ffffff }
</style>
</head>
<body>
<table cellpadding=0>
<tr>
<td class=normal>data 1.1</td>
<td width=1></td>
<td class=normal>data 1.2</td>
</tr>
<tr>
<td colspan=3 height=1></td>
</tr>
<tr>
<td class=normal>data 2.1</td>
<td width=1></td>
<td class=normal>data 2.2</td>
</tr>
</table>
</body>
</html>
This will get you the following result:
Be aware that the HTML engine used in Servoy remembers CSS styles in a field so when you try to render other HTML without CSS styles you can have unexpected results. So when you start using CSS styles in HTML you should use it all the time (at least for that field/session).
Also be aware that some regular HTML properties have different results on different platforms. For instance the bgcolor property in a table tag works fine on Mac OS X but doesn't under Windows in Servoy.
So I encourage you to test your HTML code on several platforms when possible.
But when you get the hang of things you can do neat things like this:
| Posted by Robert Ivens on May 26, 2005 at 07:24 PM in Tips | Permalink
Comments
EXCELLENT TIPS! Are you making your calendar solution a module for use by others? It's really nice looking!
Thanks for taking the time to share your tips!
Bob Cusick
Servoy
Posted by: Bob Cusick | May 27, 2005 2:28:46 PM
Great that you like it!
Yes, the plan is to make it a module so it can be used in other, third party, solutions.
Posted by: Robert Ivens | May 27, 2005 3:13:28 PM
