TEXT IN TABLE BORDER

Hi I am new to designing in HTML ..(been a Java/Perl programmer throughout)

I was wondering how I can get a Table border with text embedded in it .

Something Like

----------This is the Text-----------


I searched the tutorials online but could not get hold on one that does this ..

Apreciate your help.Thanks
micro_learnerAsked:
Who is Participating?
 
BatalfCommented:
The closest to that is probably the <fieldset> and <legend> tags

example:

<fieldset>
<legend>This is a label</legend>
This is the content
This is the content
This is the content
This is the content

</fieldset>
0
 
BatalfCommented:
btw: You can use

* css if you want to set the size of the group box.
* put a table inside the <fieldset> if you need to display tabular data.

complete example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
     <title>Test</title>
<style type="text/css">
.aGroupBox{ /* CSS rules for the group box - the fieldset is assigned to this class by class="aGroupBox" */
    width:500px;
    height:120px;
}
</style>
</head>
<body>
<fieldset class="aGroupBox">
    <legend>This is a label</legend>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>This is a cell</td>
        </tr>
        <tr>
            <td>This is the content</td>
        </tr>
        <tr>
            <td>This is the content</td>
        </tr>
    </table>
</fieldset>
</body>
</html>        
0
 
RoonaanCommented:
A less clean option would be to absolute position a text div on top of a table border:

<div style="position:relative;">
  <div style="position:absolute;top:-0.5em;left:10px;z-index:100;background:white;padding:0 2px;">My border text</div>
  <table style="border:solid 1px red;width:400px;">
    <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
  </table>
</div>

-r-
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.