Announcement

Collapse
No announcement yet.

CSS cell-spacing?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS cell-spacing?

    Is it possible to do cellspacing with CSS? If so, how?

  • #2
    Hi Norush

    Try this out:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>index</title>
    <style type="text/css">
      table{width:300px;}
      td{border:1px solid #000000;margin:10px;padding:5px}
    </style>
    </head>
    <body>
    <table summary="">
      <tr><td>a</td><td>b</td><td>c</td></tr>
      <tr><td>d</td><td>e</td><td>f</td></tr>
      <tr><td>g</td><td>h</td><td>i</td></tr>
    </table>
    </body>
    </html>
    Later
    Keith

    Webxpertz Community for Webmasters & Developers

    Comment


    • #3
      There is a diffence between cellspacing and cellpadding... cellspacing and cellpadding are both available as an attribrute of the table element...

      Comment


      • #4
        Yes? And?
        Later
        Keith

        Webxpertz Community for Webmasters & Developers

        Comment


        • #5
          Hmm yea I was just wondering if there's anyway to do cellspacing with CSS... not cellpadding...

          Comment


          • #6
            Ive just searched at W3C and i dont belive it can be done via css

            Comment


            • #7
              You now have me totally confused??

              Your first question: Is it possible to do cellspacing with CSS? If so, how?

              I gave you a tested example.

              Your next question: Hmm yea I was just wondering if there's anyway to do cellspacing with CSS... not cellpadding...

              The example provided does both
              Later
              Keith

              Webxpertz Community for Webmasters & Developers

              Comment


              • #8
                Originally posted by diades
                You now have me totally confused??

                Your first question: Is it possible to do cellspacing with CSS? If so, how?

                I gave you a tested example.

                Your next question: Hmm yea I was just wondering if there's anyway to do cellspacing with CSS... not cellpadding...

                The example provided does both
                Diades, I must say you surprised me... At my site I wrote that there isn't any CSS replacement to the cellspacing attribute, and then you're coming with a clever example.. (Here - http://faqs.websitefaq.com/?c=2&q=103)

                So I ran to check it, and it's looking fine... But it's not working!
                You cannot change anything... Try to put 0, 1 ,or even 100 instead of the 10px margin - Nothing! You can even wipe the attribute out, and the look will remain the same... Because it's using the default two pixels cellspacing, and not because of anything too smart... Checked it both in IE6 and Opera, and even Mozilla, just to be sure, and I have no doubt about it now:

                There isn't any CSS replacement for the HTML attribute "cellspacing". Use HTML in this case.

                Thanks for reading,
                Ronny.

                Comment


                • #9
                  You can't use cellspacing, you have to use <div>'s with margin

                  Check the utopia books from sitepointforum for details Great book!

                  Comment


                  • #10
                    Try a mozilla only solution then:
                    Code:
                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                    <html xmlns="http://www.w3.org/1999/xhtml">
                      <head>
                        <title>index</title>
                        <style type="text/css">
                        /*<![CDATA[*/
                          table{width:300px;}
                          tr{height:30px;}
                          table {border:1px solid transparent;border-collapse: separate; border-spacing: 100px 50px;background-color:transparent }
                          td{border:1px solid #000000;width:70px;color:#000000;background-color:#ffffff;padding:15px;}
                        /*]]>*/
                        </style>
                      </head>
                      <body>
                        <table summary="" cellpadding="0" cellspacing="0">
                          <tr><td>a</td><td>b</td><td>c</td></tr>
                          <tr><td>d</td><td>e</td><td>f</td></tr>
                          <tr><td>g</td><td>h</td><td>i</td></tr>
                        </table>
                      </body>
                    </html>
                    Later
                    Keith

                    Webxpertz Community for Webmasters & Developers

                    Comment


                    • #11
                      Therefore using the attribute is the best for now...

                      Comment


                      • #12
                        Cellspacing can be done in CSS, but is not supported by IE, and some other browsers.

                        If you want 0 cellspacing, you may use border-collapse: collapse; in CSS, and that will work in IE also. But if you want a value, you will have to use the cellspacing="" attribute in the table tag.

                        Cellpadding can be done in CSS using padding: xxx;

                        Comment

                        Related Topics

                        Collapse

                        Working...
                        X