HTML tables border not disapearing when set to 0 - html

The problem that I am having is while designing an email to be sent to users the border of the HTML table is not disappearing even though it is set to 0 and so leaves horrible white lines through areas which are menu to be solid blue colors, below is my HTML code!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table width="889" border="0" >
<tr>
<td>
<table width="882" border="0" bordercolor="#0099FF">
<tr>
<td colspan="4" bgcolor="#0099FF"> </td>
</tr>
<tr bgcolor="#0099FF">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td bgcolor="#0099FF"> </td>
<td colspan="2" rowspan="2">content</td>
<td bgcolor="#0099FF"> </td>
</tr>
<tr bgcolor="#CCCCCC">
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>


Add cellspacing="0" to your second table:
<table width="882" border="0" bordercolor="#0099FF" cellspacing="0">


Probably cellspacing="0" fixes these lines?

Related

XHTML2FO.xsl gives error for nested html table tag while converting to PDF

This is my HTML and i am using XHTML2FO.XSL to transform the same to PDF. But i am getting error : (Location of error unknown)org.apache.fop.fo.ValidationException: "fo:table-row" is missing child elements. Required content model: (table-cell+) (No context info available)
Please help.
HTML:
**
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<table border="0" cellpadding="3" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="3" cellspacing="0" class="nested"
width="100%">
<tbody>
<tr>
<td class="label">Name:</td>
<td class="inputField">TEST-0000 0002</td>
</tr>
<tr>
<td class="label">Type:</td>
<td class="inputField">Change</td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0" cellpadding="3" cellspacing="0" class="nested"
width="100%">
<tbody>
<tr>
<td class="label">Description:</td>
<td class="inputField"><pre>TEST-CR </pre></td>
</tr>
<tr>
<td class="label">Estimated Completion Date:</td>
<td class="inputField"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
**
This is the XHTMl2FO.XSL:
https://github.com/jeffrafter/xhtml2fo/blob/master/xhtml2fo.xsl

background color of table cells using css and html

