Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    Junior Member
    Join Date
    Jan 2009
    Posts
    23
    Member #
    18106
    I'm having a hard time having my cell space between columns be different than my cell space between rows in a table.

    Any ideas?

    Doesn't matter if it's using html or CSS.

    Thanks,
    Neil

  2.  

  3. #2
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    Use the left and right margin and padding options, in CSS. Apply these to the cell. That should work.

    HTML Code:
    <table id="the_table">
    <tr>
    <td class="cell">
    cell content
    </td>
    <td class="cell">
    cell content
    </td><td class="cell">
    cell content
    </td>
    </tr>
    <tr>
    <td class="cell">
    cell content
    </td>
    <td class="cell">
     cell content
     </td><td class="cell">
     cell content
     </td>
    </tr>
    </table>
    Code:
    td.cell
    {
    margin-left: 5px;
    margin-right: 8px;
    }
    May I ask as to why you are using talbes? If you are using them to dispaly tablature data, then that's OK. But if you're using them to layout your site, then that's not a good idea.

  4. #3
    Junior Member
    Join Date
    Jan 2009
    Posts
    23
    Member #
    18106
    Thank you, I was actually just about to reply to my own post because I figured it out on my own. My problem was I had the cellspace attribute in the table tag fighting my CSS. All better now.

    Yes I am using tables to layout the site. I am kind of a beginner still. I just do web design on the side to make some extra cash. I took one class in college and kinda went off on my own from there. I find most of the info I need on how to do stuff by using the web... using forums like this one (which I just joined).

    Is there a better way to do what I'm doing? I'm open to suggestions if it won't kill me to do everything over again. But it'd be nice to know for future sites as well.

    Here's the rough draft image that I created and am now duplicating in HTML: it's at staunchart dot com. Last time I put a link in a forum it showed up in google just 2 down from the top. Which I don't want. My client sees it and probably thinks I'm a retard. You wouldn't know how to stop that from happening also would you?

  5. #4
    Senior Member jyuill's Avatar
    Join Date
    Jan 2009
    Location
    California
    Posts
    145
    Member #
    18049
    If you are just learning....don't use tables. Tables shouldn't be used for layout anyway, but especially if you are still somewhat new and have the opportunity to learn fresh. Visit W3schools. There are tons of tutorials, every tag and attribute is listed, as well as what is depracated and/or invalid. What you are going to have to do is style everything in CSS without the tables. I don't have time look at your page (I think I saw you posted a non-link link) but will try to look later, but some things will have to be wrapped in a <div>, while other things can be styled on their own. (<ul>s, <h1, h2, h3>s, etc. Depends on how/what you are doing how you will need to use <divs> . It is going to take some work, and if you already have a page laid out with a table, you may have to start over, or you may just be able to take out the table tags and style the elements within the table cells.
    Semantic, Valid, and Accessible Design!


  6. #5
    Member
    Join Date
    Dec 2005
    Location
    Canvey Island, Essex, UK
    Posts
    67
    Member #
    12033
    Quote Originally Posted by jyuill
    If you are just learning....don't use tables. Tables shouldn't be used for layout anyway, but especially if you are still somewhat new and have the opportunity to learn fresh. Visit W3schools. There are tons of tutorials, every tag and attribute is listed, as well as what is depracated and/or invalid. What you are going to have to do is style everything in CSS without the tables. I don't have time look at your page (I think I saw you posted a non-link link) but will try to look later, but some things will have to be wrapped in a <div>, while other things can be styled on their own. (<ul>s, <h1, h2, h3>s, etc. Depends on how/what you are doing how you will need to use <divs> . It is going to take some work, and if you already have a page laid out with a table, you may have to start over, or you may just be able to take out the table tags and style the elements within the table cells.
    That is very true, once you get used to something (in this case layout with tables) it becomes very hard to change the ways things are done because it is not your comfort zone. This is why it is best to learn the necessary changes now while you are new at it.
    Matthew Stocker
    (X)HTML, CSS, PHP & JavaScript Developer

  7. #6
    Senior Member jyuill's Avatar
    Join Date
    Jan 2009
    Location
    California
    Posts
    145
    Member #
    18049
    Quote Originally Posted by The Real Deal
    I'm having a hard time having my cell space between columns be different than my cell space between rows in a table.

    Any ideas?

    Doesn't matter if it's using html or CSS.

    Thanks,
    Neil
    Holy cow. An image map? That's got to be more time consuming than CSS and divs. On that and other pages where you have tables to display your thumbnails, it would be better to use a list with each image as a list-item and float your list left. I know you weren't asking for a review, but I would also change the heading font so all pages have the same font for the heading.
    Semantic, Valid, and Accessible Design!


  8. #7
    Junior Member
    Join Date
    Jan 2009
    Posts
    23
    Member #
    18106
    Quote Originally Posted by jyuill
    Holy cow. An image map? That's got to be more time consuming than CSS and divs. On that and other pages where you have tables to display your thumbnails, it would be better to use a list with each image as a list-item and float your list left. I know you weren't asking for a review, but I would also change the heading font so all pages have the same font for the heading.
    No of course I don't mind a review. In this case though that whole site is like a rough draft. Her old site is that second page with the 5 pictures. It used to be white though not black. When I showed her the new idea which was just a Fireworks document she wanted it up immediately because she had an art show she was advertising for that was coming soon. So it was quite easy to just select the boxes and turn them to hotspots and export the Fireworks document to html. It was never intended to go up that way and I didn't want to go through the hassle building the page when I knew I was going to be redoing it the right way haha which I'm going to be doing now anyway.

    Here is the new one that I've been working on which apparently is not the way to go either. Again, I don't want google seeing this link like last time so here it is: staunchart (dot) com/Gallery_Test/home2.html

    This was before I read all these posts so just know that I will probably be changing this too so it's not using tables.


    Thank you everyone for the help

    -Neil

  9. #8
    Junior Member
    Join Date
    Jan 2009
    Posts
    23
    Member #
    18106
    On that and other pages where you have tables to display your thumbnails, it would be better to use a list with each image as a list-item and float your list left.
    Do you have an example of how to do this? I went to the W3schools website but couldn't find how to get my images/list-item to display horizontally rather than vertically.

  10. #9
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    To display lists horizontaly next to each other, just insert the following into the CSS:

    Code:
    ul li
    {
    display: inline;
    }

    The key is the display: inline;.

  11. #10
    Senior Member jyuill's Avatar
    Join Date
    Jan 2009
    Location
    California
    Posts
    145
    Member #
    18049
    This is the css for a list on my page, which is exactly what you are wanting to do. The measurement units are for my page width and image sizes, so you will need to change those...and click the link below to my portfolio to see how it looks. (in "My Designs")
    ul
    {
    list-style: none;
    width: 950px;
    margin-left: 100px;
    }
    ul li
    {
    float: left;
    display: inline;
    width: 160px;
    padding: 20px;
    }
    ul li a img
    {
    border: none;
    }
    Semantic, Valid, and Accessible Design!



Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

bootstrap reduce cell spacing

,
bootstrap reduce space between table rows
,

decrease space between table rows

,

decreasing distance between two rows

,

how to reduce space between two rows in html table

,
how to reduce the space between two rows in table
,
html increase distance between rows table
,
html increase space between table rows
,
html table decrease space between rows
,
reduce space in table rows
Click on a term to search for related topics.
All times are GMT -6. The time now is 09:42 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com