SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot Noodle7's Avatar
    Join Date
    Apr 2005
    Location
    Cape Town - South Africa
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    border around the table and not around the rows

    Hi

    I am making a table and I just need to make a border around the table outside not inside where all the rows are ...
    Anyway ideas?
    First stop - Earth!

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    table {border:1px solid}
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Zealot Noodle7's Avatar
    Join Date
    Apr 2005
    Location
    Cape Town - South Africa
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nope I needed one that only does a border on the out side of the table not in side aswell ( ie the rows musn't have border around them at all?
    First stop - Earth!

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    In the table markup you have to put

    Code:
    <table border="0">

  5. #5
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You may need border-collapse: collapse as well.

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4
    In the table markup you have to put

    Code:
    <table border="0">
    Don't do this.

    1 - You should separate markup and presentational elements using CSS
    2 - If you want to apply a border later then you'll have to edit the HTML instead of making a simple change in CSS
    3 - The question was about applying a border so how would border="0" help?

    However, what Tommy said is correct so you may have something else wrong with your code?

    Try this

    CSS
    Code:
    table {
    	border: 1px solid #000000;
    }
    HTML
    Code:
    <table>
    	<thead>
    		<tr>
    		<th scope="col">table head 1</th>
    		<th scope="col">table head 2</th>
    		</tr>
    	</thead>
    		<tr>
    			<td>table data 1</td>
    			<td>table data 2</td>
    		</tr>
    		<tr>
    			<td>table data 3</td>
    			<td>table data 4</td>
    		</tr>
    </table>
    Also, Tyssen's advice will be applicable if you decide that you want borders on your tr's or td's as there will be a margin between the cells by default unless you collapse them.

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    csswiz,

    I agreed with AutisticCuckoo This is the correct answer.

    Code:
    table {
    border: 1px solid black;
    }
    But, Apparently the cell lines were still there so the only way I thought this could happen was if the table already had a border='1' there.. Alternatively you could delete that markup

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Noodle7
    nope I needed one that only does a border on the out side of the table not in side aswell ( ie the rows musn't have border around them at all?
    Maybe I'm not understanding what you want.

    If you mean that you want top and bottom borders on the table, but no borders on the left or right, then:
    Code:
    table {
      border-style:solid;
      border-width:1px 0;
    }
    Birnam wood is come to Dunsinane

  9. #9
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mark, it does sound as though for some reason the td borders are being displayed which as you rightly point out might indicate that there is some markup on the table.

    Whilst code would still validate, you shouldn't really have any styling markup on a table as this can be achieved through CSS. Whether this be padding, margin or borders, remove all styling information from a table and code a table in it's purest form as my example above and then simply style it as is required through the use of CSS.


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
  •