When I run the code below, the proportions are all off. What do I need to change to get the right spacing? The columns on the bottom labeled 2 are about 4/5ths the size of the ones on top marked 4.
<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
<colgroup> <!-- Sets up table for spacing -->
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
</colgroup>
<tr>
<td colspan="4">4</td>
<td colspan="2">2</td>
<td colspan="4">4</td>
</tr>
<tr>
<td colspan="10">10</td>
</tr>
<tr>
<td colspan="5">5</td>
<td colspan="5">5</td>
</tr>
<tr>
<td colspan="2">2</td>
<td colspan="6">6</td>
<td colspan="2">2</td>
</tr>
</table>
</body>
The table markup violates the HTML table model, as you can see by using http://validator.org on the markup with HTML5 as the selected version; it says e.g. “Table column 2 established by element col has no cells beginning in it.” This means that anything may happen.
You should correct the markup so that for each column, there is at least one cell that begins in it, as required by the table model. Alternatively, as this seems to be an attempt at complicated layout with table, rather than tabular data, consider other options such as CSS layout.
Related
Table cell image and cell background image is not displaying:
<table border="1">
<colgroup>
<col width="150"/>
<col width="350"/>
</colgroup>
<tbody>
<tr>
<td height="100%" width="92%"><image src="../images/refresh.jpg" alt="Test"></td>
<td background="https://media.giphy.com/media/10S1CGpBU06FZ6/giphy.gif" width="8%"></td>
</tr>
</tbody>
</table>
Just try this.
<table border="1">
<colgroup>
<col width="150"/>
<col width="350"/>
</colgroup>
<tbody>
<tr>
<td height="100%" width="100%"><img src="../images/refresh.jpg" alt="Test"></td>
<td style="background:url(../images/refresh.jpg);" width="100%"></td>
</tr>
</tbody>
</table>
Since it is img not image and TD element dosn't have the background attribute, you can put your custom style inside the style attribute just like above.
Try using this:
<td style="background-image: url('../images/refresh.jpg')" width="100%">
Also, it's probably pretty likely that your path is incorrect. Try inserting:
<?php if(file_exists("../images/refresh.jpg")){
echo "IT EXISTS!";
}
else{
echo "NOT FOUND!";
}
?>
That should tell you if your path is correct or not.
<image> is not a tag, it is abbreviated the to <img>, so it should be something like this: <**img** src="../images/refresh.jpg" alt="Test">.
In the following example I added an image from the net to show you:
td {
border: solid 1px black
}
<table border="1">
<colgroup>
<col width="150" />
<col width="350" />
</colgroup>
<tbody>
<tr>
<td height="100%" width="100%"><img src="http://lorempixel.com/400/200" alt="Test"></td>
<td style="background:url(../images/refresh.jpg);" width="100%"></td>
</tr>
</tbody>
</table>
Hope it helped.
You are probably not seeing anything since the first td is 100%.
Change the first td to take up 92% or anything less than 100% of the width.
<td height="100%" width="92%"><image src="../images/refresh.jpg" alt="Test"> </td>
<td background="../images/refresh.jpg" width="8%"></td>
<table border="1">
<colgroup>
<col width="150"/>
<col width="350"/>
</colgroup>
<tbody>
<tr>
<td height="100%" width="92%"><image src="../images/refresh.jpg" alt="Test"></td>
<td background="https://media.giphy.com/media/10S1CGpBU06FZ6/giphy.gif" width="8%"></td>
</tr>
</tbody>
</table>
I have the following html that works in MS Mail, outlook, ios but not with gmail. I thought placing the css as inline would fix the problem but it doesn't. The two problems are the text size appears too big. I'm wondering if there is a way to have gmail use a different font size then the other email clients. Also I need a blank line in the table and use &nbsb inside a but this appears as just &nbsb text in gmail.
UPDATE: fixed the   with But fontsize even with !important not working. It seems in gmail the margin:0 auto for the table is not working in gmail
<!DOCTYPE html>
<html>
<header>
</header>
<body lang=EN-US>
<div style="text-align:center;margin:0 auto;font-size:5vw">
<img src="cid:swb-image">
<h3 style='padding-left:10px;margin-bottom:0;margin-top:0%;padding-top:0;text-align:left'> Hi firstname, </h3>
<table style='text-align:left;margin:0 auto;' >
<col style='width:6%'>
<col style='width:6%'>
<col style='width:6%'>
<col style='width:6%'>
<col style='width:6%'>
<col style='width:6%'>
<col style='width:6%'>
<col style='width:6%'>
<col style='width:6%'>
<col style='width:6%'>
<col style='width:6%'>
<col style='width:6%'>
<tr>
<td colspan='12' style='text-align:center'><h3 style='margin-top:8px;margin-bottom:0'> msg1</h3><h4 style='margin-bottom:8px;margin-top:0'>msg2 </h4></td>
</tr>
<tr>
<td colspan='3'>DATE:</td>
<td colspan='9'>datex</td>
</tr>
<tr>
<td colspan='3'>SKIPPER:</td>
<td colspan='9'>skipperx</td>
</tr>
<tr>
<td colspan='3'>BOAT:</td>
<td colspan='9'>boat</td>
</tr>
<tr>
<td colspan='3'>STATUS:</td>
<td colspan='9' style='color:colorx'>status</td>
</tr>
<!--<tr><td> </td></tr> -->
<tr>
<td colspan='4'> </td>
<td colspan='4' style='text-align:center;'>Start</td>
<td colspan='4' style='text-align:center;'>END</td>
</tr>
<tr>
<td colspan='4'>ressailxcl:</td>
<td colspan='4' style='font-weight:bold;text-align:center'>start</td>
<td colspan='4' style='font-weight:bold;text-align:center'>end</td>
</tr>
<tr>
<td colspan='12' style='text-align:center'><h5 style='margin-bottom:1%;'>Click on link to update your availability</h5></td>
</tr>
<tr>
<td colspan='4' style='text-align:left;'><a style='text-decoration:none;' href='mailto:skipemail'>
<img src="http://www.sailwbob.com/skipper/public/img/email-32.png" style="width:32px;height:32px;border:0;"></a></td>
<td colspan='4' style='text-align:center;'><h5> <a href='http://www.sailwbob.com/skipper'>SwB link</a></h5></td>
<td colspan='4' style='text-align:right';><a style='text-decoration:none' href='tel:skipphone'>
<img src="http://www.sailwbob.com/skipper/public/img/phone-32.png" style="width:32px;height:32px;border:0;"></a></td>
</tr>
</table>
</div>
<div>
<!--skipmsg-->
</div>
</body>
</html>
so the problem was really just:
font-size:5vw;
In gmail it's just too large but in other places the 5vw was working just fine.
The solution, within style tags I added:
font-size:5vw!important
and in the inline css for the div changed the size to 16px. So, in browsers that need the 5vw (they accept the style tag) they get that size and in places that don't accept the style tags they get 16px. Ugly, but it works
I am re-doing my high school track/cross country website. I have downloaded the files that were used in the original site and I am having issues with table formatting. Here is a pic:
You can see that the bottom table is spaced out much nicer than the top. I am sure there is a small line that I need to change but after a while of messing with stuff I can't seem to get it to work. Here is the HTML for the top (bad) table
<table frame="void" cellspacing="0" cols="5" rules="none" border="0">
<colgroup>
<col width="334" />
<col width="300" />
<col width="116" />
<col width="110" />
</colgroup>
<tbody>
<tr>
<td colspan="5" width="775" height="30" align="center" sdnum="1033;0;#"><strong>Shepherd High School Boys Outdoor Track Records</strong></td>
</tr>
<tr>
<td align="left" sdnum="1033;0;#"> </td>
<td height="22" align="left" sdnum="1033;0;#"><strong>Event</strong></td>
<td align="left" sdnum="1033;0;#"><strong>Name</strong></td>
<td align="center" sdnum="1033;0;#"><strong>Record</strong></td>
<td align="center" sdnum="1033;0;#"><strong>Date</strong></td>
</tr>
Here is the HTML for the good table
<table frame="void" cellspacing="0" cols="4" rules="none" border="0">
<colgroup>
<col width="334" />
<col width="300" />
<col width="116" />
<col width="110" />
</colgroup>
<tbody>
<tr>
<td colspan="5" width="775" height="30" align="center" sdnum="1033;0;#"><strong>Shepherd High School Boys Outdoor Track Records</strong></td>
</tr>
<tr>
<td height="22" align="left" sdnum="1033;0;#"><strong>Event</strong></td>
<td align="left" sdnum="1033;0;#"><strong>Name</strong></td>
<td align="center" sdnum="1033;0;#"><strong>Record</strong></td>
<td align="center" sdnum="1033;0;#"><strong>Date</strong></td>
</tr>
They are the same but they end up very different. Is there something in there that is messing with the layout? If you need anything else I will be glad to add it. Thank you.
I've got a table with two rows. The first row just has three cells. The second row has two cells, with the first cell containing another table that needs to fill the whole cell.
<table border="1" style="border-collapse:collapse;">
<tr>
<td style="WIDTH: 205px;">1</td> <!--This width doesn't apply in Chrome-->
<td style="width:100%;">2</td>
<td style="WIDTH: 5px;">3</td>
</tr>
<tr>
<td colspan="2">
<TABLE width="100%" border="1" style="border-collapse:collapse;table-layout: fixed;">
<TR>
<TD style="width:130px;">
A</TD>
<TD style="width:90px;">
B</TD>
<TD style="width:230px;">
C</TD>
</TR>
</TABLE>
</td>
<td>
D
</td>
</tr>
</table>
Simple enough, really....or so I thought.
It appears as I would expect in IE. But Chrome seems to not apply the width of the first cell correctly. It seems to be affected by the table in the cell below.
Why is this happening, and how can I get around this?
Two things you should do:
On the table element, use table-layout: fixed;
Insert columns and give them a width
(You could also assign width to table headers/cells of the first row)
Like this:
<table border="1" style="table-layout: fixed; width: 100%;">
<colgroup>
<col style="width: 205px;">
<col style="width: auto;">
<!-- Use "width: auto;" to apply the remaining (unused) space -->
<col style="width: 5px">
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!-- Etc. -->
I created a Bingo Card using Table in HTML. In the second column if I use the letter I, the size of the column automatically reduces and if I use any other letter then size of column comes back to normal. Why its happening so?
Table Image (using I in Column 2): http://imageshack.us/photo/my-images/21/18575712.png/
Table Image (using A in Column 2): http://imageshack.us/photo/my-images/580/11014314.png/
<html>
<head>
<title>Bingo Card</title>
</head>
<body>
<h2>Bingo Card</h2>
<table border="1px" width="50%">
<tr>
<th>B</th>
<th>A</th>
<th>N</th>
<th>G</th>
<th>O</th>
</tr>
<tr>
<td id="square0"> </td>
<td id="square1"> </td>
<td id="square2"> </td>
<td id="square3"> </td>
<td id="square4"> </td>
</tr>
<tr>
<td id="square5"> </td>
<td id="square6"> </td>
<td id="square7"> </td>
<td id="square8"> </td>
<td id="square9"> </td>
</tr>
<tr>
<td id="square10"> </td>
<td id="square11"> </td>
<td id="square12"> </td>
<td id="square13"> </td>
<td id="square14"> </td>
</tr>
<tr>
<td id="square15"> </td>
<td id="square16"> </td>
<td id="square17"> </td>
<td id="square18"> </td>
<td id="square19"> </td>
</tr>
<tr>
<td id="square20"> </td>
<td id="square21"> </td>
<td id="square22"> </td>
<td id="square23"> </td>
<td id="square24"> </td>
</tr>
</table>
</body>
</html>
I see the same issue in Chrome when column 2 contains an A. If you want to have a guaranteed column width you should explicitly define its size using either the <colgroup> tag or a corresponding width attribute:
<table border="1px" width="50%">
<colgroup>
<col width="20%"></col>
<col width="20%"></col>
<col width="20%"></col>
<col width="20%"></col>
<col width="20%"></col>
</colgroup>
...
or
<tr>
<th style="width:20%">B</th>
...
The browsers just does not make any guarantee if you do not explicitily define the widths for the different columns.
UPDATE: From the HTML4 specification:
If an author specifies no width information for a column, a user agent
may not be able to incrementally format the table since it must wait
for the entire column of data to arrive in order to allot an
appropriate width.
You could try change the column width with css...
And I think it's happening because of the letter 'I' is "thin" compared to other letters, but I don't sure about that...
I think each character takes some space the width of i is less than A, to get resolved use a css style
td{width:20%} this should get resolved
In this simple case, it suffices, for most browsing situations, to set the column widths to the same (20%). However, in general, table cell and column width settings in HTML and CSS are just suggestions and may be overridden by browsers, on the basis of the contents requirements. (You can see this if you use a very narrow browser window width here.)
The way to prevent this is to use “fixed” table layout, e.g.
<style>
table { table-layout: fixed; }
th { width: 20%; }
</style>
“Fixed” layout has its implications. For example, if the content does not fit, it will get truncated.