SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    table border style help...

    Hia, first time poster
    looks like a really helpfull board.

    I've got a question
    i read in a magazine today that you can have a "dashed" border style, how is this done?
    all i could tell was that i was css, but that's it, hope someone can help me out here

    thanks in advance.

  2. #2
    Alt+F4= User Control ;-) rabmurdy's Avatar
    Join Date
    Mar 2002
    Location
    Ecosse
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <code>

    <style type="text/css">
    .top {
    border-style: dashed;
    border-color: #000000;
    border-top-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 0px
    }
    </style>

    Put the above in the <head>, and the rest where you want the table.

    <table border="0">
    <tr><td class="top">
    Top Half: bordered.
    </td></tr>
    <tr><td style="border: 0px">
    Bottom Half: no borders
    </td></tr>
    </table>


    </code>

    If you want to change the code around you can get the effect all round.


    Rab
    "If something is too hard,give it up. The moral my boy is too never try anything"
    "Just because I don't care doesn't mean I don't understand"

  3. #3
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is pretty easy actually

    Code:
    element {
      border-width:1px;
      border-style:dashed;
      border-color:#000;
      }
    Instead of dashed you can also have:

    • dotted
    • solid
    • double
    • groove
    • ridge
    • inset
    • outset


    You can read more at w3schools.com

  4. #4
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wizardx8 : thanks i think you have exactly what i was looking for, now just 1 thing, do i just add that in between the "<table>" somewhere?

  5. #5
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope, if you want it for the table, try the following:

    Code:
    <html>
    <head>
    <style type="text/css">
    <!--
    table {
      border-width:1px;
      border-style:dashed;
      border-color:#000;
      }
    -->
    </style>
    </head>
    <body>
    <table>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </table>  
    </body>
    </html>
    Now all of your table will have the dashed, 1 pixel black border...

    Test it out and let me know how you go

  6. #6
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, works perfectly, but i have yet another problem hehe, it's not all tables i want to be dashed, it's a table inside another table, what do i write in the table options so it doesen't get dashed?

    thanks for all the help!

  7. #7
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, to do this you use classes in CSS, these differentiate between elements...

    So:

    Code:
    <html>
    <head>
    <style type="text/css">
    <!--
    .dashed table {
      border-width:1px;
      border-style:dashed;
      border-color:#000;
      }
    -->
    </style>
    </head>
    <body>
    <table>
      <tr>
        <td>
          <table class="dashed">
            <tr>
              <td>Cell</td>
              <td>Cell</td>
              <td>Cell</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </table>  
    </body>
    </html>
    Now, the table that has the class "dashed" will have the borders, whilst the other table in the page will not...

  8. #8
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you SO much man!!



    edit: didn't work... damn
    Last edited by Dwal; Sep 3, 2002 at 05:04.

  9. #9
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i even used the same html as you, and nothing maybe i have a way around it tho thanks for the help

  10. #10
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmmmmm, not sure why that did not work, working on a better example now, and testing it this time

  11. #11
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, my bad... gtting myself confused over syntax... LOL

    Replace:

    .dashed table {

    with:

    table.dashed {

    And it will work

  12. #12
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you'r my new hero!
    thanks so much for all your help man!!

  13. #13
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problems, I have only just really got the hang of CSS myself so happy to share the knowledge...

  14. #14
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks tricky but i guess if you get the hang of it it's pretty straight forward
    I just *sigh* need to learn

  15. #15
    SitePoint Enthusiast
    Join Date
    Jan 2002
    Location
    Quezon City, Philippines
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm looking at the code that "rabmurdy" has posted. Does that mean that create a table with obly a border on both sides and none at the top and the bottom of the table?

  16. #16
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, it has a border at the top, left and right but none at the bottom...

    Read more about CSS borders here:

    http://www.w3schools.com/css/css_border.asp


  17. #17
    SitePoint Enthusiast
    Join Date
    Jan 2002
    Location
    Quezon City, Philippines
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thanks for the link Wizardx8!
    Last edited by ibm586; Sep 10, 2002 at 02:51.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •