Table formatting issue Chrome vs IE/FireFox - html

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..

Related

Can't define HTML table height

I'm working on a school project, where we have to design a website with html 4.01 and must not use CSS at all. My Question is, how can I expand a table over the whole window height? I have tried the height attribute with a percantage value, but it didn't work. I couldn't find any good solutions for my problem since all of them used inline CSS or the style tag.
here is my code:
<!DOCTYPE HTML>
<html lang="en-GB">
<head>
<title>Horse Audio</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f8f8f8">
<tbody><tr bgcolor="#d1bc8a">
<td width="4%">
<center><img src="images/Logo.png" alt="Logo" width="45" height="45" align="middle"></center>
</td>
<td>
<font color="#3d5385" size="56px" face="DejaVu Serif Bold"><b>HORSE AUDIO</b></font>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>Contact</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>Product</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>FAQ</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="25%">
<center>Search</center>
</td>
</tr>
<tr>
<td colspan="5">
<center>Test</center>
</td>
</tr>
<tr>
<td colspan="5" bgcolor="#322c1d">
Test
</td>
</tr>
</tbody></table>
</body>
</html>

If you specify the version as HTML5 and try to set height="...", it won't work. Since in HTML5 there isn't a height-attribute for table, it will be ignored.
Without CSS, the best you can do is:
Try deleting: <!DOCTYPE html>
and then add: height="100%" to <table>.
<html lang="en-GB">
<head>
<title>Horse Audio</title>
</head>
<body>
<table height="100%" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f8f8f8">
<tbody><tr bgcolor="#d1bc8a">
<td width="4%">
<center><img src="images/Logo.png" alt="Logo" width="45" height="45" align="middle"></center>
</td>
<td>
<font color="#3d5385" size="56px" face="DejaVu Serif Bold"><b>HORSE AUDIO</b></font>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>Contact</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>Product</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="10%">
<center>FAQ</center>
</td>
<td width="5px" bgcolor="#a99972"></td>
<td width="25%">
<center>Search</center>
</td>
</tr>
<tr>
<td colspan="5">
<center>Test</center>
</td>
</tr>
<tr>
<td colspan="5" bgcolor="#322c1d">
Test
</td>
</tr>
</tbody></table>
</body>
</html>
When I run it on Firefox or Chrome, it works just fine.

You should set the height of <body> and <html> to 100% too. Then you can set the height of element with 100%.
body, html {
height: 100%;
}
table {
height: 100%;
}

Setting <td> width throwing off table display?

I'm totally stuck trying to figure out why setting a td width attribute in the following table is throwing off the display.
<table style="width:100%;">
<tbody>
<tr>
<td colspan="4">
<big><big><b>Investments By Bruce Wayne</b></big></big>
</td>
</tr>
<tr>
<td style="width:20%;"><b><u>Date</u></b></td>
<td style="width:20%;"><b><u>Invested</u></b></td>
<td style="width:30%;"><b><u>Company (and Round)</u></b></td>
<td style="width:30%;"><b><u>SPV</u></b></td>
</tr>
</tbody>
</table>
The above is rendered with the word "Invested" outside of the table entirely (see screenshot).
Any thoughts on why this might be happening? Thanks in advance!

<table style="width:100%;">
<tbody>
<tr>
<td colspan="4">
<big><big><b>Investments By Bruce Wayne</b></big></big>
</td>
</tr>
<tr>
<td style="width:20%;"><b><u>Date</u></b></td>
<td style="width:20%;"><b><u>Invested</u></b></td>
<td style="width:30%;"><b><u>SPV</u></b></td>
<td style="width:30%;"><b><u>Company (and Round)</u></b></td>
</tr>
</tbody>
</table>

