CODEWITHSUNDEEP
html
jamie
jamie

Reputation:

why is the table border not showing in this html table

I have a simple html table like this: http://jsbin.com/oxiyi

I want to have a border with color #990000 outside the entire table. So I have made a table outside the table and given it border color of #990000. But still I dont see a border color.

Upvotes: 12

Views: 146865

Answers (9)

Amin Ghazi
Amin Ghazi

Reputation: 75

You need to add two styles to the code:

  1. Added "border-collapse: collapse" style to table tag
  2. Added "border: 1px solid gray" style to all td tags

table {
   border-collapse: collapse;
}
table tr td {
   border: 1px solid gray;
}

border-collapse: collapse }

Upvotes: 2

squirrel
squirrel

Reputation: 154

Try using the following code

tr .bordered{
      border-bottom:1px solid #000;
    }

the while calling it use

<tr class="bordered"></tr>

Upvotes: 0

onlink
onlink

Reputation: 9

  • Create one custom css file in '/css ' dir, say 'local.css'

    • Add following code in marinelli.info file. stylesheets[all][] = css/local.css

    • Try adding following css code in your custom css (i.e. local.css) file :

    tbody { border-top: 1px solid #CCC; }

    tr, tr.even { background: #dedede; }

    table tr th { background: #757575; }

    tr td, tr th { border: 1px solid white; }

    table tr th, table tr th a, table tr th a:hover { color: white; }

    • Please clear cached data here- /admin/config/development/performance

    Rgrds,

Upvotes: -1

cgp
cgp

Reputation: 41381

Use the border property with CSS style and give it the color. I got rid of the nested tables in your example as well.

<style>
td {
    border: solid 2px lightgrey;
}
</style>
<table style="border: 5px solid #990000; border-collapse: collapse">

http://jsbin.com/odici

That preserves your borders on your cells...

Upvotes: 26

Nathan Southerland
Nathan Southerland

Reputation: 126

I can't tell you exactly why your tables are not interacting correctly without seeing your markup, but I do see a problem with your fundamental approach.

Instead of another table, wrap your table in a DIV tag like this: 

<div style="border:solid 1px #990000;"> 
   <your table> 
</div>

This better adheres to modern standards for HTML/XHTML.

Without seeing your code, I can't tell you whether your inner table adheres to best practices or not.

Hope this helps

Upvotes: -1

Steven Richards
Steven Richards

Reputation: 2822

Several problems:

  1. A <div> would be a better tool for this job
  2. Your outer table has bgcolor specified, not bordercolor
  3. Your outer table has border set to 0
  4. You need to also include a <tr> and <td> around the inner table to make your HTML correct

Like this:

<table name='outerTable'>
    <tr>
        <td>
            <table name='innerTable'>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Upvotes: 2

Tyler Rash
Tyler Rash

Reputation: 1173

A better method would be to remove the outer table and add the border via CSS:

<table ... style='border: 1px solid #900'>

Better still, use an external stylesheet to style the table.

Upvotes: 2

Paolo Bergantino
Paolo Bergantino

Reputation: 488414

Tables inside tables! Oh noes! My head hurts.

You should be glad that doesn't work, as it is awful markup and should be avoided at all costs. Looking at your HTML code I am noticing a lot of inline properties being set and lack of CSS being used. You should really read up on CSS, as the code you have right now looks more like the code that was being produced in 2000 rather than what we're doing nowadays. In short, however, you can get rid of your outer table and add a style declaration of border: 1px solid #990000; in the table to get the effect you want. This is just the tip of the iceberg, however, and you really should read up on CSS and valid markup before your website self implodes. :)

Upvotes: 19

u07ch
u07ch

Reputation: 13702

Probably because the outer table has border set to 0

Change border =0 to border=1

Upvotes: 4

Related Questions