I'm using a master page and I have a table that I want to show a border around so that it shows around each cell in the table. Here's the code I'm trying to put a border around:
<table class="mainTable" style="border-color:#DDDDDD;">
<tr>
<td class="masterBannerTop" colspan="6" >
<img style="border: none; display: block; margin: 0 auto;" alt="Travel Joan's Blog Banner" src="Website%20Photos/HeadBanner.jpg" />
</td>
</tr>
<tr>
<td class="masterBannerNav">HOME</td>
<td class="masterBannerNav">ABOUT ME</td>
<td>
... And it goes on from there. Here's the CSS:
.mainTable
{
width: 90%;
margin-left: 5%;
margin-right: 5%;
border-spacing: 30px;
border-color:#999999;
}
No matter what color I put in, it doesn't work in any of the browsers. I mean, there's only a couple places where I can put the color. Even if i try to use just CSS or in-line style elements, it still doesn't seem to want to work.
try setting
border:1px solid #999999;
in your css instead of fiddling around with table attributes! Try to avoid using these attributes because it makes changing the style of your site more difficult and the code more verbose for people that have to maintain it. Good luck and let me know how it goes :)
style="border: 1px solid black"
Perhaps also make sure you set border-width: 1px or something along those lines?
Do
<table border="1"> ... </table>
to get borders around your table and between cells.
Do
<table style="border:'1px solid #DDDDDD'"> ... </table>
or
.mainTable {
border:'1px solid #DDDDDD';
...
}
or
.mainTable {
border-size:1px;
border-style:solid;
...
}
to get borders around your table.
Related
I'm trying to make the border and background of a table to go around the caption tag, rather than excluding it for accessibility reasons. I was it to display similar to a th tag.
I've tried to add and remove borders, but the border and background styles are in a stylesheet I don't want to alter (or duplicate), making this challenging.
<table class="border-background-stylesheet">
<caption>Caption</caption>
<tr><th colspan="2">What I want caption to look like</th></tr>
<tr><td>Data cell</td><td>Data cell</td></tr>
</table>
Example:
.border-background-stylesheet {
border:#222222;
background:#00EE00;
}
<table class="border-background-stylesheet">
<caption>Caption</caption>
<tr><th colspan="100">What I want caption to look like</th></tr>
<tr><td>Data cell</td><td>Data cell</td></tr>
</table>
This appears to fulfil the requirement:
Basically, border the whole table, then remove it from the top.
Next, border the whole caption, then remove it from the bottom.
Result? Two blocks that appear as just one.
.border-background-stylesheet
{
background:#00EE00;
border: solid 1px black;
border-top: none;
}
caption
{
background:#00EE00;
border: solid 1px black;
border-bottom: none;
}
<table class="border-background-stylesheet">
<caption>Caption</caption>
<tr><th>What I want caption to look like</tr></th>
</table>
I've designed a newsletter template and there is a detail I'd like to add. As a divider between two tables/content blocks, I'd like to add an arrow that points towards the coming table. I've added a border-top with color to the table and at the center I'd like the arrow(image) to break the border, but I can only get the image to align to the top not overlap it, which is what I ideally would like to do.
The tables have different background color which span the whole viewport, the divider should do the same. The layout is also responsive.
Here is the code I've used. Is what I'm asking even possible in a newsletter in terms of restrictions and compatibility?
Here is my result:
http://jsfiddle.net/qyzq4bvb/
This is what I'm trying to do:
<table border="0" cellpadding="0" cellspacing="0" width="600" id="divider">
<tr>
<td align="center" valign="top">
<img src="http://img.jpg" alt="arrow" width="49" height="24" />
</td>
</tr>
</table>
#divider{border-top:3px solid; border-color:#63A700; width:100%; background-color:inherit;}
You could try using position: relative on your img as shown below.
You may need to make minor adjustments to your image to clean up the left/right edges for a more seamless overlay. A .png file might work better since the .jpg's color does not quite look right (compression?). However, the idea will work.
You may need to add a white top border to the image. Be aware that this type of pixel precision positioning may be sensitive to cross-browser effects.
#divider {
border-top: 3px solid;
border-color: #63A700;
width: 100%;
background-color: inherit;
}
#divider td {
text-align: center;
}
#divider td img {
display: inline-block;
position: relative;
top: -4px;
border-top: 1px solid white;
}
<table border="0" cellpadding="0" cellspacing="0" width="600" id="divider">
<tr>
<td>
<img src="http://dyreparken-nyhetsbrev.s3.amazonaws.com/ikon/arrow.jpg" alt="arrow" width="49" height="24" />
</td>
</tr>
</table>
I'm trying to style an email for gmail. Most of it displays just fine but Gmail is refusing to display the wrapper div apparently. I had a very similar wrapper working before so I can't figure out where the problem is coming from:
<div style=\"border: 1px solid black; width: 595px; height: 842px; background-color: white; border-radius: 10px; text-align: center; padding-top: 6px;\">AAA</div>
(The \" quotes are for PHP)
Gmail seems to remove the wrapper completely and display and div with no style.
It is best practice to use tables for html-email. Divs and css when applied to divs have inconsistent support across email clients, particularly Gmail, which is probably what is causing issues for you.
Your html code should instead look like this:
<table width="595" height="842" align="right" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" style="border: 1px solid black; border-radius: 10px; padding-top: 6px;">
<tr>
<td>
AAA
</td>
</tr>
</table>
Note that in many places I've used the old html methods instead of css. This is the best method for html-email.
I need help in this:
if i try to integrate this on a newsletter mailchimp the lines goes down here is the screenshot:
http://i197.photobucket.com/albums/aa253/tintingerri/Test/pic4.png
can someone help me why is this happening?
if I test this in a textpad it looks good, and if I try to put the code now in mailchimp, it the lines are reformatted. any idea?
thanks
Add
border-top: 1px solid #000;
To the style attribute for the <td> tags.
You can change the color to anything you want obviously and you may want to look into using external CSS stylesheets.
Something like:
td { border-top:2px solid #fb0 }
td { padding-left:25px; padding-bottom:10px; padding-top:10px; width: 30% }
tr.alt { background: #ffc }
the row to have the background will use
<tr class="alt">
it is also common practice to put all the style in a css file or in the separate <style> tag region.
sample: http://jsfiddle.net/2LXUn/2/
If you want a table, with only border at the top, the following will work.
<table style="border-color:#008000;border-style: solid none none none;border-width:2px; width: 100%">
<tr> <td > row1</td>
</tr> <tr >
<td>row2</td> </tr>
</table>
You may also apply the border style to table rows as required.
I have a table in my HTML yet I only want vertical spacing as it doesn't look right with the 25px horizontally. I can see no attribute in HTML to do this so is it possible?
Thanks in Advance,
Dean
EDIT:
I have a table with cellspacing all the way around of 25px. I would only like vertical cellspacing of 25px.
the cellpadding attribute, which I assume you're talking about, will only take a number and use it as pixels between the cell wall and content. You'll have to come up with a workaround, depending on your layout you may want to use a <div> instead, or if there aren't any borders around the cells you can add style='padding-bottom:25px' to it to create the same effect.
Just add this in the < head > section, just after the head tag opening of your page:
This should do the work:
<style type="text/css">
td { margin: 25px 0px; } /* tells the table to have 25
px on top and bottom, zero px on left and right */
</style>
Cleaner <table> element solution (useful for in-lining styles).
table {
border-collapse: separate;
border-spacing: 0 20px;
}
th {
background-color: blue;
color: white;
}
th, td {
width: 150px;
border: 1px solid black;
padding: 5px;
}
<table>
<tbody>
<tr>
<th>Vehicle <th>No. of Wheels <th>Rep (0-10)
<tr>
<td>Skateboard <td>4 <td>7
<tr>
<td>BMX <td>2 <td>6
<tr>
<td>Unicycle <td>1 <td>-1
I discovered this:
border-bottom: 25px solid transparent;
Be aware that IE6 has a problem with transparency.