Why does this work?
<table border=1>
And this doesn't?
<table style="border-width:1px;border-color:black">
I get the same result in Chrome and in IE9.
Doing borders on tables with css is a bit more complicated (but not as much, see this jsfiddle as example):
table {
border-collapse: collapse;
border: 1px solid black;
}
table td {
border: 1px solid black;
}
<table>
<tr>
<td>test</td>
<td>test</td>
</tr>
</table>
The default border-style is none, so you must specify that as well as the width and the colour.
You can use the border shorthand property to set all three values in one go.
Also, the border attribute describes the border for the table and the cells. CSS is much more flexible so it only describes the border of the elements you are selecting. You need to select the cells too in order to get the same effect.
table, th, td {
border: solid black 1px;
}
See also border properties and tables in CSS.
The reason it didn't work is that despite setting the border-width and the border-color you didn't specify the border-style:
<table style="border-width:1px;border-color:black;border-style:solid;">
JS Fiddle demo.
It's usually better to define the styles in the stylesheet (so that all elements are styled without having to find, and change, every element's style attribute):
table {
border-color: #000;
border-width: 1px;
border-style: solid;
/* or, of course,
border: 1px solid #000;
*/
}
JS Fiddle demo (Or using shorthand border notation).
<table style='border:1px solid black'>
<tr>
<td>Derp</td>
</tr>
</table>
This should work. I use the shorthand syntax for borders.
You need to add border-style like this:
<table style="border:1px solid black">
or like this:
<table style="border-width:1px;border-color:black;border-style:solid;">
Like this:
border: 1px solid black;
Why it didn't work? because:
Always declare the border-style (solid in my example) property before the border-width
property. An element must have borders before you can change the
color.
<table style="border: 5px solid black">
This only adds a border around the table.
If you want same border through CSS then add this rule:
table tr td { border: 5px solid black; }
and one thing for HTML table to avoid spaces
<table cellspacing="0" cellpadding="0">
Related
I was wondering how to get these type of lines on a table
When I try to give the the <table> a "border right" property, it gives broken space between each cell.
border-right: 2px solid gray ;
HTML
<tr class="bordered">
CSS
.bordered
{
border-right: 2px solid gray ;
}
replace gray with any color you want like #cccccc
Do you want something similar like this example
.td
{
border-right: #ccc 1px solid;
}
I think what you are looking for is a vertical rule. Html has a horizontal rule
<hr>
However, it does not have a vertical rule. You can accomplish this with a bit of css though. For example
<div style="border-left:1px solid #000;height:500px"></div>
I have the following:
<table class="floatleft" style="margin-right:1em;margin-bottom:1em;border:4px;">
Although I have a border around the table, no border shows up. Any idea?
You have specified border: 4px which means the same as:
border-width: 4px;
border-style: none;
border-color: <the value of the 'color' property>;
… because unspecified values take their initial value in shorthand syntax.
Be explicit about the style and colour:
border: 4px solid black;
(or at least the style, since none will stop any border being visible).
Probably because you have a white background and you're not setting a border style and color. Try:
<table class="floatleft" style="margin-right:1em;margin-bottom:1em;border:4px solid red;">
<tr><td>Hello</td></tr>
</table>
http://jsfiddle.net/karim79/qWLvf/
I'm very new to HTML so please excuse me if this question is very simple.
I created a table using . When I look at my table there are no lines anyplace. Is there I can make lines appear around the cells?
A basic table implementation would be:
<table border=1>
<thead><tr><td>#</td><td>Name</td></tr></thead>
<tbody>
<tr><td>1</td><td>One</td></tr>
<tr><td>2</td><td>Two</td></tr>
<tr><td>3</td><td>Three</td></tr>
<tr><td>4</td><td>Four</td></tr>
</tbody>
</table>
however, through CSS styling you can do more sleek borders like:
<table cellspacing=0 style="border:1px solid #ccc;">
<thead><tr><td>#</td><td>Name</td></tr></thead>
<tbody>
<tr><td>1</td><td>One</td></tr>
<tr><td>2</td><td>Two</td></tr>
<tr><td>3</td><td>Three</td></tr>
<tr><td>4</td><td>Four</td></tr>
</tbody>
</table>
With the CSS border property
Opera have a web standards tutorial that includes a large section on CSS if you need it.
You can use:
td, th {
border: 1px solid #ccc;
/* border-width border-style border-color */
}
You could use long hand versions as well, of course:
td, th {
border-top-width: 1px;
border-top-style: solid; /* double, dashed, dotted... */
border-top-color: #ccc;
}
And the same for border-left, border-right and border-bottom...
I have a peculiar and frustrating problem. For the simple markup:
<table>
<thead>
<tr><th>1</th><th>2</th><th>3</th></tr>
</thead>
<tbody>
<tr><td>a</td><td>b></td><td>c</td></tr>
<tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
</tbody>
</table>
I apply different background-color values to the thead, tr, and tr odd elements. The problem is that in most browsers, every cell has an unwanted border which is not the color of any of the table rows. Only in Firefox 3.5 does the table have no borders in any cell.
I'd just like to know how to remove these borders in the other major browsers so that the only thing you see in the table are the alternating row colors.
You need to add this to your CSS:
table { border-collapse:collapse }
to remove the border , juste using css like this :
td {
border-style : hidden!important;
}
Modify your HTML like this:
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr><td>1</td><td>2</td><td>3</td></tr>
</thead>
<tbody>
<tr><td>a</td><td>b></td><td>c</td></tr>
<tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
</tbody>
</table>
(I added border="0" cellpadding="0" cellspacing="0")
In CSS, you could do the following:
table {
border-collapse: collapse;
}
Set the cellspacing attribute of the table to 0.
You can also use the CSS style, border-spacing: 0, but only if you don't need to support older versions of IE.
You may also want to add
table td { border:0; }
the above is equivalent to setting cellpadding="0"
it gets rid of the padding automatically added to cells by browsers which may depend on doctype and/or any CSS used to reset default browser styles
After trying the above suggestions, the only thing that worked for me was changing the border attribute to "0" in the following sections of a child theme's style.css (do a "Find" operation to locate each one -- the following are just snippets):
.comment-content table {
border-bottom: 1px solid #ddd;
.comment-content td {
border-top: 1px solid #ddd;
padding: 6px 10px 6px 0;
}
Thus looking like this afterwards:
.comment-content table {
border-bottom: 0;
.comment-content td {
border-top: 0;
padding: 6px 10px 6px 0;
}
Try assigning the style of border: 0px; border-collapse: collapse; to the table element.
sometimes even after clearing borders.
the reason is that you have images inside the td, giving the images display:block solves it.
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.
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...
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. :)
Probably because the outer table has border set to 0
Change border =0 to border=1
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.
Several problems:
A <div> would be a better tool for
this job
Your outer table has bgcolor
specified, not bordercolor
Your outer table has border set to
0
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>
You need to add two styles to the code:
Added "border-collapse: collapse" style to table tag
Added "border: 1px solid gray" style to all td tags
table {
border-collapse: collapse;
}
table tr td {
border: 1px solid gray;
}
border-collapse: collapse
}
Try using the following code
tr .bordered{
border-bottom:1px solid #000;
}
the while calling it use
<tr class="bordered"></tr>
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
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,