42 users online (1 members and 41 guests)  

Thread: rounded tables?


  Results 1 to 4 of 4

Related

  1. Help with Tables!!!!    Forum: HTML Forum
    Replies: 1
  2. Tables in css can this be done    Forum: CSS Forum
    Replies: 3
  3. Replies: 2
  4. Replies: 2
  5. help with tables!    Forum: HTML Forum
    Replies: 2
  1. #1
    Luzer's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Jun 2003
    Posts
    35

    rounded tables?

    how do you make the tables rounded on the sides. im thinking you use an .gif? how would i go about doing it?

    tna

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Hiya,

    yes you use an image to do this.

    Easiest way to see an example is to find one you like on the web, then right-click and choose View Source.

    Then you will see how its done..
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  3. #3
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440

    Talking

    Here's a couple of tutorials for you:
    http://www.htmlgoodies.com/tutors/roundcorners.html
    and
    http://www.yourhtmlsource.com/tables/roundedcorners.html

  4. #4
    Squeakypants's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2003
    Posts
    23
    Quote Originally Posted by Luzer
    how do you make the tables rounded on the sides. im thinking you use an .gif? how would i go about doing it?

    tna
    It's pretty simple. There are two ways you can go about this, both using invisible tables. All that is, is a table without a border.

    Invisible tables:
    This is pretty simple, but in case you don't know, this is it:
    HTML Code:
    <table border="0">
    <tr>
    <td>
    Text
    </td>
    </tr>
    </table>
    Now in case you don't understand this, all it is a table with one row/column, and the border size set to 0.

    Method 1: background:
    It is a little tricky, but you can just have it so that the background is a color stretched out with the outline of the table rounded. Then you just position the table through line breaks and paragraph tags.

    Method 2: layers:
    Layers are great. They allow you to both position something without tables, and put one thing on top of another. In this case you would have the image of the border where ever you want the table. Then you would use this code to position a layer with the table over the image.
    HTML Code:
    <div id="Layer1" style="position:absolute; left:10px; top:14px; width:150px; height:150px; z-index:1">
      <p>Text here </p>
    </div>
    <img src="" alt="" name="blah" width="150" height="150"  />
    Change the top/left amouths to change where on the page you want it, and the width/height to change how big you want the layer. You also have to put this into the head:
    HTML Code:
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    </script>
    I hope this helps you out!



Tags for this Thread