Problem:
All you have to do is to format your code. There is a NON-BREAKING-SPACE between td and style <td style (the one with the Investment text) that destroys the layout. To reproduce you can delete the whitespace and add the whitespace again.
Note:
You have to <big><big> there wrapped - this can be reduced to just one element.
<table style="width:100%">
<tbody>
<tr>
<td colspan="4">
<big><b>Investments By Bruce Wayne</b></big>
</td>
</tr>
<tr>
<td style="width:20%;"><b><u>Date</u></b></td>
<td style="width:20%;"><b><u>Invested</u></b></td>
<td style="width:30%;"><b><u>Company (and Round)</u></b></td>
<td style="width:30%;"><b><u>SPV</u></b></td>
</tr>
</tbody>
</table>

HTML multiple table column issue

I have one question regarding the HTML tables that I couldn't manage to find myself.
Is it possible to create this layout using HTML and inline css within one table?
I tried to merge my cells in 4th row (I've started with 3 column layout) because I need 2 cells, and if my table width is 640px, and I force 320px for both cells, whole table gets messed up.
EDIT: 4th row is the issue, I need 2 equal width cells in it.
Thanks in advance.

<table border=1>
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td>Cell</td>
<td colspan="2">Cell</td>
<td>Cell</td>
</tr>
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td colspan="2">Cell</td>
<td colspan="2">Cell</td>
</tr>
</table>

All cells in the same column have to be the same width, so you need an extra column:
First row: one cell colspan=4
second row: one cell, on cell colspan=2, one cell
Third row: one cell colspan=4
Fourth row: one cell colspan=2, one cell colspan=2
The widths for each column then look something like:
Column 1 is narrow, let's say width=50px
Column 2 is 320 - column1's width, 280px
Column 3 same as 2, 280px
Column 4 same as 1, e.g. 50px

<table border="1">
<tr>
<td colspan="4">cell</td>
</tr>
<tr>
<td>cell</td>
<td colspan="2">cell</td>
<td>cell</td>
</tr>
<tr>
<td colspan="4">cell</td>
</tr>
<tr>
<td colspan="2">cell</td>
<td colspan="2">cell</td>
</tr>
</table>

<table border="1" width="100%">
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td width="10%">Cell</td>
<td colspan="2">Cell</td>
<td width="10%">Cell</td>
</tr>
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td colspan="2" width="50%">Cell</td>
<td colspan="2" width="50%">Cell</td>
</tr>
Check the DEMO

Use like this. it works
<!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>
<style>
td{
text-align:center;
}
</style>
</head>
<body>
<table width="640" cellspacing="5">
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td>Cell</td>
<td colspan="2">Cell</td>
<td>Cell</td>
</tr>
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td colspan="2">Cell</td>
<td colspan="2">Cell</td>
</tr>
</table>
</body>
</html>

HTML tables border not disapearing when set to 0

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?

How to do Alignment setting of table within a table?

I have to create a simple table within a table. i am using following html code for making as simple page. please copy and paste it to file for understand the problem correctly.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY>
<table border=1>
<tr>
<td>
<table>
<tr>
<td>thid entry should be on top</td>
</tr>
<tr>
<td>why this comes in middle</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>entry1</td>
</tr>
<tr>
<td>entry2</td>
</tr>
<tr>
<td>entry3</td>
</tr>
<tr>
<td>entry4</td>
</tr>
<tr>
<td>entry5</td>
</tr>
</table>
</td>
</tr>
</table>
</BODY>
</HTML>
The main problem is in my right side part of table I have some searched information, and left side some refine search panel. so when my page comes, my refine search window comes exact middle. i want my left part of table is to aligned on table, where my start.
Please help me to resolve this.

valign="top" in the correct column would be a simple solution to your prob.
like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY>
<table border=1>
<tr>
<td valign="top">
<table>
<tr>
<td>thid entry should be on top</td>
</tr>
<tr>
<td>why this comes in middle</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>entry1</td>
</tr>
<tr>
<td>entry2</td>
</tr>
<tr>
<td>entry3</td>
</tr>
<tr>
<td>entry4</td>
</tr>
<tr>
<td>entry5</td>
</tr>
</table>
</td>
</tr>
</table>
</BODY>
</HTML>
edit:
style="vertical-align:top;" if you use css