I've coded a table I want it to be like this : even and odd rows have different colors and first row and column have the same color ;
I used colgroup for coloring first column but it doesn't work.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
tr.odd{background-color:#f9f;}
tr.even{background-color:#fcf;}
</style>
</head>
<body>
<table width="200" border="1">
<colgroup span="1" style="background:purple;"></colgroup>
<tr style="background:purple;">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="odd">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="even">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="odd">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

Maybe this is what you wanted.
CSS
table tr td:first-of-type {background-color: purple !important;}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
tr.odd{background-color:#f9f;}
tr.even{background-color:#fcf;}
table tr td:first-of-type {background-color: purple !important;}
</style>
</head>
<body>
<table width="200" border="1">
<colgroup span="1" style="background:purple;"></colgroup>
<tr style="background:purple;">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="odd">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="even">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="odd">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

You can use the even and odd rules of the nth-child pseudoclass
tr:nth-child(even) {background: #FCF}
tr:nth-child(odd) {background: #F9F}
Followed by:
td:first-of-type,
tr:first-of-type {background: purple}

You can use CSS nth-child (IE9+), which also removes the need for even and odd classes in the HTML.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
td {background-color:#f9f;}
tr:nth-child(even) > td {background-color:#fcf;}
tr > td:first-child {background-color:purple;}
</style>
</head>
<body>
<table width="200" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

Table formatting issue Chrome vs IE/FireFox

Can anyone tell me why this table looks perfect in Chrome but not in IE or FireFox?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2" rowspan="2" style="padding-left:6px;"><img src="http://www.purelycustom.com/name_decals/style2/borders/tl_black_blue.png" /></td>
<td colspan="4" style="height:15px; background-color:#00F"></td>
<td rowspan="4"><img src="http://www.purelycustom.com/name_decals/style2/borders/right_black_blue.png" /></td>
</tr>
<tr>
<td colspan="4" height="13px" style="background-color:#000"></td>
</tr>
<tr>
<td rowspan="2"><img src="http://www.purelycustom.com/name_decals/style2/borders/l_black.png" /></td>
<td colspan="2" style="background-color:#000000"><img src="http://www.purelycustom.com/name_decals/style2/flags/flag.png" /></td>
<td style="background-color:#000000"><span style="color:#FFFFFF">YOUR</span></td>
<td style="background-color:#000000" width="15px"></td>
<td style="background-color:#000000"><span style="color:#FFFFFF">NAME</span></td>
</tr>
<tr>
<td style="background-color:#000000" colspan="5"></td>
</tr>
</tbody>
</table>
</body>
</html>
I included the !DOCTYPE declaration because I know that that has an affect on how the table gets displayed.

set the width of the 1st td in your tr's... if you add align="right" to the td the images will line up.. may override when adding specific widths to tds
something more effective would be a div with a background image instead of messing with table alignment..

How to add cells within column in html table?

I have trouble finding the right way to add cells into columns: Here is what I want to do:
A fiddle you get from : http://jsfiddle.net/AKrB3/
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table style="margin-top: 40px" width="600" height="358" cellspacing="0" cellpadding="2" align="center" border="1">
<tr>
<td align="center">fasfg1
</td>
<td width="42"></td>
<td align="center">fasfg2
</td>
</tr>
</table>
</body>
</html>

Try this, with rowspan.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table style="margin-top: 40px" width="600" height="358" cellspacing="0" cellpadding="2" align="center" border="1">
<tr>
<td align="center">fasfg1
</td>
<td width="42" rowspan="3"></td>
<td align="center" rowspan="3">fasfg2
</td>
</tr>
<tr>
<td>zroizj</td>
</tr>
<tr>
<td>zroizj</td>
</tr>
</table>
</body>
</html>
Note that it may be really hard to maintain this code if you want to add more rows in the left column in the future. It may be preferable to use 2 different tables.

I would make one more table inside the left row and add the rows to the new table

This is not a really great way to do it, but if you do it in one table, then you need separate rows for each cell and one for the rest of the items. To make the other side the same size, you must use rowspan. When you add a column, you would need to update the rowspan by one and make a new of the specific size you are inserting and remove it from the height specified by the last .
The better way to do this is by using separate tables for each band or a table inside a table.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table style="margin-top: 40px" width="600" height="358" cellspacing="0" cellpadding="2" align="center" border="1">
<tr style="height:10px">
<td align="center">fasfg1</td>
<td width="42" rowspan="4"></td>
<td align="center" rowspan="4">fasfg2
</td>
</tr>
<tr style="height:10px">
<td align="center" height="5%">fasfg1</td>
</tr>
<tr style="height:10px">
<td align="center" height="5%">fasfg1</td>
</tr>
<tr style="height:100px">
<td align="center">fasfg1</td>
</tr>
</table>
</body>
</html>​

Working hyperlink breaks upon page redirection back to original page

I am playing a sound by the click on a link, I know not beautiful but it works.
Well ran into a new problem today sound did not play the first time I clicked the link... But back to the question at hand.
The HTML page playing the sound the redirects the browser back to the page I intend it to after playing the sound, but then the fun begins.
Something goes afoul with the links inside the original page's HTML code, the browser for some reason "superimposes" additional information.
Where the original HTML refers to
/webapp/play_a_sound.html
The page once it is reloaded by the redirect in HTML page 2 suddenly refers to
//webapp/webapp/play_a_sound.html
Did you notice the //webapp/webapp/ difference ?
I have tried to use to no avail, any takes on how to avoid the link degregation ?
andytest1.html
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>andytest1.html</title>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
</head><body>
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;">TOPMENU<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>ÅÅÅÅÅÅ
</a><td style="vertical-align: top;"> Play Sound<br>
</a>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="vertical-align: top;">BOTTOMMENU<br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
</body>
</html>
PLAY_A_SOUND.HTML
<!DOCTYPE HTML>
<html>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>play_a_sound.html</title>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="refresh" CONTENT="3;URL=..//webapp/andytest1.html/">
<body>
<EMBED src="..//webapp/sound/anysound.wav"" autostart=true loop=false volume=100 hidden=true>
</body>
</html>
This particular problem has been noted using Ubuntu 10.04 LTS and Firefox 3.6.11

You have a trailing slash where there shouldn't be one.
Replace
..//webapp/andytest1.html/
by
../webapp/andytest1.html
I assume the trailing slash is making the browser treat the HTML page like a directory, so the browser will parse any relative URLs relative to /webapp/andytest1.html/ instead of /webapp/.