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

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
0
micro_learner
Asked:
micro_learner
  • 2
2 Solutions
 
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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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