• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 269
  • Last Modified:

Titled Borders in HTML?

Hello everyone,

I was wondering if there is any way to have a titled border in HTML without using Java.

I like the titled border in java, however, I just want it for HTML without using any applets at all.

Thanks in advance,
--=mabait=--
0
Mabait
Asked:
Mabait
  • 9
  • 4
  • 2
1 Solution
 
a.marshCommented:
I don't really understand what you mean by "title border"?

Is there an example you can point me to?

:o)

Ant
0
 
MabaitAuthor Commented:
This a site for Java that has it.

http://www.cz3.nus.edu.sg/docs/java/uiswing/misc/border.html

Go down until the screenshot with the Titled tab is highlighted.

Thanks.
0
 
a.marshCommented:
Ahh!!

I've done a similar kind of thing before.

There are a number of ways of implementing it - the way I have done it before is using tables and images.

The border is essentially made up of different images.

In fact take a look at:

http://www.cretins.co.uk/

Forget the java applet, but look at the border - basically it is exactly what you are after except the title is at the bottom and not the top - but that is easy to change!

And the beauty of it is that the "border" will resize itself correctly no matter what you put in the middle of it.

:o)

Ant
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
a.marshCommented:
Take a look at that - when I get home later I can put another example together for you if you wish, which gives you exactly what you are after.

:o)

Ant
0
 
MabaitAuthor Commented:
Yes, please do put another example.  I was thinking that there was another way of doing it.  So I take it the text shown as the title is an image too?

It there a way to compose it so that the title is not an image, but rather text?

Thanks again.
0
 
a.marshCommented:
Yes you can do it as text - that's something I'll put together in the example for you.

Unfortunately I don't have any code to hand right now - I need to wait until I get home in a couple of hours.....is that ok?

:o)

Ant
0
 
a.marshCommented:
Just so you know, you can easily give a title a caption (but without it actually being within the border e.g.

<table>
<caption>title here</caption>
<tr><td>test</td><td>test</td></tr>
</table>

:o)

Ant
0
 
a.marshCommented:
0
 
COBOLdinosaurCommented:
<!-- Are you looking for something like this:
-->

<HTML>
<HEAD>
   <TITLE>   titled table  </TITLE>

</head>
<body>
   <TABLE WIDTH=300 BORDER=0 cellpadding=0 cellspacing=0
       style="position:absolute;left:150;top:5;z-index:25">
      <TR>
         <TD bgcolor="aqua" WIDTH=300 align="center" valign="top">
              THIS IS A TITLE </TD>    
      </TR>
   </TABLE>
   <TABLE WIDTH=600 BORDER=5 style="position:absolute;left:5 top:10;z-index:5">
      <TR>
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
      </TR><TR>
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
      </TR><TR>
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
      </TR><TR>
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
      </TR>
      <TR>
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
      </TR><TR>
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
      </TR><TR>
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
      </TR><TR>
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
         <TD WIDTH=150>   content 1-1 </TD>    
      </TR>
</BODY>
</HTML>
<!--
I tested it with IE 5.  I think it should be okay for Netscape4 and 6.

It needs absolute absolute positioning which limits it, but other than
that you can format it just abount any way you want.

The big advantage is that it is all straight HTML.

HTH

Cd&
-->
0
 
a.marshCommented:
That's one solution - but I still much refer doing things the way I've shown already.

:o)

Ant
0
 
COBOLdinosaurCommented:
It's on my HD from the last time I answer this.  Might as well post it.

Cd&
0
 
a.marshCommented:
;o)

Ant
0
 
MabaitAuthor Commented:
Yea sure, I can wait for your example a.marsh.
0
 
a.marshCommented:
Okay, here you go:

http://www.btinternet.com/~ant.marsh/ee/table_border_title/border.html

Here is the HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>table border title</title>
</head>
<body>
<table align="center" border="0" width="400" cellpadding="0" cellspacing="0">
<tr>
  <td width="28"><img src="border/topleft.gif" width="28" height="27" alt="" /></td>
  <td width="112" style="background-image: url(border/top.gif);"><img src="border/clear.gif" width="112" height="27" alt="" /></td>
  <td width="120" align="center">title here</td>
  <td width="112" style="background-image: url(border/top.gif);"><img src="border/clear.gif" width="112" height="27" alt="" /></td>
  <td width="28"><img src="border/topright.gif" width="28" height="27" alt="" /></td>
</tr>
<tr>
  <td style="background-image: url(border/left.gif);"><img src="border/clear.gif" width="28" height="15" alt="" /></td>
  <td colspan="3">text text text text text text text text text text text text text text text
 text text text text text text text text text text text text text text</td>
  <td style="background-image: url(border/right.gif);"><img src="border/clear.gif" width="28" height="15" alt="" /></td>
</tr>
<tr>
  <td><img src="border/bottomleft.gif" width="28" height="27" alt="" /></td>
  <td colspan="3" style="background-image: url(border/bottom.gif);">&nbsp;</td>
  <td><img src="border/bottomright.gif" width="28" height="27" alt="" /></td>
</tr>
</table>
<table align="center" border="0" width="70%" cellpadding="0" cellspacing="0">
<tr>
  <td><img src="border/topleft.gif" width="28" height="27" alt="" /></td>
  <td width="50%" style="background-image: url(border/top.gif);"><img src="border/clear.gif" width="112" height="27" alt="" /></td>
  <td align="center">&nbsp;title&nbsp;here&nbsp;</td>
  <td width="50%" style="background-image: url(border/top.gif);"><img src="border/clear.gif" width="112" height="27" alt="" /></td>
  <td><img src="border/topright.gif" width="28" height="27" alt="" /></td>
</tr>
<tr>
  <td style="background-image: url(border/left.gif);"><img src="border/clear.gif" width="28" height="15" alt="" /></td>
  <td colspan="3">text text text text text text text text text text text text text text text
 text text text text text text text text text text text text text text</td>
  <td style="background-image: url(border/right.gif);"><img src="border/clear.gif" width="28" height="15" alt="" /></td>
</tr>
<tr>
  <td><img src="border/bottomleft.gif" width="28" height="27" alt="" /></td>
  <td colspan="3" style="background-image: url(border/bottom.gif);">&nbsp;</td>
  <td><img src="border/bottomright.gif" width="28" height="27" alt="" /></td>
</tr>
</table>
</body>
</html>


The code above:

1 - Shows you how to use the table with fixed widths

2 - Show you how to use the table with percentage widths

3 - is 100% XHTML 1.0 compliant, which you can check here:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.btinternet.com%2F%7Eant.marsh%2Fee%2Ftable_border_title%2Fborder.html;doctype=Inline


Any questions, please ask.

:o)

Ant
0
 
MabaitAuthor Commented:
Very nice, thanks.

I tried and it works great.
0

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 9
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now